/* -------------------------------------------------------------------------------------------------- 
File:		Screen Styles
Barista:   	Andy Coffey | andy@pollenizer.com
Born:     	November 2010
Respect: 	http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
			http://code.google.com/p/blueprintcss/
-------------------------------------------------------------------------------------------------
IMPORT Reset & Layout: 
-------------------------------------------------------------------------------------------------- */
@import url(layout.css);

/* -------------------------------------------------------------------------------------------------
TYPOGRAPHY: Browser default: 12px = 1.2em
-------------------------------------------------------------------------------------------------- */
/* Headings */
h1,h2,h3,h4,h5,h6 {font-family:Arial,Helvetica,sans-serif;font-weight:bold;margin:0;letter-spacing:-0.03em}
h1 {font-size:3em;line-height:1.2}
h2 {font-size:2em;line-height:1.3}
h3 {font-size:1.8em;line-height:1.2}
h4 {font-size:1.4em}
h5 {font-size:1em}
h6 {font-size:.9em}
cite {display:block;font-style:normal;font-size:11px;color:#666;border-bottom:1px solid #ddd;padding:5px 0;margin:0 0 10px 0}

/* 
-------------------------------------------------------------------------------------------------
DESIGN
-------------------------------------------------------------------------------------------------- */
html {background:#fff url(img/html.gif) repeat center top}
body {background:transparent url(img/sunshine.png) no-repeat 5% 15%;height:100%;overflow: scroll}
#wrap {padding-bottom:60px;min-height:100%}

/* Header
-------------------------------------------------------------- */
header {background:transparent url(img/header.png) repeat-x 0 0}
	#title h1 {height:95px;width:95px;margin:0 0 0 10px;float:left}
	#title h1 a {display:block;height:95px;width:95px;text-indent:-9000px;background:transparent url(img/logo.png) no-repeat 0 0}
	header ul li {list-style-type:none}
	header ul li a {color:#fff}
.menu {display:block;cursor:pointer;position:relative}
	.menu strong {visibility:hidden}
	.menu:target .sub-menu {display:inline-block;position:absolute;top:15px;left:1px;-moz-border-radius:0 5px 5px 5px;-webkit-border-radius:0 5px 5px 5px;border-radius:0 5px 5px 5px;width:150px}
	.sub-menu {display:none;padding:10px 10px;margin-top:10px;-webkit-box-shadow:0 5px 15px rgba(0,0,0, 0.25);-moz-box-shadow:0 5px 15px rgba(0,0,0, 0.25);box-shadow:0 5px 5px rgba(0,0,0, 0.25);background:#037fc4}
	.sub-menu li {list-style-type: none;display:block;font-size:14px;padding:0;height:20px;text-shadow:#000 0 1px 0}
	.sub-menu li:hover {}
#browser {display:block;width:100px;min-height:50px;background:transparent url(img/icons.png) no-repeat 0 -50px;float:left;margin:6px 0 0 10px}
	#browser:target {background-position:-100px -50px}	
	#user {width:200px;position:absolute;top:5px;right:20px;left:auto}
	#user h2 {font-size:12px;color:#999;text-align:left;padding:2px 50px 0 0;line-height:1.1;text-shadow:#333 0 1px 0}
	#user h2 em {font-style:normal;font-size:11px;color:#ccc;display:block}
	#user a {display:block;text-indent:-9000px;overflow:hidden;height:35px;width:35px;background:transparent url(img/icons.png) no-repeat 0 0;position:absolute;top:0;right:0} 
	
/* Carousel
-------------------------------------------------------------- */
#carouselwrap {width:80%;height:520px;position:relative;overflow:hidden;margin:0 auto;z-index:100}
	#carouselwrap li {width:724px;float:left;display:block;margin:0}
	#carouselwrap section {width:724px;margin:0;padding:10px 0;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;height:480px;background:rgba(0, 0, 0, 0.3)}
	#carousel {width:9999px}
	
	#next {text-decoration:none;position:absolute;top:430px;left:380px;background:#419af5;background:-moz-linear-gradient(0% 100% 90deg, #59a0ed, #87bdf7);background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#87bdf7), to(#59a0ed));color:#00446e;border:0;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);font-family:helvetica, arial,sans-serif;font-size:18px;font-weight:bold;padding:6px 0;text-align:center;width:150px;cursor:pointer;margin:10px auto !important;z-index:1000}
	#prev {display:none}
	
	/* #prev,#next {display:block;height:100%;width:90px;text-indent:-9000px;overflow:hidden;position:absolute;top:0;z-index:100;background:none}
	#prev {left:0;background:transparent url(img/previous.png) no-repeat left center}
	#next {right:0;background:transparent url(img/next.png) no-repeat left center} */
	
	#carouselwrap section.thankyou {background:transparent url(img/thankyou.jpg) no-repeat 0 0}
	/* Form */
	.form fieldset {background:#fff;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin:10px;padding:0;height:428px}
	.form .formset {position:relative;list-style-type:none;padding:7px 0;margin:0;min-height:34px;overflow:hidden;border-bottom:1px solid #ddd;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff),to(#f3f3f3));background:-moz-linear-gradient(0% 100% 90deg, #f3f3f3, #fff);}
	.form .formset:first-child {-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0}
	.form .formset .label {display:block;width:20%;float:left;margin:10px 5% 0 0;font-size:1.2em;text-align:right;font-weight:bold;color:#006db7;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);}
	.form .formset em {font-weight:normal;font-style:normal;color:#999;font-size:11px;padding:0 0 0 5px}
	.form .formset input,.form .formset select,.form .formset textarea {width:62%;float:left;border:1px solid #ddd;padding:7px;font-size:1.2em;background:#fff;outline:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
	.form .formset select {background:#fff;width:65%}
	.form .formset textarea {height:120px}
	.form .formset.formCheck input {width:auto;float:none}
	.form .formset.formCheck label {display:inline}
	.form .formset.formMultiple input {width:75px;margin:0 4px 0 0}	
	.form .formset.formButton {text-align:center}
	.form .formset.formButton input {background:none}	
	.formGroup {display:inline-block;margin:7px 0;font-size:1.2em}                 													
	.formGroup label {padding-right:10px}	
	.form .formButton input.button {display:inline-block;float:none;background:#419af5;background:-moz-linear-gradient(0% 100% 90deg, #10ad53, #37d279);background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#37d279), to(#10ad53));color:#003a2d;border:0;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);font-family:helvetica, arial,sans-serif;font-size:18px;font-weight:bold;padding:10px 0;text-align:center;width:40% !important;cursor:pointer;margin:10px auto !important}
	.form .formButton input.button:hover {background:#f17d00;background:-moz-linear-gradient(0% 100% 90deg, #fe9f39, #f17d00);background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fe9f39), to(#f17d00));box-shadow: inset 0 1px 0 0 #fda546;-moz-box-shadow: inset 0 1px 0 0 #fda546;-webkit-box-shadow: inset 0 1px 0 0 #fda546;color:#fff;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5)}
	.form .formset .info {display:block;height:35px;width:35px;text-indent:-9000px;overflow:hidden;background:transparent url(img/icons.png) no-repeat 0 -150px;position:absolute;top:10px;right:15px}
	
	/* Errors */
	.form .formset.error {position:relative;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff3c3c),to(#f00));background:-moz-linear-gradient(0% 100% 90deg, #f00, #ff3c3c);border-color:#c60000;padding-bottom:3px}
	.form .formset.error input,.form .formset.error select,.form .formset.error textarea {border-color:#c60000}
	.form .formset.error label {color:#fff;text-shadow:#333 0 1px 0}
	.form .formset.error em {display:block;text-align:center;clear:both;color:#fff;font-size:12px}
	.form .formset.error .info {background-position:0 -250px}
	/* Check */
	.form .formset.confirm {position:relative;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9f1b),to(#ff7200));background:-moz-linear-gradient(0% 100% 90deg, #ff7200, #ff9f1b);border-color:#cc5600;padding-bottom:3px}
	.form .formset.confirm input,.form .formset.confirm select,.form .formset.confirm textarea {border-color:#cc5600}
	.form .formset.confirm label {color:#fff;text-shadow:#333 0 1px 0}
	.form .formset.confirm em {display:block;text-align:center;clear:both;color:#fff;font-size:12px}
	.form .formset.confirm .info {background-position:0 -250px}
	
	/* Indicators */
	#navigation {width:100%;overflow:hidden;position:absolute;bottom:0;left:0;padding:10px 0;text-align:center;z-index:90;}
	ul#indicators {display:inline-block}
	ul#indicators li {display:block;width:53px;height:53px;float:left;margin:0 5px 0 0;}
	ul#indicators li a {display:inline-block;height:53px;width:53px;float:left;background:transparent url(img/indicators.png) no-repeat 0 0;margin:0;text-align:center}	
	ul#indicators li.active a {background-position:-100px 0}
	ul#indicators li a:hover {background-position:-100px 0}
	ul#indicators li.active a:hover {background-position:-100px 0}
	
	.lightbox {z-index:100;position:absolute;top:100px;padding:20px;left:100px;width:500px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 5px 15px rgba(0,0,0, 0.25);-moz-box-shadow:0 5px 15px rgba(0,0,0, 0.25);box-shadow:0 5px 5px rgba(0,0,0, 0.25);background:rgba(0,0,0, 0.75)}
	.lightbox {text-align:center;font-size:16px;font-weight:bold;color:#fff}

/* Content Styles
-------------------------------------------------------------- */
/* Headings */
#content h1 {color:#fff;text-shadow:#000 0 1px 0;font-size:3em;text-align:center}
#content header {height:auto;width:auto;margin:0 0 10px 0;border-bottom:4px solid #ddd}
#sidebar header {margin:0}

/* Footer
-------------------------------------------------------------- */
footer {position:absolute;width:100%;height:70px;bottom:0;left:0;padding:0;background:transparent url(img/80.png) repeat 0 0;border-top:1px solid #78ade7;text-align:center}
footer nav ul {width:420px;height:100px;margin:10px auto;overflow:hidden}

/* -------------------------------------------------------------------------------------------------
DEVICE SPECIFIC:
-------------------------------------------------------------------------------------------------- */
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.form p input,.form p select,.form p textarea {padding:10px}
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation:landscape) {
#wrap {max-width:1024px}
#contentwrap {width:944px}
footer nav {width:744px}
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation:portrait) {
#wrap {max-width:768px}
#contentwrap {width:768px}
footer nav {width:768px}
#carouselwrap {height:760px}
#carouselwrap li {width:590px}
#carouselwrap section {width:590px;height:700px}
.form fieldset {height:645px}
.button { margin:20px 20px}
}

/* Wide Screen Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
#contentwrap {}
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
#contentwrap {width:100%}
}