/* last modified: 11 Aug 2009  */

/* split band pass filter */

/*\*//*/
@import url("test-ie8.css");
@import("test-ie.css"); /* For IE/Mac */
@import test-ie; /* For IE/Win */

a abbr {text-decoration:none}

h2+dl {margin:1em 0 0;}
h2+dl dt {width:36%;margin:0 0 1em;padding:0;float:right;clear:both;}
h2+dl dd {width:63%;margin:0 0 1em;padding:0;}
h2+dl dt a {display:block;margin:0;padding:5px 10px;}
h2+dl p {padding:5px 0;margin:0;}

h1 {text-align:center}

/* p code {font-size:120%;} */

/* regular css */

html, body {height:100%;width:100%;}
body {margin:0;background: #efefef;font-size: 100%;line-height:150%;font-family: Tahoma, Arial, Verdana, sans-serif;}

h1 {font-size:160%;}
h2 {font-size:125%;}
h3 {font-size:115%;}
h4 {font-size:100%;}

#container {position:relative;z-index:2;min-height:100%;min-width:760px;max-width:1300px;margin:0 auto;}



div>a:first-child {position:absolute;right:0px;width:99.9%;height:1.5em;right:0;z-index:1;text-align:center;}
div>a:first-child {padding:3px 0 5px;color:#036;display:block;font-weight:bold;text-decoration:none;}
div>a:first-child span {position:relative;top:-100px;}
div>a:first-child:hover span, div>a:first-child:focus span {position:relative;top:0px;}
div>a:first-child:hover, div>a:first-child:focus {color: #def;text-decoration:underline;background:#91A3BF;background: hsla(153, 26%, 66%, 0.6)}

/* Focus only works in Gecko. Works in Mozilla 1.7.13. When will the other implemetations support :focus for keyboard accessiblity? Selecting the 'skip to menu' link with either the mouse or the keyboard works in Gecko, IE5.5, IE6 and IE7 bringing the focus to the menu. This does not happen in Opera or Safari. */

.float1 {float:right;margin-left:-19%;height:120px;width:20%;background: url(images/header-side2.jpg) 70%;}
/* .float1 img {margin:50px 0 0;} */





/* The negative margin-left above allows part of the banner (81%) to slide under this element (Safari 3 shows a gaps at regular intervals when resizing the veiwpoint if this wasn't present). If it was 20% then this would cause the elements below to jump up under this float */



/*  backpinkyellow2 */
.float2 {float:left;width:95%;width:100%;height:1.7em;padding:10px;line-height:3.35;margin-left:-20px;
background-image: url(../images/linkback10.png);
background-position: 50% 0%;
background: url(../images/linkback21.png) 50%, url(../images/backbluegreen1b.jpg) -50%;
}

/* c{la}ss logo */

#wrapper1+div span {display:block;width:144px;height:120px;background: url(../images/logo-test2.png) 50% 60% no-repeat;position:absolute;top:0;left:4%;z-index:1;}


#wrapper1 {float:left;width:100%;min-width:760px;padding-bottom:4em;}
/*
div#wrapper1:nth-child(2n+3)[id*=""] {background: #efefef url(images/right-back.jpg) 100% repeat-y;-webkit-background-size: 20% 100%;-o-background-size:20% 100%;-khtml-background-size:20% 100%;}
*/
div#container {background: #efefef url(images/right-back.jpg) 100% repeat-y;-webkit-background-size: 20% 100%;-o-background-size:20% 100%;-khtml-background-size:20% 100%;}

/* style for Safari and Opera this gives that sidebar a background strip or faux column */ 


#wrapper2 {float:left;width:66%;margin-top:30px;margin-left:6%;}



/* -- CONTENT ----------------- */


#wrapper2 div {max-width:38em;min-width:530px;margin:0 auto;padding-top:1px;}
#wrapper2 div h1:first-child {margin-top:0}




/* -- SOURCE ----------------- */

/* source1 */
#wrapper2+div:not(span) {background: none;} /* I wonder how long this hack will work, long enough hopefully for the other browsers to catch up. Don't use hacks if you don't know how they work. */
div#wrapper2+div {position:relative;float:right;width:20%;padding-top:1px;}

/* source1 sections */

#wrapper2+div>div {margin:20px 5% 30px;}
#wrapper2+div>div {padding-left:5px;padding-right:5px;background: hsla(220, 95%, 95%, 0.75);-o-border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border: 3px solid  hsla(220, 50%, 50%, 0.3)}

/* dangerous hack - special style for Safari 3 

NOTE, this hack is now broken, please see http://css-class.com/test/css/selectors/att/not-attribute-substring-no-match-empty.htm

*:not(:root)~html #wrapper2+div[id*=""]:not(:first-child)>* {border: 3px solid hsl(220, 80%, 80%)}
*/
#wrapper2+div h2, #wrapper2+div h3 {text-align:center}

h2+ol {margin-left:15px;padding-left:1em;}
#wrapper2+div h3+ul {margin:0;padding:0 0 10px;list-style:none;}
#wrapper2+div h3+ul li {margin:0;padding:0;/*background: hsla(180, 80%, 80%, 0.3)*/}
/*
#wrapper2+div h3+ul li:nth-child(2n+2) {margin:0;padding:0;background: hsla(220, 80%, 80%, 0.3)}
*/
#wrapper2+div h3+ul a {text-decoration:none;display:block;padding:5px;}

/* dangerous hack - style for Opera 9.5 since it incorrectly parses hsla background color even thought it doesn't support the property. 

*:not(:first-child)~html #wrapper2+div h3+ul li:hover {background: #9fe}
*:not(:first-child)~html #wrapper2+div>div {background: #afc}

NOTE, do demo for this bug http://css-class.com/test/css/backgrounds/multiple-hsla-backgound.htm http://css-class.com/test/css/shadows/text-shadow2.htm

*/


/* source1 and source2 */

div+div+div {display:table;height:120px;width:81%;background:url(images/header3.jpg) 60% top;}

/* This above selector selects two elements, plus selects the elements overruled by the following selector */ 

/* A new way to serve my banner background, otherwise locking out browsers */ 



/* Last in source */

div+div+div+div {clear:both;height:4em;width:100%;}


/* -- FOOTER ----------------- */

/* False Footer clearing wrapper1 - clears both the content and the sidebar and is style by the above */

/* Sticky Footer within wrapper1 */

div#wrapper2+div+div {position:absolute;bottom:0;text-align:center;background: #dddddd/*url(../images/examples/green1tran2.png)*/;padding:15px 0;}
#wrapper2+div+div p {display:inline;}/* keeps the footer elements on one line */
#wrapper2+div+div ul {padding: 0;margin: 0;list-style: none;margin-right:40px;}
#wrapper2+div+div li {position: relative;float: right;}
#wrapper2+div+div a {color: #002000;font-size:small;padding:0 10px;text-decoration:none;}
#wrapper2+div+div a:hover {color: #bfffbf;text-decoration:underline;}

/* There is actually two footer elements, one each after each floated wrapper */


/* TESTING */

#wrapper1+div+div {background:none;width:60%;margin-left:10%;overflow:hidden;border-top: 4px solid navy;} /* Clearing element for inner wrapper1 or source1, which ever is longest */



/* Hack for Gecko since my sticky footer is 4em in height but Gecko believes otherwise.
See CSS WG message  http://lists.w3.org/Archives/Public/www-style/2008Apr/0117.html
about empty substring attribute selectors 

#wrapper2:not([id*=""])+div+div {height:2.1em;}
*/

/* IE/Win IE/Mac has there own special rules, please see http://css-class.com/cssscript/test-ie-all.css */



/* My dream, in header area */

#wrapper1+div p {position:absolute;left:36%;top:70px;font-size:143%;margin:-0.65em 0 20px -5em;color:#CAD0D8;color: hsla(152, 35%, 82%, 0.5);text-shadow: 3px 3px 0 #292929} /*#292929*/

/* CSS Test Pages heading */

.float2 h3 {position:absolute;left:10px;top:130px;font-size:140%;margin:-1.1em 0 0;color:#CAD0D8;color: hsla(152, 35%, 82%, 0.5);}


/* -- TEST ------------------- */

/* Click the bug test, doesn't workin in Safari */

.float1:active+div+div {display:block}


/* Navigation */


#navigation {position:relative;margin-top:120px;}
#navigation div {position:absolute;top:0.25em;right:-17%;}


#navigation ul {font-size: 100%;font-family: Tahoma,Helvetica, Arial,sans-serif;padding:0;margin:0;list-style:none;}
#navigation, #navigation ul {}

/*
#navigation ul>li>ul {padding-bottom:5px;padding-right:4.5px;background:url(../images/examples/dropshadow2blue.png) no-repeat 100% 100%}
*/
#navigation ul>li>ul>li {-webkit-box-shadow:5px 5px hsla(185, 25%, 25%, 0.5);-moz-box-shadow:5px 5px hsla(185, 25%, 25%, 0.5);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}

#navigation ul>li>ul>li:hover, #navigation ul>li>ul>li:focus {-webkit-box-shadow:5px 5px hsla(210, 50%, 50%, 0.5);-moz-box-shadow:5px 5px hsla(185, 25%, 25%, 0.5);}

#navigation li {float: left;position: relative;line-height : 1.35em;border:3px solid #679;border:3px solid hsla(220, 80%, 80%, 0.3);margin-right:0px;}
#navigation ul>li {-moz-border-radius:10px;-webkit-border-radius:8px;border-radius:8px;}
#navigation li:first-child {border-left-width:3px;}
#navigation li:last-child {border-right-width:3px;}
#navigation li li {border:none;margin:0}
#navigation ul>li li {float:none;}/* Hide from IE6 */
#navigation li li:last-child {}


#navigation li a {display:block;text-decoration:none;text-align:center;color: #fff;
border:1px solid;border-color:#dee #246 #357 #cdd;background:url(../images/examples/navblue3.png) repeat-x 60% 0;
	width: 4.5em;padding: 3px 0.5em 5px;cursor:pointer;}


#navigation li a:hover {border:1px solid;border-color:#add #369 #add #dff;}
#navigation li a:hover {background:#3ba/*8a9*/ url(../images/examples/navgreen3.png) repeat-x;}
#navigation li>a:hover {background:hsla(150, 70%, 60%, 0.2)}/* for Gecko 1.9 and Safari 3 to show my transparent background. Hide from IE6 */



#navigation li li a {text-align:left;background:#5D688F;background: hsla(220, 40%, 40%, 0.7);width: 9em;border:none;margin:0;padding: 5px 0.5em 7px;}
#navigation li li:last-child a {-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}

#navigation ul>li>a {-moz-border-radius:5px;-webkit-border-radius:4px;border-radius:4px;}

#navigation li li a:hover {background:#6D789F;border:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}

#navigation li a:focus {color: #dfd;outline: 2px solid #dde;}
*:first-child+html #navigation>li>a:active {color: #dfd;border: 2px solid #dde;padding: 2px 0.45em 4px;}
#navigation li li a:focus {color: #dfd;outline: 2px solid #E16991;}
*:first-child+html #navigation li li a:active {color: #dfd;border: 2px solid #dde;}


#navigation li li a:focus, #navigation li li a:active {position:relative;left:10000px;}
#navigation li+li+li+li+li li a:focus, #navigation li+li+li+li+li li a:active {margin-left:-4.4em;}
#navigation li a:focus+ul a {position:relative;left:0;margin-left:0;}
#navigation li:hover li a:focus, #navigation li:hover li a:active, #navigation li.sfhover li a:active {position:relative;left:0;}
#navigation li+li+li+li+li:hover li a:focus, #navigation li+li+li+li+li:hover li a:active {left:4.4em;}

body:hover #navigation li a:focus+ul:after, body:hover #navigation li li a:focus:after {
	content : "left click elsewhere to close";line-height : 1.35em;color: #003300;font-size:80%;display:block;
	padding: 6px 0.5em;text-decoration:none;background-color: #A9E1B1;border-bottom: 1px solid #238126;outline: 2px solid #79b;}
body:hover #navigation li li a:focus:after {margin-top: 6px;}


div>a:first-child:focus+div+div+div #navigation li {background:#8ad;}/* highlights the menu when the skip to menu link is in focus */


#navigation li ul {position:absolute;left:-10000px;}

#navigation li:hover ul, #navigation li.sfhover ul {top:100%;left:0;z-index:1}
#navigation li+li+li+li+li:hover ul {top:100%;left:auto;right:0;}
#navigation li a:focus+ul {top: 100%;left:0;}
#navigation li+li+li+li+li a:focus+ul {left:auto;right:0}
#navigation li:hover a:focus+ul {margin-left:0;}