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

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

h1 {text-align:center}
/* regular css */

h2+ol {padding-left:2em;}


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-width:760px;max-width:1300px;margin:0 auto;/*background: url(../images/examples/bluehatchback3.gif)*/}

#container {position:relative;min-height:100%;} 


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

/* Safari shows a bug when using the skip to menu link where the focus ends up it ironically on the Webkit nightly link. See False footer details below for more Safari bugs with this page. */

.float1 {float:right;margin-left:-19%;height:120px;width:20%;background: url(../images/examples/tarantula2.jpg)0 0;-webkit-background-size: 100% 100%;-o-background-size:100% 100%;-khtml-background-size:100% 100%}
.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%;
}
/* */


.hide {position:absolute;left:-10000px;}


.logo {display:block;width:144px;height:120px;background: url(../images/logo-test2.png) 50% 70% no-repeat;position:absolute;top:0;left:5%;z-index:1;}


#wrapper1 {float:left;width:100%;min-width:760px;/*padding-bottom:4em;*/}

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


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






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

/* source1 */

#wrapper2+div {position:relative;float:right;width:20%;padding-top:1px;background: url(../images/examples/green1tran2.png)}
#wrapper2+div h2 {text-align:center}

/* source1 and source2 */

div+div+div {display:table;height:120px;width:81%;background:url(../images/backbluegreen1b.jpg) 50% 0%;background: url(../images/backbluegreen1.jpg), url(not-a-real.jpg);-webkit-background-size: auto, 100% 100%;-o-background-size:100% 100%;-khtml-background-size:100% 100%}

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

/* Last in source */

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

/* Notice the ~ between the divs above and below, this is because these selectors would not work in IE7 if they had + since ordinary HTML comments are seen as real elements. If I was to include an axtra div here and there in the source, then these selectors would have to be changed so the better browser don't use them */

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

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

/* Sticky Footer within wrapper1 */

#wrapper2+div+div {position:absolute;bottom:0;text-align:center;background: 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:pink}



/* Hack for Opera 9.26 and earlier since they need a negative margin given above */

html:first-child #wrapper1+div+div {margin-bottom:-20em;}

/* Hack for Gecko since my sticky footer is 4em in height but Gecko believes otherwise */

#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:40%;top:70px;font-size:140%;margin:-0.65em 0 20px -5em;color:#CAD0D8;color: hsla(152, 35%, 82%, 0.5);}

/* 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}

/* Special text for IE7 users */

div:first-child~/**/p, div:first-child+*+p+p {position:absolute;top:10px;left:-10000px;display:none;height:0;width:0;visibility:hidden}

div:first-child+*+p {position:absolute;top:0;right:10px;width:12%;visibility:visible}




/* Navigation */


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

/* Hacks to at least help IE7 with the placement of the menu 

*:first-child+html #navwrap {position:static;}
*:first-child+html #navwrap2 {position:absolute;top:120px;right:6%;}

Commented out

*/


/* Since IE6 or earlier just doesn't show any menu or even header at all (apart from the bug), no hacking could fix it for these brwosers */


#navigation {font-size: 100%;font-family: Tahoma,Helvetica, Arial,sans-serif;}
#navigation, #navigation ul {padding:0;margin:0;list-style:none;}
#navigation>li>ul {padding-bottom:5px;padding-right:4.5px;background:url(../images/examples/dropshadow2blue.png) no-repeat 100% 100%}


#navigation li {float: left;position: relative;line-height : 1.35em;border:3px solid #679;margin-right:0px;}
#navigation li:first-child {border-left-width:6px;}
#navigation li:last-child {border-right-width:6px;}
#navigation li li {border:none;margin:0}
#navigation>li li {float:none;}/* Hide from IE6 */


#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[href] {text-align:left;background:#5D688F;width: 9em;border:none;margin:0;padding: 5px 0.5em 7px;}

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

#navigation li li a:hover {background:#6D789F;border:none;}

#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;}


a.skip: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;}