﻿
/************************************************************************************
 @RESET
*************************************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { border:0; outline:0; vertical-align:baseline; }

article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary, mark { display:block; }
body { line-height:1; }
blockquote, q { quotes:'“' '”'; font-size:1em; font-style:italic; }
cite { display:block; font-weight:bold; font-style:normal; font-size:1em; margin-top:20px; }

ins { text-decoration:none; }
del { text-decoration:line-through; }

table {	border-collapse:collapse;	border-spacing:0; }


/************************************************************************************
 @GLOBAL
*************************************************************************************/

/* 
BASIC
================================== */
a,
.yellow { color:#B98C00; }
a { color:#B98C00; text-decoration:none; }
a:hover {  }
p {  }
img { max-width:100%; }

hr { display:block; height:1px; border:0; border-top:1px solid #DDD; margin:15px 0; padding:0; }
hr + h2, 
hr + h3 { margin-top:15px; }
blockquote { font-size:1.2em; font-style:italic; }

/* 
HEADINGS
================================== */
h1, h2, h3, h4, h5, h6 {  }
h1, h2, h3 {  }
h4, h5, h6 {  }
h1 { font-size:3.6em; font-weight:400; margin:5px 0 25px; color:#444; }
h2 { font-size:2.3em; font-weight:300; margin:25px 0 10px; }
h3 { font-size:1.4em; font-weight:600; text-transform:uppercase; margin:18px 0 8px; }
h4 {  }
h5 {  }
h6 {  }

h1 + h2,
h1 + h3,
h1 + h4 { margin-top:32px; }

h2 + h3 { margin-top:24px; }

h2 + p,
h3 + p,
h4 + p { margin-top:0; }
         
h1 em,
h2 em,
h3 em { display:block; margin-top:7px; font-size:13px; font-weight:normal; }

/* 
FORMS
================================== */
form input[type="text"],
textarea { padding:6px; border:1px solid #DDD; border-radius:1px; }
form input[type="text"] { width:95.5%; }
form textarea { width:98%; }
form .error-message { margin-top: 15px; color: #dc3545 !important;  }


/************************************************************************************
 @STRUCTURE
*************************************************************************************/
/* 
SHARED
================================== */
form { min-height:100%; position:relative; }

#header .logo,
#footer .logo,
#footer .steps-logo { background:url('/img/logos.png') no-repeat; display:block; text-indent:-9999em; outline:none; }

#masthead,
#content { padding:22px 0; }

#masthead .highlight-boxes a.box,
.btn.btn-b { background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f0f0f0 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f0f0f0 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#f0f0f0 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */ }

#masthead .highlight-boxes a.box:hover,
.btn.btn-b:hover { background: #f9f9f9; /* Old browsers */ background: -moz-linear-gradient(top, #f9f9f9 0%, #eeeeee 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f9f9f9 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f9f9f9 0%,#eeeeee 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f9f9f9 0%,#eeeeee 100%); /* IE10+ */ background: linear-gradient(top, #f9f9f9 0%,#eeeeee 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ }

/* 
HTML & BODY
================================== */
html, body { height:100%; margin:0; padding:0; }
body { font:62.5%/170% 'Open Sans', Arial, sans-serif; color:#666; }

/* 
WRAPPER
================================== */
.wrapper { width:960px; margin:0 auto; position:relative; }

/* 
HEADER
================================== */
#header { height:148px; border-top:2px solid #D1A200; background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* IE10+ */ background: linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ }
#header .logo,
#header .slogan,
#header .st-jude,
#header .make-a-wish { position:absolute; }
#header .logo { background-position:left top; height:123px; width:200px; left:0; top:8px; }
#header .slogan { left:303px; top:38px; font-size:2.2em; font-weight:300; font-style:italic; color:#999; text-align:center; line-height:1.25; }
#header a.st-jude { background:url('/img/st-jude.png') center top no-repeat; display:block; padding-top:62px; width:130px; right:0; top:24px; color:#A30234; line-height:normal; text-align:center; font-style:italic; } 
#header a.st-jude:hover { color:#999; }
#header a.make-a-wish { display:inline-block; padding-top:62px; width:130px; right: 146px; top: -46px; color:#006cb7; line-height:normal; text-align:center; font-style:italic; } 
#header a.make-a-wish:hover { color:#999; }

/* 
TOPNAV
================================== */
#topnav { background: #666666; /* Old browsers */ background: -moz-linear-gradient(top, #666666 0%, #555555 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#555555)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #666666 0%,#555555 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #666666 0%,#555555 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #666666 0%,#555555 100%); /* IE10+ */ background: linear-gradient(top, #666666 0%,#555555 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#555555',GradientType=0 ); /* IE6-9 */ border-bottom:2px solid #D1A200; }
#topnav ul { list-style-type:none; margin:0; padding:0; }
#topnav ul li { float:left; }
#topnav ul li a { display:block; padding:10px 30px; font:13px Arial, Helvetica, sans-serif; text-transform:uppercase; text-align:center; color:#FFF; }
#topnav ul li a:hover { background:url('/img/nav-triangle.png') center top no-repeat; }

/* 
CONTENT
================================== */
#content { padding-bottom:189px; }
#content .values { border-top:1px solid #D1A200; border-bottom:1px solid #D1A200; margin:15px 0; padding:10px 0; text-align:center; }
#content .values .value { display:inline-block; padding:0 10px; font-size:1.6em; font-weight:300; text-transform:uppercase; }

#content .col.w5.sidebar { padding-top:30px; }
#content .col.w5.sidebar ul { padding-left:19px; }

#content p,
#content ul,
#content ol { font-size:1.2em; }

/* 
FOOTER
================================== */
#footer { width:100%; position:absolute; bottom:0; border-top:1px solid #555; background: #666666; /* Old browsers */ background: -moz-linear-gradient(top, #666666 0%, #555555 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#555555)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #666666 0%,#555555 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #666666 0%,#555555 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #666666 0%,#555555 100%); /* IE10+ */ background: linear-gradient(top, #666666 0%,#555555 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#555555',GradientType=0 ); /* IE6-9 */ }
#footer .wrapper,
#footer .wrapper a { color:#FFF; }
#footer .wrapper { padding:40px 0; font-size:1.2em; }
#footer .wrapper .logo,
#footer .wrapper .nav { float:left; }
#footer .wrapper .steps-logo,
#footer .wrapper .nav ul { margin-top:17px; }
#footer .wrapper .logo { background-position:left -123px; height:77px; width:127px; padding-right:15px; border-right:1px solid #C8C8C8; }
#footer .wrapper .nav { margin-left:15px; }
#footer .wrapper .nav ul { list-style-type:none; margin-bottom:5px; padding:0; }
#footer .wrapper .nav ul li { float:left; padding:0 5px; border-left:1px solid #FFF; }
#footer .wrapper .nav ul li:first-child { padding-left:0; border-left:none; }
#footer .wrapper .nav ul li a:hover { text-decoration:underline; } 
#footer .wrapper a.steps-logo { float:right; background-position:left -200px; height:29px; width:88px; margin-top:7px; }
#footer .wrapper a.steps-logo:hover { background-position:-88px -200px; }


/************************************************************************************
 @PAGES
*************************************************************************************/

/* 
HOME
================================== */
#masthead { background:url('/img/light-mesh.png') center top repeat #D6D6D6; border-bottom:1px solid #DFDFDF; }
#masthead .slider,
#masthead .slider img,
#masthead .slider .slide { height:368px; width:958px; }
#masthead .slider img,
#masthead .slider .slide { position:absolute; display:block; }
#masthead .slider { border:1px solid #999; position:relative; }

#masthead .highlight-boxes a.box { height:71px; padding:20px 20px 20px 120px; display:block; position:relative; color:#666; font-size:1.2em; border:1px solid #CCC; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f0f0f0 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f0f0f0 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#f0f0f0 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */ }
#masthead .highlight-boxes a.box + .box { margin-top:16px; }
#masthead .highlight-boxes a.box .title { display:block; font-size:1.5em; margin-bottom:14px; white-space:nowrap; }
#masthead .highlight-boxes a.box .icon { background:url('/img/icons.png') no-repeat; position:absolute; top:15px; display:block; }
#masthead .highlight-boxes a.box.one .icon { background-position:left top; height:74px; width:88px; left:15px; }
#masthead .highlight-boxes a.box.two .icon { background-position:-88px top; height:68px; width:83px; left:15px; }
#masthead .highlight-boxes a.box.three .icon { background-position:-171px top; height:71px; width:99px; left:6px; }

#content.home h1 { margin-top:0; font-size:2.4em; color:#666; }
#content.home .col.w11 .main { background:url('/img/bucket.jpg') center center no-repeat; padding-right:50px; color:#111; }


/************************************************************************************
 @COLS
*************************************************************************************/
.colgroup,
.col { display:block; float:left; } 
.col + .col { margin-left:16px; } 
.w1 { width:45px; }
.w2 { width:106px; }
.w3 { width:167px; }
.w4 { width:228px; }
.w5 { width:289px; }
.w5-5 { width:319.5px; }
.w6 { width:350px; }
.w7 { width:411px; }
.w8 { width:472px; }
.w9 { width:533px; }
.w10 { width:594px; }
.w11 { width:655px; }
.w12 { width:716px; }
.w13 { width:777px; }
.w14 { width:838px; }
.w15 { width:899px; }
.w16 { width:960px; }

.col h2:first-child,
.col h3:first-child,
.col h4:first-child,
.col .btn:first-child { margin-top:0; }

.col p:last-child,
.col ul:last-child,
.col ol:last-child { margin-bottom:0; }


/************************************************************************************
 @BUTTONS
*************************************************************************************/

.btn { display:inline-block; position:relative; padding:6px 10px; font:11px/16px Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-transform:uppercase; outline:none; cursor:pointer; }

.btn.btn-a { color:#FFF; border:1px solid #0E618D; background: #148ac9; /* Old browsers */ background: -moz-linear-gradient(top, #148ac9 0%, #106b9e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#148ac9), color-stop(100%,#106b9e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #148ac9 0%,#106b9e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #148ac9 0%,#106b9e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #148ac9 0%,#106b9e 100%); /* IE10+ */ background: linear-gradient(top, #148ac9 0%,#106b9e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#148ac9', endColorstr='#106b9e',GradientType=0 ); /* IE6-9 */ }
.btn.btn-b { color:#666; border:1px solid #D6D6D6; }
.btn.btn-c { color:#666; background:#EAEAEA; border:1px solid #DFDFDF; }

.btn.btn-a:hover { background: #117ab3; /* Old browsers */ background: -moz-linear-gradient(top, #117ab3 0%, #0d557b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#117ab3), color-stop(100%,#0d557b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #117ab3 0%,#0d557b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #117ab3 0%,#0d557b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #117ab3 0%,#0d557b 100%); /* IE10+ */ background: linear-gradient(top, #117ab3 0%,#0d557b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#117ab3', endColorstr='#0d557b',GradientType=0 ); /* IE6-9 */ }
.btn.btn-b:hover { color:#333; }
.btn.btn-c:hover { color:#333; background:#E6E6E6; }

.btn .icon { background:url('/img/icons.png') no-repeat; height:16px; width:16px; float:right; margin:0 0 0 10px; }
.btn .icon.left { float:left; margin:0 10px 0 0; }

.btn.arrow-right.btn-a .icon { background-position:-238px -71px; }
.btn.arrow-right.btn-b .icon, 
.btn.arrow-right.btn-c .icon { background-position:-254px -71px; }

.btn.pdf { padding-left:50px; margin-bottom:12px; text-align:left; }
.btn.pdf .icon.left { background-position:left -74px; height:49px; width:42px; position:absolute; left:-4px; top:-9px; }
.btn.pdf + .btn.pdf { margin-top:24px; }

.btn.pill { padding-top:4px; padding-bottom:7px; -webkit-border-radius:50em; -moz-border-radius:50em; border-radius:50em; }
.btn.big { font-size:1.4em; }
.btn.full { display:block; }

.btn.w1 { width:80px; }
.btn.w2 { width:120px; }
.btn.w3 { width:160px; }


/************************************************************************************
 @UTILITY
*************************************************************************************/

/* 
BASIC
================================== */
.em { font-style:italic; }
.b { font-weight:bold; }
.small { font-size:80%; }

/* 
ALIGNMENT
================================== */
.fleft { float:left; }
.fright { float:right; }
.tleft { text-align:left; }
.tright { text-align:right; }
.tcenter { text-align:center; }
.center { display:block; margin-left:auto; margin-right:auto; }
.block { display:block; }
.border { border:1px solid #DDD; }

/* 
SPACING
================================== */
.vpadded { padding-top:20px; padding-bottom:20px; }
.hpadded { padding-left:20px; padding-right:20px; }
.padded { padding:20px; }
.vspaced { margin-top:20px; margin-bottom:20px; }
.hspaced { margin-left:20px; margin-right:20px; }
.spaced { margin:20px; }
.nomar-top { margin-top:0 !important; }
img.border { border:1px solid #DDD; padding:1px; }

/* 
HIDDEN
================================== */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }

/* 
CLEAR
================================== */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.clear { clear:both; }
