/* last modified: 27th Apr 2010  */

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


/* Hint - Don't use CSS hacks if you don't know how they work. */

/* BASIC STYLE */
a abbr {text-decoration:none}

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

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

#wrapper2 dt a:hover {background:#cde;}
#wrapper2 dd {border:1px solid transparent;}
#wrapper2 h2+dl dd>p {margin-left:6px;}
#wrapper2 dt:hover+dd, dt:hover+dt~dd {border:1px solid navy;}

#wrapper2 dl~* {clear: both;} /* stops the h2 headers from jumping upwards */


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

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

/* background:red; */

#container {
background: url(images/header3.jpg) 60% top no-repeat;
background-size: 20% 100%;

background: url(images/right-back.jpg) 100% 120px no-repeat, url(images/header3.jpg) 60% top no-repeat;
-webkit-background-size: 20% 100%;
-moz-background-size:20% 100%;
-o-background-size:20% 100%;
-khtml-background-size:20% 100%;
background-size: 20% 100%, auto;
}

a[href="#navigation"] {position:absolute;height:2.1em;padding-top:10px;left:10px;top:120px;margin:0;color:#CAD0D8;color: hsla(152, 25%, 92%, 0.7);}



/* CSS Test Pages heading */



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

/* Top right hand corner. The negative margin-left above allows part of the banner (81%) to slide under this element (Safari 4.0 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. Update 21 Oct 2009, 20% causes the page to break in Safari and Gecko */


/*  Block where menu resides */
.float2 {float:left;width:100%;height:1.7em;padding:10px 0;line-height:3.35;
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;}

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

#wrapper1 {float:left;width:100%;min-width:760px;padding-bottom:4em;}
#wrapper2 {float:left;width:66%;margin-top:30px;margin-left:6%;}

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


/* -- SIDEBAR ----------------- */

/* source1 */
#wrapper2+div {background: none;position:relative;/**/float:right;width:20%;padding-top:1px;}

/* source1 sections */

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

#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;}
#wrapper2+div h3+ul a {text-decoration:none;display:block;padding:5px;}

/* NOTE, Opera 9.5 since it incorrectly parses hsla background color even thought it doesn't support the property. 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:80%;}

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


/* Last in source, including footer */

div+div+div+div {clear:both;width:100%;}


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

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

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

/* Sticky Footer within wrapper1 */

div#wrapper2+div+div {position:absolute;height:2.1em;bottom:0;text-align:center;background: #dddddd;padding:15px 0;}
#wrapper2+div+div p {margin:0;}
#wrapper2+div+div ul {float:right;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: #4f6fcf;text-decoration:underline;}

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

/* 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:50%;top:70px;font-size:143%;margin:-0.65em 0 20px -9em;color:#CAD0D8;color: hsla(152, 35%, 82%, 0.5);text-shadow: 3px 3px 0 #292929} /*#292929*/




/* Navigation */


#navigation {position:relative;margin-top:120px;}
#navigation div {position:absolute;top:0.25em;left:8em;}


#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;}
*/
#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);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);box-shadow:5px 5px hsla(210, 50%, 50%, 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:hover li a {background: #5D688F;background:hsla(220, 50%, 35%, 0.9)}

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