@charset "UTF-8";
/* CSS Document */

/* for Internet Explorer to replace :target */
a#pull,
a#push {behavior:url(target.htc)}
#pulldown {width:100%; height:250px; left:0;  position:fixed; z-index:800;
transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
}
.close {bottom:-250px;}

#opacity {
	position:absolute;
	width:100%;
	left:0;
	height:250px;
	border-bottom:1px solid #222;
	opacity:0.9;
	filter: alpha(opacity=90);
	-o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
	background-image: url(background.jpg);
	background-repeat: no-repeat;
}
#contents {
	height:250px;
	width:100%;
	left:0;
	position:absolute;
	color:#fff;
	text-align:center;
	overflow:hidden;
	background: url(top-back.png) repeat-x left bottom;
}
#lowerContent {width:750px; margin:40px auto 0 auto;}
#lowerContent dl {width:238px; margin:0 5px; padding:5px 0; background:#555;
float:left; text-align:left; border:1px solid #888;}
#lowerContent dl dt {color:#ff8000; font:bold 12px/25px arial, sans-serif;
padding:0 5px;}
#lowerContent dl dd {color:#aaa; font:12px/18px arial, sans-serif; margin:0;
padding:0 5px;}
#lowerContent dl dd a {color:#ddd;}
#lowerContent dl dd a:hover {color:#fff;}


a#pull {
	display:block;
	position:absolute;
	z-index:100;
	top:-30px;
	color:#fff;
	left:90%;
	background:url(open-home.png);
	z-index:-1;
	width:200px;
	margin-left:-100px;
	height:30px;
	text-align:center;
	text-decoration:none;
	font-family:GriffosSCapsFontRegular, verdana,arial, sans-serif;
	font-size:18px;
	line-height:30px;
}

a#push {
	display:none;
	position:absolute;
	z-index:100;
	top:-30px; color:#fff;
	left:90%;
	background:url(close-home.png);
	z-index:-1;
	width:200px;
	margin-left:-100px;
	height:30px;
	text-align:center;
	text-decoration:none;
	font-family:GriffosSCapsFontRegular,arial, sans-serif;
	font-size:18px;
	line-height:30px;
}

#tab {position:fixed; top:0; left:0; display:none;}
#tab:target + #pulldown {bottom:0px;}
#tab:target + #pulldown #pull {display:none;}
#tab:target + #pulldown #push {display:block;}


/* for IE 8 and lower */
.open {bottom:0;}
.open #pull {display:none;}
.open #push {display:block;}

.close {bottom:-250px;}
.close #pull {display:block;}
.close #push {display:none;}

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/ipad-droplist.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */

/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+'
problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
/*Top nav bar*/
.nav {
	width:1500px;
	height:40px;

	position:relative;
	z-index:100;
	font-family:GriffosSCapsFontRegular, Verdana, arial, sans-serif;
	margin:206px auto 0 auto;
	padding-left:250px;
	text-align:left;
	line-height: 40px;
}
.menu,
.menu ul {padding:0; margin:0; list-style:none;}
.menu {width:1500px;  padding-left:2px;}

/*Drop down menu boxes*/
.menu ul.sub {
	position:absolute;
	left:-9999px;
	bottom:38px;
	padding:10px 0 10px 10px;
	z-index:-1;
	border:2px solid #999;
	background-color: #fffdee;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	-moz-border-radius:10px;

}
.menu ul.sub1 {width:160px;}
.menu ul.sub2 {width:310px;}
.menu ul.sub3 {width:450px;}
/*All sub menu headers*/
.menu ul.sub h5 {
	padding:4px 0;
	margin:0;
	color:#1a157a;
	font-size:18px;
	width:100px;
	line-height:12px;
}

.menu li.top-li {float:left; position:relative;  z-index:50;}

/*Header text*/
.menu li.top-li a.top-a {
	display:block;
	float:left;
	line-height:20px;
	color:#666;
	padding:10px 18px 0 10px;
	text-decoration:none;
	font-size:20px;
	margin-top:3px;
}

.menu li.top-li a.top-a:hover {color:#000;}

/*Header hover*/
.menu li.top-li:hover > a.top-a {
	background:#fffdee;
	color:#1a157a;
	height:28px;
}
.menu li.has-sub a.top-a:hover {height:28px;}
.menu li.has-sub:hover > a.top-a {height:28px;}

.menu li.close a {position:absolute; left:50%; top:-30px; width:100px;
height:30px; line-height:30px; color:#fff; font-weight:bold; font-size:12px;
padding:0; margin:0 0 0 -50px; background:#ff8000; text-align:center;
text-decoration:none; display:none;}

.menu ul li {width:150px; float:left;}
/*Remember, SPACE for list items controlled here, but not the drop-down box
size*/
.menu ul li a {
	line-height:20px;
	color:#999;
	display:block;
	width:150px;
	margin-bottom:1px;
	padding:3px 30px 0 10px;
	text-decoration:none;
	font-size:18px;
	font-family: JosefinSlabSemiBold, Verdana, Geneva, sans-serif;
}
.menu ul li a:hover {
	color:#000;
	border-left-width: 4px;
	border-left-style: dotted;
	border-left-color: #000;
}
.menu ul li.bottomLine {width:100%; clear:left; padding:5px 10px 5px 0;
background:#333; margin-left:-10px; margin-top:5px; border-top:1px solid
#888;}
.menu ul li.bottomLine p {padding:0; margin:0; line-height:20px;
font-size:12px; color:#ff8000; font-weight:bold; width:100%;
padding-left:10px;}
.menu ul li.bottomLine a {display:inline; padding:0 3px; line-height:20px;
background:none; color:#ccc;}
.menu ul li.bottomLine a:hover {color:#fff;}

.menu :hover ul.sub {left:0;}
.menu :hover ul.left1 {left:-150px;}

/* for IE6 */
.menu table {border-collapse:collapse; margin-bottom:-1px;}
* html .menu ul.sub {border:0;}
* html .menu ul li.bottomLine {padding:5px 0 5px 10px;}
* html #pulldown {position:absolute;}

.wrapper {
	margin:0 auto;
	padding:20px;
	width:800px;
}