/**

Reset.css

**/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
body{
	line-height: 1.5;
}
caption, th, td{
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after{
	content: "";
}
blockquote, q{
	quotes: "" "";
}
a img{
	border: none;
}




/**

	Typography
	
**/

body{
	background-color: #58585a;
	color: #58585a;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 75%;
}
h1, h2, h3, h4, h5, h6{
	color: #588397;
	font-weight: normal;
}
h1{
	font-size: 3em;
	line-height: 1;
	margin-bottom: 0.5em;
}
h2{
	font-size: 2em;
	font-weight: bold;
	letter-spacing: -0.01em;
	margin-bottom: 0.75em;
}
h3{
	font-size: 1.5em;
	line-height: 1;
	margin-bottom: 1em;
	margin-top:1em;	
}
h4{
	font-size: 1.2em;
	line-height: 1.25;
	margin-bottom: 1.25em;
}
h5{
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 1.5em;
}
h6{
	font-size: 1em;
	font-weight: bold;
}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img{
	margin: 0;
}
p{
	margin: 0 0 1.5em;
}
p img.left{
	float: left;
	margin: 1.5em 1.5em 1.5em 0;
	padding: 0;
}
p img.right{
	float: right;
	margin: 1.5em 0 1.5em 1.5em;
}
a:focus, a:hover{
	color: #fc9149;
	text-decoration: underline;
}
a{
	color: #fc9149;
	text-decoration: none;
}
blockquote{
	color: #666;
	font-style: italic;
	margin: 1.5em;
}
strong{
	font-weight: bold;
}
em, dfn{
	font-style: italic;
}
dfn{
	font-weight: bold;
}
sup, sub{
	line-height: 0;
}
abbr, acronym{
	border-bottom: 1px dotted #666;
}
address{
	font-style: italic;
	margin: 0 0 1.5em;
}
del{
	color: #666;
}
pre{
	margin: 1.5em 0;
	white-space: pre;
}
pre, code, tt{
	font: 1em 'andale mono', 'lucida console', monospace;
	line-height: 1.5;
}
li ul, li ol{
	margin: 0 1.5em;
}
ul, ol{
	margin: 0 1.5em 1.5em 1.5em;
}
ul{
	list-style-type: disc;
}
ol{
	list-style-type: decimal;
}
dl{
	width: 680px;
}
dl dt{
	font-weight: bold;
	margin-top: 10px;
	border-top: 1px solid #666;
	width: 150px;
	float:left;
}
/* commented backslash hack for mac-ie5 \*/
dt { clear: both; }
/* end hack */
dd{
	margin-top: 10px;
	border-top: 1px solid #666;
	float:left;
	width: 400px;
}
caption{
	background: #eee;
}



/**

Forms

**/

label{
	font-size: 0.9em;
	font-weight: normal;
}
fieldset{
	border-width: 0;
	margin: 0 0 1.5em 0;
	padding: 1.4em;
}
legend{
	font-size: 1.2em;
	font-weight: bold;
}
input[type=text], input[type=password], input.text, input.title, textarea, select{
	background-color: #fff;
	border: 1px solid #bbb;
}
input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus{
	border-color: #666;
}
input[type=text], input[type=password], input.text, input.title, textarea, select{
	margin: 0.5em 0;
}
input[readonly="readonly"]{
	color:#777;
}
.fancy-text input:focus,
.fancy-password input:focus,
.fancy-select select:focus {
	outline: none;
}
input.text, input.title{
	padding: 5px;
	width: 300px;
}
input.title{
	font-size: 1.5em;
}
textarea{
	height: 250px;
	padding: 5px;
	width: 390px;
}
input[type=checkbox], input[type=radio], input.checkbox, input.radio{
	position: relative;
	top: .25em;
}
button{
	cursor: pointer;
	margin:3px 0;
}
.form-item label{
/* 	float: left; */
}
.fancy{
	background: url(/media/images/fancy-input.png) 0 0 no-repeat;
/*	clear: left; */
/* 	float: left; */
	height: 30px;
	padding-left: 10px;
	width: 215px;
}
.fancy input{
	background: url(/media/images/fancy-input.png) right 0 no-repeat;
	border-width: 0;
/* 	float: left; */
	font-size: 1.15em;
	height: 22px;
	margin: 0;
	padding-left: 0;
	padding-top: 7px;
	width: 215px;
}
.fancy select{
	background: url(/media/images/fancy-input.png) right 0 no-repeat;
	border-width: 0;
	font-size: 1.15em;
	height: 22px;
	margin: 0;
	padding-left: 0;
	padding-top: 4px;
	width: 215px;
}
.signup{
	padding-left: 40px;
	padding-top: 0;
}
.signup label{
	clear: left;
}
.signup .form-item{
/* 	float: left; */
	margin-bottom: 7px;
	margin-right: 25px;
}
.signup .form-item.button-wrapper{
	text-align: left;
	width: 234px;
}
.signup .form-item.button-wrapper button.submit{
	background: url(/media/images/button-blank.png) 0 0 no-repeat;
	border-width: 0;
	height: 38px;
	margin-top: 12px;
	width: 93px;
	font-size:10px;
	font-weight:bold;
	color:#58585A;
}
.form-item.button-wrapper button#submit_login{
	background: url(/media/images/button-blank.png) 0 0 no-repeat;
	border-width: 0;
	height: 38px;
	margin-top: 12px;
	width: 93px;
	font-size:10px;
	font-weight:bold;
	color:#58585A;
}
.nav .social-media{
	padding-left:50px;
	padding-top:3px;
}
.nav .social-media a{
	text-indent:0;
	background:none;
}
.nav .social-media a:hover{
	text-decoration:none;
}

.school-search{
	bottom: 13px;
	overflow: hidden;
	position: absolute;
	right: 49px;
}
.school-search .form-item { 
	float: left;
}
.school-search .fancy-text {
	width: 175px;
}
.school-search label{
	color: #fff;
	float: left;
	font-size: 2.0em;
	line-height: 1;
	margin-right: 10px;
	padding-top: 8px;
}
.school-search .fancy{
	clear: none;
	margin-right: 8px;
	margin-top: 4px;
}
.school-search .fancy input.text{
	color: #dedede;
}
.school-search .form-item button.submit{
	background: url(/media/images/button-go.png) 0 0 no-repeat;
	border-width: 0;
	height: 38px;
	margin-top: 0;
	text-indent: -8000px;
	width: 58px;
}
.school-search .fancy{
	background: url(/media/images/fancy-input-dark.png) 0 0 no-repeat;
}
.school-search .fancy input{
	background: url(/media/images/fancy-input-dark.png) right 0 no-repeat;
	font-size: 0.95em;
	width: 170px;
}
.highlight{
	background: #ff0;
}
.first{
	margin-left: 0;
	padding-left: 0;
}
.last{
	margin-right: 0;
	padding-right: 0;
}
h2 span{
	color: #fc9149;
}
/* styles -- TODO -- may break stuff * 
.form-item {
	margin: 0.5em 0;
}
.form-item-title {
	margin: 0.25em 0;
}
.form-item-field {
	margin: 0.25em 0;
}
*/

.form-item-error {
	color: #911;
}


/**

Layout

**/

html, body{
	height: 100%;
}
#header-color-bar{
	background-color: #8fc8d2;
	height: 82px;
	position: relative;
}
#header-color-bar .overlay{
	background: url(/media/images/header-overlay-texture.png) 0 0 repeat-x;
	height: 200px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
#page-wrapper{
	background: url(/media/images/page-bottom-gradient.png) 0 bottom repeat-x;
	left: 0;
	min-height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
}
#header{
	background: url(/media/images/header-clouds.png) 50% 0 no-repeat;
	height: 93px;
	margin: 0 auto;
	padding-top: 16px;
	position: relative;
	width: 986px;
	z-index: 10;
}
#header .title-wrapper{
	float: left;
	margin-left: 175px;
	padding-top: 8px;
}
#header .title-wrapper h1{
	color: #323232;
	font-size: 2.45em;
	font-weight: bold;
	letter-spacing: -0.01em;
	line-height: 1;
	margin-bottom: 1px;
}
#header .title-wrapper h2{
	color: #6b6c6c;
	font-size: 1.3em;
	font-weight: normal;
	line-height: 1;
	margin-bottom: 0;
	margin-right: 5px;
	text-align: right;
}
#header .promo-image{
	background: url(/media/images/promo-image-hat.png) 0 0 no-repeat;
	height: 106px;
	left: 37px;
	position: absolute;
	top: 6px;
	width: 129px;
}
#header .utility-nav{
	background-color: #49494b;
	color: #fff;
	font-size: 0.85em;
	line-height: 1;
	padding: 10px;
	position: absolute;
	right: 49px;
	text-transform: uppercase;
	top: 0;
	z-index: 9;
}
#header .utility-nav a{
	color: #fc9149;
}
#header .utility-nav ul{
	list-style: none;
	margin: 0;
}
#header .utility-nav ul li{
	float: left;
}
#header .utility-nav ul li.last{
	padding-left: 100px;
}
.home-page #header-color-bar{
	height: 402px;
}
.home-page #header-color-bar .overlay{
	background: url(/media/images/header-overlay-large.png) 0 0 repeat-x;
	height: 600px;
}
.home-page #header{
	background: url(/media/images/header-illustration.png) 0 0 no-repeat;
	height: 498px;
	padding-top: 0;
}
.home-page #header h1{
	background: url(/media/images/gradad-logo-large.png) 0 0 no-repeat;
	height: 270px;
	left: 0;
	margin-bottom: 0;
	position: absolute;
	text-indent: -8000px;
	top: 250px;
	width: 317px;
}
.adbuilder #content{
	background: url(/media/images/adbuilder-header.png) 0 0 no-repeat;
	padding-top: 25px;
}
.adbuilder #content-wrapper{
	background: url(/media/images/adbuilder-column-bg.png) 0 0 repeat-y;
	text-align: center;
}
.adbuilder #footer{
	background: url(/media/images/adbuilder-footer-bg.png) 0 0 no-repeat;
}
.adbuilder #content-wrapper #ad_builder{
	margin: 0 auto;
}
.content-page #header h1{
	background: url(/media/images/gradad-logo-header.png) 0 0 no-repeat;
	height: 126px;
	margin-bottom: 0;
	text-indent: -8000px;
	width: 153px;
}
.school #header-color-bar{
	background-color: #fc9149;
	height: 60px;
}
.school #header-color-bar .overlay{
	background: url(/media/images/header-overlay.png) 0 0 repeat-x;
}
.school #header{
	background-image: none;
	height: 87px;
	padding-top: 0;
}
.school #header .utility-nav{
	background-color: #6e6e6e;
	top: 60px;
}
.nav-wrapper{
	height: 68px;
	left: 0;
	position: absolute;
	top: 46px;
	width: 100%;
	z-index: 12;
}
.nav-wrapper .buffer{
	float: left;
	height: 68px;
	width: 40%;
}
.nav-wrapper .nav{
	background: url(/media/images/nav-background.png) 0 0 repeat-x;
	float: left;
	width: 60%;
}
.nav-wrapper .nav ul{
	background: url(/media/images/nav-endcap.png) 0 0 no-repeat;
	height: 57px;
	width: 700px;
	list-style: none;
	margin: 0 0 0 -20px;
	padding-left: 8px;
	padding-top: 9px;
}
.nav-wrapper .nav li{
	float: left;
}
.nav a{
	background: url(/media/images/navigation.png) 0 0 no-repeat;
	display: block;
	height: 50px;
	text-indent: -8000px;
}
.nav a.home{
	background-position: 0 0;
	width: 73px;
}
.nav a:hover.home, .nav a.home.selected{
	background-position: 0 -50px;
}
.nav a.learn-more{
	background-position: -73px 0;
	width: 121px;
}
.nav a:hover.learn-more, .nav a.learn-more.selected{
	background-position: -73px -50px;
}
.nav a.examples{
	background-position: -194px 0;
	width: 104px;
}
.nav a:hover.examples, .nav a.examples.selected{
	background-position: -194px -50px;
}
.nav a.contact{
	background-position: -298px 0;
	width: 95px;
}
.nav a:hover.contact, .nav a.contact.selected{
	background-position: -298px -50px;
}

.nav a.yearbook-advisors {
	background-position: -393px 0;
	width: 180px;
}

.nav a:hover.yearbook-advisors, .nav a.yearbook-advisors.selected {
	background-position: -393px -50px;
}

.home-page .nav-wrapper{
	top: 366px;
}
#content-wrapper{
	background: url(/media/images/content-column-bg.png) 0 0 repeat-y;
	margin: 0 auto;
	position: relative;
	width: 986px;
}
#content{
	background: url(/media/images/content-header.png) 0 0 no-repeat;
	min-height: 349px;
	padding-top: 70px;
	position: relative;
}
#main-callout{
	background: url(/media/images/submission-deadline.png) 0 0 no-repeat;
	height: 119px;
	left: -8px;
	position: absolute;
	top: -8px;
	width: 263px;
	z-index: 5;
}
#main-callout h2{
	color: #fff;
	font-weight: normal;
	line-height: 1;
	margin: 62px 18px 0;
	text-align: center;
}
#main-callout h2 span{
	display:block;
	color: #fff;
	font-weight:bold;
	font-size:14px;
}
.home-page #main-callout{
	background: url(/media/images/pinned-note.png) 0 0 no-repeat;
	height: 290px;
	left: -45px;
	text-indent: -8000px;
	top: -18px;
	width: 317px;
}
.column-wrapper{
	overflow: hidden;
}
.column-one{
	float: left;
	margin-left: 32px;
	margin-right: 40px;
	padding-top: 65px;
	width: 192px;
}
.column-two{
	/* margin-left: 257px; */
	float:left;
	width: 671px;
}
.column-one.examples h2, .column-one.easy-steps h2{
	color: #58585a;
	font-size: 1.75em;
	line-height: 1;
	margin-bottom: 10px;
}
.column-one.examples p{
	font-size: 0.85em;
}
.column-one.examples .section{
	overflow: hidden;
}
.column-one.easy-steps h2{
	margin-bottom: 35px;
}
.column-one.easy-steps h3{
	color: #58585a;
	font-size: 1.05em;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 10px;
}
.column-one.easy-steps p{
	font-size: 0.90em;
}
.column-one.easy-steps{
	padding-top: 180px;
}
.column-one.default-sidebar{
	padding-top: 0;
}
.steps{
	margin-bottom: 35px;
}
.steps dl{
	float: left;
	margin-bottom: 0;
	margin-right: 15px;
	width: 185px;
}
.steps dl dt{
	color: #588397;
	font-size: 1.5em;
}
.steps dl dd{
	font-size: 1.20em;
	font-weight: bold;
	margin-left: 0;
}
.steps dl dd.description{
	margin-bottom: 10px;
}
.steps dl.last{
	margin-right: 0;
}
#footer{
	background: url(/media/images/content-footer-bg.png) 0 0 no-repeat;
	margin: 0 auto;
	overflow: hidden;
	padding: 25px 0;
	width: 986px;
}
#footer p{
	color: #aaaaaf;
	margin-bottom: 0;
}
#footer .copyright{
	float: left;
	font-size: 0.9em;
	padding-left: 12px;
	padding-top: 8px;
}
#footer .branding{
	background: url(/media/images/gradad-logo-small.png) 0 0 no-repeat;
	float: right;
	height: 22px;
	padding-right: 12px;
	text-indent: -8000px;
	width: 118px;
}

/***

Misc.

*/

.report-issue {
	display:none;
	position:absolute;
	top:25px;
	right:25px;
}

.security-code {
	margin-left:50px;
}
.notice-text a {
	color:#0000ff;
}
.register-container {
	float:left;
}
.register-container h3 {
	padding-left:40px;
}
.login-container {
	float:left;
}
ul.school-navigation {
	list-style:none;
	margin-left:-15px;
	padding:0;
}
.school-navigation li a {
	padding:5px;
	background-color:#EFEFEF;
	width:200px;
	display:block;
	color:#000;
	font-size:14px;
	text-decoration:underline;
	
}
.school-navigation li.first a {
	border-top:1px solid #C3C3C3;
}
.school-navigation li a:hover {
	background-color:#C3C3C3;
}
.school-navigation li.active a {
	background: #B3B3B3;
}

.column-two a, .adbuilder #content a {
	color:#0000FF;
	text-decoration:underline;
}

.home-page .column-two {
	font-size:14px;
	color:#000;
}
/* for a grayed out */
span.disabled{
	color:#888;
}

/* For share form */
#ads_list .checkbox-group .form-item-unit {
	float:left;
	border: 1px solid #000;
	margin: 5px;
}
#ads_list .checkbox-group .form-item-unit input{
	position:relative;
	top: -40px;
}
#ads_list .checkbox-group .form-item-unit div{
	display:block;
	text-align:center;
	margin:0px auto;
}

#ads_list span{
	display:block;
}

#submit-button, #submit-button button{
	clear:both;
	display:block;
}


.ad_container{
	float:left;
	width: 200px;
	height: 180px;
	margin:5px; padding:5px;
	background: #DDD;
}
.ad_container h4{
	text-align:center;
}
.ad_container label{
	text-align:left;
}
.ad_container .form-item{
	margin:0px auto;
}
.ad_container .form-item .form-item-field,
.ad_container .form-item .form-messages{
	margin: 0px auto;
	text-align: center;
}
.ad_container .info{
	text-align:center;
}
.ad_container .info img{
	margin: 0 auto;
}

.thumbnail_container{
	float:left;
	width: 100px;
	height: 100px;
	margin:5px; padding:5px;
	background: #DDD;
}
.thumbnail_container .info {
	text-align:center;
}
.thumbnail_container .info .img {
	margin:0 auto;
}

.clear {
	clear:both;
}

ol.comment_list {
	list-style: none;
	margin: 0px;
}
ol.comment_list li{
	padding:5px;
	margin:5px 0px;
	border:1px solid #999;
	background: #EEE;
}
ol.comment_list h4 {
	border-bottom: 2px solid #666;
	margin-bottom: 2px;
}
dl.ticket_details {
	width: 680px;
}

dl.ticket_details dt{
	font-weight: bold;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #666;
	width: 150px;
	float:left;
}
/* commented backslash hack for mac-ie5 \*/
dl.ticket_details dt { clear: both; }
/* end hack */
dl.ticket_details dd{
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #666;
	float:left;
	width: 525px;
}

form #student_names .ad {
	float:left;
	margin: 5px;
}
form #student_names {
	border:1px solid #DDD;
	padding:5px;
	background: #EEE
}

#report-issue-form {
	display:none;
}

div.school_guest_ads {
	float:left;
	width: 180px;
	margin-left: 10px;
}
div.sidebar_ads {
	width: 185px;
}