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


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

#container {background: #efefef url(images/right-back.jpg) 100% repeat-y;background-size: 20% 100%;-webkit-background-size: 20% 100%;-moz-background-size:20% 100%;-o-background-size:20% 100%;-khtml-background-size:20% 100%;}

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

/* Focus only works in Gecko and IE8. 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. */


/* 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;line-height:3.35;
background-image: url(../images/linkback10.png);margin-left:-20px;
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:81%;background:url(images/header3.jpg) 60% top;}

/* 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: 4px 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: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*/


/* -- 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;left:10em;}


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