/* Colors: 
Orange:  241  93  34
Blue:  0  121  193
Green:  0 168 143
Gray:  201  202  204
Text Gray: 191  192  194
Light Gray (fill for box on coming soon and words):   239  239  240 

*/

@import "reset.css";

/* -------------------- */
/* -- Fonts -- */
/* -------------------- */

@font-face {
    font-family: 'politicaitalic';
    src: url('fonts/politica_italic-webfont.eot');
    src: url('fonts/politica_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/politica_italic-webfont.woff') format('woff'),
         url('fonts/politica_italic-webfont.ttf') format('truetype'),
         url('fonts/politica_italic-webfont.svg#politicaitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'politicabold';
    src: url('fonts/politica_bold-webfont.eot');
    src: url('fonts/politica_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/politica_bold-webfont.woff') format('woff'),
         url('fonts/politica_bold-webfont.ttf') format('truetype'),
         url('fonts/politica_bold-webfont.svg#politicabold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'politicaregular';
    src: url('fonts/politica-webfont.eot');
    src: url('fonts/politica-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/politica-webfont.woff') format('woff'),
         url('fonts/politica-webfont.ttf') format('truetype'),
         url('fonts/politica-webfont.svg#politicaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* -------------------- */
/* -- General Styles -- */
/* -------------------- */
#wrap {
	width: 1000px;
	height: 700px;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
	-moz-box-shadow: 0 0 4px #ccc;
	-webkit-box-shadow: 0 0 4px#ccc;
	box-shadow: 0 0 4px #ccc;
	background-color: #FFFFFF;
}
body {
	color: #999999;
	font-weight: normal;
	font-family: Arial, sans-serif;
	font-size: 13px;
	line-height: 20px;
	background-color: #F8F8F8;
}
h1 { font-size: 38px; margin: 0 0 10px 0; }
h2 { font-size: 34px; margin: 0 0 10px 0; }
h3 { font-size: 24px; margin: 0 0 10px 0; }
h4 { font-size: 18px; margin: 0 0 10px 0; }
h5 { font-size: 16px; margin: 0 0 5px 0; }
h6 { font-size: 14px; margin: 0 0 5px 0; }
p {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 15px;
	margin-left: 0;
}
a {
	text-decoration: none;
	color: #848688;
}
a:hover {
	color: #333333;
}
em { font-style: italic; }
ul { margin: 0 0 15px 15px; list-style-type: circle; }
ol { margin: 15px 0 15px 20px; list-style-type: decimal; }
strong, b { font-weight: bold; }
.hide { display: none; }

/* ------------ */
/* -- Layout -- */
/* ------------ */
#main {
	margin-top: 0px;
	width: 928px;
	margin-left: 36px;
	margin-right: 36px;
	height: 500px;
}
#content { float: left; width: 450px; }
#sidebar { float: right; width: 200px; margin: 0 2px 0 0; }

/* ------------ */
/* -- Header -- */
/* ------------ */
#header {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 0;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	height: 60px;
}
#header h1 { float: left; font-size: 30px; color: #555; letter-spacing: -1px; font-weight: bold; margin: 0 0 35px 0; }
#header h1 a { color: #555; }
#header h2 { float: right; font-size: 20px; color: #aaa; font-weight: normal; margin: 3px 0 0 0; }


/* -------------- */
/* -- Sidebars -- */
/* -------------- */
#sidebar img { width: 200px; border: 1px #eee solid; margin: 0 0 20px 0; }
#sidebar .project-title { display: block; margin: 0 0 2px 0; }
#sidebar h5 { font-size: 14px; margin: 0 0 15px 0; }
.contact-sidebar { background-color: #f5f5f5; padding: 20px 20px 10px 20px; border: 1px #eee solid; }
.contact-sidebar p { line-height: 18px; }



/* ------------- */
/* -- Contact -- */
/* ------------- */
#contact-form {
	clear: both;
	border: none;
	width: 300px;
	margin-top: 24px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-left: 40px;
}
#contact-form input[type=text] {
	width: 250px;
	border: 1px #eee solid;
	padding: 4px;
	color: #999999;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 15px;
	margin-left: 0;
	font-size: 12px;
}
#contact-form textarea {
	width: 250px;
	height: 150px;
	border: 1px #eee solid;
	padding: 4px;
	font-size: 12px;
	line-height: 24px;
	color: #999999;
}
#contact-form input[type=submit] { /* button css= background: url(../images/submit-button-orange.jpg) no-repeat; width: 109px; height: 38px; margin: 15px 0 0 -5px; border: none; cursor: pointer;*/
	background-color:#EFEFEF;
	display:inline-block;
	color:#666666;
	font-size:12px;
	text-decoration:none;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
	cursor:pointer;
	border: 1px solid #CCCCCC;
 }

#contact-form input[type=submit]:hover { /*button css= background: url(../images/submit-button-orange-hover.jpg) no-repeat; */
	color:#FFFFFF;
	background-color: #F15D22;
}

#response { padding: 10px; border: 1px #ddd solid; background-color: #eee; color: #9e0616; }

/* ------------ */
/* -- Footer -- */
/* ------------ */
#footer {
	clear: both;
	color: #B3B3B3;
	width: 820px;
	margin-top: 6px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-left: 180px;
	font-size: 10px;
}
#footer .twitter { float: right; }
#sub-nav {
	width: 170px;
	float: left;
}
#content {
	float: right;
	height: 500px;
	width: 783px;
	position: relative;
}
#about-contact {
	height: 80px;
	width: 170px;
	position: absolute;
	clear: both;
	margin-left: 36px;
	margin-top: 420px;
}
#home-left {
	height: 500px;
	width: 146px;
	position: absolute;
	clear: both;
	margin-left: 36px;
	margin-top: 0px;
}


/* --------- */
/* -- Nav -- */
/* --------- */
#nav {
	clear: both;
	margin: 0;
	overflow: hidden;
	padding-right: 0;
	padding-left: 36px;
	height: 88px;
	position: relative;
}
#nav li { float: left; list-style: none; }
#nav li span { padding: 0 10px; font-weight: bold; }
#nav li a { color: #555; font-weight: bold; font-size: 14px; }
#nav li a:hover { color: #FF7200; font-weight: bold; }
#nav li a.current { color: #FF7200; }




#nav-home {
	height: 88px;
	position: relative;
}
#nav-bread {
	height: 88px;
	padding-left: 128px;
}
#nav-lost {
	height: 88px;
	padding-left: 143px;
}
#nav-art {
	height: 88px;
	padding-left: 85px;
}
#nav-show {
	height: 88px;
	padding-left: 192px;
}
#nav-words {
	height: 88px;
	padding-left: 145px;
}


#nav img {
	position:absolute;
/* 
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;	
	transition: opacity .5s ease-in-out; */
	
	transition: opacity .5s ease-out;
	-webkit-transition: opacity .5s ease-out;
	-moz-transition: opacity .5s ease-out;
	-o-transition: opacity .5s ease-out;
	-ms-transition: opacity .5s ease-out;	


}

#nav img.top:hover {
	opacity:0;
}

.green {
	color: #00A88F;

}
.greenbold {
	color: #00A88F;
	font-weight: bold;
}
.orange {
	color: #F15D22;
}
.orangebold {
	color: #F15D22;
	font-weight: bold;
}
.blue {
	color: #0079C1;
}
.bluebold {
	color: #0079C1;
	font-weight: bold;
}.green {
	color: #00A88F;
}
.greenbold {
	color: #00A88F;
	font-weight: bold;
}
.trans {
	opacity: .0;
	filter: alpha(opacity=0);
}
#white {
	background-color: #FFFFFF;
	height: 88px;
	width: 100%;
	position: absolute;
	z-index: 1000;
	overflow: hidden;
	visibility: hidden;
}
.invis {
	visibility: hidden;
}
.vis {
	visibility: visible;
}
#caption-link {
	position: relative;
	float: right;
	padding-right: 34px;
}
.caption {
	background-color: #FFFFFF;
	bottom: 0px;
	position: absolute;
	font-size: 11px;
	color: #666666;
	width: 763px;
	text-align: left;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 1px;
	padding-left: 10px;
	opacity: .8;
	filter: alpha(opacity=80);
	display: block;
}
#caption-block {
	display: none;
}
/* display toggles between 'block' and 'none' */

#caption-link button {
	background-color:transparent;
	display:inline-block;
	color:#999999;
	font-size:10px;
	font-weight:normal;
	text-decoration:none;
	padding-top: 3px;
	padding-right: 2px;
	padding-bottom: 3px;
	padding-left: 2px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	cursor:pointer;
}
#caption-link button:hover {
	color:#666666;
}
.single-text-page {
	padding-right: 140px;
	padding-left: 36px;
}
#name-contact {
	height: 30px;
	width: 783px;
	margin-left: 180px;
	padding-top: 550px;
	position: absolute;
}
#name-contact {
	font-family: 'politicaregular', Arial, sans-serif;
	font-size: 16px;
	color: #333333;
	letter-spacing: 0.1em;
}
.politica-bold {
	font-family: 'politicabold', Arial, sans-serif;
}
.politica-italic {
	font-family: 'politicaitalic', Arial, sans-serif;
}
.highlight {
	color: #00aeef;
}