/* last modified: 22 mar 2008 */

a abbr {text-decoration:none}

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 dt a {display:block;margin:0;padding:5px 10px;}
dl p {padding:5px 0;margin:0;}

h1 {text-align:center}

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

/* Safari shows a bug when using the skip to menu link where the focus ends up it ironically on the Webkit nightly link */

.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%;
}
/* no this is just a comment */


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

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

#wrapper1[id*=""]:not(:first-child) {background: url(../images/backbluegreen2.jpg) right repeat-y;-webkit-background-size: 20% 100%, 20% 100%;-o-background-size:20% 100%;-khtml-background-size:20% 100%, 20% 100%;}

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

/* source1 setions */

#wrapper2+div>div {margin:20px 5% 30px;}
#wrapper2+div>div {padding-left:5px;padding-right:5px;background: hsla(220, 95%, 95%, 0.5);-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 */

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



/* source1 and source2 */

div+div+div {display:table;height:120px;width:81%;background:url(../images/backbluegreen1b.jpg) 50% 0%;}

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

/* Yes my old targeting hack for Safari and Opera back out since the below image is downloaded wrongly by IE8 */ 

div+div+div[class*=""]:not(:first-child) {background: url(../images/backbluegreen1.jpg);-webkit-background-size: 100% 100%;-o-background-size:100% 100%;-khtml-background-size:100% 100%}


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

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

#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. IE8 is not using this. */

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


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