/*
Theme Name: Tallwood Band
Description: Purple theme with a modern feel for TallwoodBand.com
Version: 2.0
Author: Ben Carr
Author URI: http://www.bencarr.net/
*/

/* -------------------------------------------------- */
/* STRUCTURE
/* -------------------------------------------------- */
body { background: #270035 url(i/bg.jpg) fixed no-repeat top center; font: normal 13px 'Trebuchet MS', Helvetica, Arial, sans-serif; color: #333; -webkit-text-size-adjust: none; }
#header { margin: 0 auto; height: 150px; position: relative; width: 920px; background: url(i/headerbg.png) no-repeat; }
#logo { display: block; position: absolute; width: 533px; height: 75px; top: 30px; left: 0; text-decoration: none; }
#container { padding: 0 10px; background: url(i/containerbg.png) repeat-y; }
#content { background: #EEE; overflow: hidden; padding-bottom: 10px; }

/* -------------------------------------------------- */
/* TYPOGRAPHY
/* -------------------------------------------------- */

/* Headings */
h1 { font-size: 28px; margin: 12px 0 24px; color: #000; font-weight: bold; }
h2 { font-size: 20px; margin: 6px 0 12px; color: #000; font-weight: bold; }
h3 { font-size: 16px; margin: 18px 0 6px; text-transform: uppercase; letter-spacing: 3px; font-weight: bold; color: #000; }

/* Copy */
p { line-height: 150%; margin: 10px 0 20px; }	
small { font-size: 10px; }
.serif, #pagesubtitle, .pullquote, h2 { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: normal; }
.sans, #results { font-family: Arial, sans-serif; }

/* Colors */
.purple { color: #410057; }
.gold { color: #FC0; }
.black { color: #000; }
.white { color: #FFF; }

strong { font-weight: bolder; }
em { font-style: italic; }
hr { clear: both; border: 0; border-bottom: 1px dashed #CCC; padding-top: 25px; margin-bottom: 25px; }
blockquote { display: block; position: relative; }
.pullquote { float: left; margin: 10px 10px 10px 0; width: 200px; line-height: 140%; }
.pullquote * { line-height: 120%; font-style: italic; font-weight: normal; font-size: 30px; }

/* Links */
a { color: #410057; position: relative; }
a:hover, a:focus { color: #660090; }
a:active { top: 1px; }

#pagetitle { background: #222 url(i/gradients.png) repeat-x bottom; color: #FFF; font-size: 30px; text-transform: uppercase; font-weight: bold; padding: 5px 10px; margin-bottom: 10px; }
#pagesubtitle { color: #555; font-size: 20px; text-transform: none; margin-left: 5px; }
#pagetitle .button { margin-top: 5px; background-position: 0 0; color: #000; }
#pagetitle .button:hover { background-position: 0 -35px; }

/* Lists */
.listhead { font-weight: bold; font-size: 15px; }
ul { list-style: disc; padding-left: 40px; }
ol { list-style: decimal; padding-left: 40px; }
li { margin-bottom: 5px; }

.highlight { background: #FC0; }

/* -------------------------------------------------- */
/* IMAGES & ALIGNMENT
/* -------------------------------------------------- */
p img, img { max-width: 100%; height: auto; }
.alignright { float: right; margin: 0 0 5px 15px; }
.alignleft { float: left; margin: 0 15px 5px 0; }
.aligncenter { margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.right { text-align: right; }
.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #eee; padding: 5px; }
p.wp-caption-text { font-size: 11px; line-height: normal; margin: 0; }

.margin0 { margin: 0 !important; }
.color888 { color: #888 !important; }
.color410057 { color: #410057 !important; }
.colorFFF { color: #FFF !important; }
.color000 { color: #000 !important; }

/* -------------------------------------------------- */
/* FORMS
/* -------------------------------------------------- */
label { display: block; font-weight: bold; padding: 3px 0; }
input, textarea { background: #FFF; font-size: 12px; border: 1px solid #CCC; padding: 2px; }
input:hover, textarea:hover, input:focus, textarea:focus { border-color: #888; -webkit-transition: 0.3s linear; }
input[type="submit"]:hover { -webkit-transition: none; }
label { color: #410057; display: block; }
label.error { background: #900; color: #FFF; text-align: center; font-size: 12px; padding: 3px 0; }
input.error, textarea.error, select.error { background: #966; color: #FFF; }
button, input[type="submit"], .button { display: inline-block; clear: both; margin: 10px 0; text-decoration: none; background: #410057 url(i/gradients.png) 0 -70px; padding: 4px 20px; color: #FFF; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border: 1px solid #270035; font-size: 13px; cursor: pointer; }
button:hover, input[type="submit"]:hover, .button:hover { background-color: #FC0; background-position: 0 -35px; color: #000; border-color: #CA0; }
.field { padding-bottom: 10px; }

/* -------------------------------------------------- */
/* MENU and NAVBAR
/* -------------------------------------------------- */
#nav { background: #DDD url(i/gradients.png) repeat-x; height: 35px; border-bottom: 1px solid #BBB; list-style: none; margin: 0; padding: 0; }
#nav li { float: left; position: relative; background: #DDD url(i/gradients.png) repeat-x; border-right: 1px solid #CCC; border-bottom: 1px solid #BBB; margin: 0; }
#nav a { display: inline-block; position: relative; line-height: 15px; padding: 10px 15px; font-weight: bold; color: #000; text-decoration: none; }
#nav ul { position: absolute; top: -999em; width: 10em; list-style: none; padding: 0; margin: 0; z-index: 9999; }
#nav ul li { background: #DDD; border-bottom: 1px dotted #CCC; }
#nav ul a { display: block; padding: 4px 5px; font-weight: normal; white-space: nowrap; }
#nav li:hover, #nav li.nav-hover { background-position: 0 -35px; -webkit-transition: background 0.2s linear; }
#nav ul li:hover, #nav ul li.nav-hover { background: #FC0; -webkit-transition: background 0.2s linear; }
#nav ul ul li { background: #CCC; }
#nav li:hover ul, #nav li.nav-hover ul { left: 0; top: 36px; z-index: 99; }
#nav li:hover ul ul, #nav li.nav-hover ul ul, #nav ul li:hover li ul, #nav ul li.nav-hover li ul { top: -999em; }
#nav ul li:hover ul, #nav ul li.nav-hover ul, #nav ul ul li:hover ul, #nav ul li li.nav-hover ul { left: 10em; top: 0; }
.sf-sub-indicator { position: absolute; display: none; right: 5px; top: 1px; width: 10px; height: 10px; color: #777; }
#nav ul .sf-sub-indicator { display: block; font-size: 20px; }
.nav-shadow ul { background: url('i/shadow.png') no-repeat bottom right; padding: 0 8px 9px 0; }
.nav-shadow ul.nav-shadow-off { background: transparent; }

#nav #search { float: right; border: 0; background: none; margin-right: 10px; padding-top: 5px; }
#nav #search label { float: left; font-size: 11px; color: #AAA; margin-right: 3px; margin-top: 6px; padding: 0; font-weight: normal; }
#nav #search input { width: 150px; }
#nav #search button { display: none; visibility: hidden; }

/* -------------------------------------------------- */
/* TABLES
/* -------------------------------------------------- */
table { display: table !important; border-collapse: collapse; }
thead, tbody { width: 100%; }
thead { background: #410057 url(i/gradients.png) 0 -70px; border: 1px solid #410057; }
th { padding: 5px; color: #FFF; font-weight: bold; }
tbody { border: 1px solid #DDD; background: #FFF; }
td { padding: 8px 5px; border-bottom: 1px dashed #DDD; vertical-align: middle; }

#filters { padding-bottom: 5px; }
.filterlabel { display: inline; text-transform: uppercase; color: #888; }
.filterbox { display: inline; }
#filters .pod_submit { background: #000; color: #FFF; padding: 2px 10px; border: 0; cursor: pointer; float: none; margin: 0; }
#filters .pod_submit:hover { background: #444; -webkit-transition 0.2s linear; }

/* -------------------------------------------------- */
/* FOOTER
/* -------------------------------------------------- */
#footer { clear: both; position: relative; background: #270035; color: #555; padding: 10px; font-size: 11px; }
#bclogo { position: absolute; top: 50%; margin-top: -15px; right: 10px; display: block; width: 100px; height: 30px; background: url(i/bclogo.png); text-indent: -999px; overflow: hidden; opacity: 0.7; }

/* -------------------------------------------------- */
/* CONTENT
/* -------------------------------------------------- */
.panel-head { display: block; background: #410057 url(i/gradients.png) repeat-x 0 -70px; color: #FFF; text-transform: uppercase; font-weight: bold; font-size: 18px; padding: 4px 10px; }
.panel { background: #FFF; margin-left: 9px; margin-right: 9px; }
.panel.equalheight { margin-bottom: 20px; }
.panel .pad { border: 1px solid #CCC; }
.pad { padding: 10px; }
.panel ul { display: block; list-style: disc; }
.panel ul.pad { padding: 10px 10px 10px 30px;  }
.fixed { position: fixed; top: 0; }
.followscroll { width: inherit; margin: 10px 0 0; }

/* ======================== */
/*   PAGE-SPECIFIC STYLES   */
/* ======================== */

/* -------------------------------------------------- */
/* BAND HANDBOOK
/* -------------------------------------------------- */
#handbook-nav { list-style: none; margin: 20px 0 0 -10px; padding: 0; }
#handbook-nav a { display: block; background: #444 url(i/gradients.png) 0 -140px; color: #FFF; padding: 5px 10px; text-decoration: none; }
#handbook-nav a:hover, #handbook-nav a.current { background-image: none; background-color: #DB0 !important; color: #000; }
.printlink { display: block; margin: 8px 0 0 0; font-size: 13px; color: #FFF; padding: 3px 0 3px 20px; text-transform: none; font-weight: normal; }
.printlink:hover { color: #FC0; }

/* -------------------------------------------------- */
/* BOOSTER BY-LAWS
/* -------------------------------------------------- */
#by-laws ul { list-style: disc; padding-left: 40px; }
#by-laws ol { list-style: upper-alpha; padding-left: 40px;}
#by-laws li { margin-bottom: 5px; }
#by-laws h2, #by-laws p, #by-laws ul, #by-laws ol { margin-left: 30px; }
#toc a { color: #000; text-decoration: none; }
#toc a:hover { text-decoration: underline; }

/* -------------------------------------------------- */
/* BOOSTER OFFICERS
/* -------------------------------------------------- */
.page-officers .panel { margin-bottom: 20px; }

/* -------------------------------------------------- */
/* CONTACT
/* -------------------------------------------------- */
.page-contact #content { background-image: url(i/darkbg.gif); background-repeat: repeat-y; background-position: -590px 0; }
.page-contact h1 { margin: 0 0 20px; }
#contact { position: relative; min-height: 400px; }
#contact input, textarea { width: 274px; font-size: 14px; }
#contact textarea { width: 344px; height: 190px; }
#response { position: relative; top: 30px; left: 0; padding-left: 50px; }
#response .check { font-size: 40px; position: absolute; top: 0; left: 0; color: #070; }
#info { width: 185px; padding: 0 10px; }
#info a { text-decoration: none; }
#info p { color: #444; }

/* -------------------------------------------------- */
/* DONATE
/* -------------------------------------------------- */
.page-donate #pagetitle { margin-bottom: 0; }
.page-donate #total { background: #000 url(i/newsfeedbg.png); padding: 30px 10px; margin-bottom: 10px; }
.page-donate .donation-total { font-size: 150px; line-height: 150px; color: #FC0; font-weight: bold; text-align: center; letter-spacing: -7px; text-shadow: 3px 3px 5px #000; }
.page-donate .total-caption { font-size: 32px; text-align: center; color: #FFF; }
.page-donate .donor-list strong { margin: 0; }
.page-donate .donor-list em { font-size: 11px; color: #888; }

/* -------------------------------------------------- */
/* ELIST
/* -------------------------------------------------- */
#elist-form small, #elist-form label { display: block; }
#mce-EMAIL, #mce-FNAME, #mce-LNAME { width: 98%; padding: 1%; }
.phonearea, .phonedetail1, .phonedetail2 { position: relative; }
.phonearea label, .phonedetail1 label, .phonedetail2 label { position: absolute; top: 0; left: 1px; padding: 0 2px; color: #CCC; text-align: center; margin: 0; }
.phonearea input, .phonedetail1 input, .phonearea label, .phonedetail1 label { width: 35px; }
.phonedetail2 input, .phonedetail2 label { width: 42px; }
.checkbox { display: block; margin-top: 10px; }
.checkbox label { display: inline; color: #444; margin: 0; }
.mce_inline_error { color: #900; font-weight: bold; }

/* -------------------------------------------------- */
/* EXAM REVIEW
/* -------------------------------------------------- */
.page-examreview #pagetitle { margin: 0; }
.question_text { font-size: 24px; margin: 15px 0; }
.question_text img { margin-bottom: 10px; }
.question_text strong { text-transform: uppercase; color: #000; }
.answers { font-family: Helvetica, Arial, sans-serif; color: #666; font-size: 14px; }
.answers label { display: inline; font-weight: normal; }
.question { overflow: hidden; min-height: 420px; }
#questions { display: block; position: relative; }

#score { font-size: 36px; background: #000 url(i/newsfeedbg.png); padding: 30px 10px; color: #FFF; text-align: center; text-transform: uppercase; font-weight: bold; margin: 0 0 10px; }
#score-number { font-size: 200px; color: #FC0; letter-spacing: -10px; line-height: 170px; }
#score-number em { color: #444; font-style: normal; font-weight: normal; }

#results .question { min-height: 0; padding: 0 30px 60px 100px; position: relative; }
#results .answers { color: #AAA; }
#results .their-answer { font-weight: bold; }
#results .correct-answer { color: #070; font-weight: bold; }
#results .incorrect .their-answer { color: #700; }
#results .indicator { font-size: 80px; position: absolute; top: 0; left: 0; }
#results .indicator.correct { color: #070; }
#results .indicator.incorrect { color: #700; }
#filter-correct { margin-top: 30px; }

/* -------------------------------------------------- */
/* LINK OF THE MOMENT
/* -------------------------------------------------- */
#links a { font-size: 18px; font-weight: bold; display: block; font-style: normal; }
#links li { font-style: italic; }

/* -------------------------------------------------- */
/* PRIVATE LESSONS
/* -------------------------------------------------- */
.page-lessons td h1 { font-size: 24px; margin: 0 0 10px; border-bottom: 1px dotted #CCC; }
.page-lessons td.instrument { font-size: 28px; letter-spacing: -2px; color: #CCC; text-transform: uppercase; width: 20%; padding-right: 10px; }

/* -------------------------------------------------- */
/* SEARCH
/* -------------------------------------------------- */
#results { margin: 20px 0; padding: 20px 0; border-top: 1px dashed #CCC; border-bottom: 1px dashed #CCC; }
#results h2 { font-weight: normal; }
#other_pages { text-transform: uppercase; color: #AAA; }
#other_pages a { display: inline-block; padding: 3px 10px; text-decoration: none; text-align: center; background: #410057 url(i/gradients.png) 0 -70px; margin-right: 4px; color: #FFF; }
#other_pages a.current_page, #other_pages a:hover { background-position: 0 -35px; color: #000; }

/* -------------------------------------------------- */
/* SINGLE POST
/* -------------------------------------------------- */
.single #content { background: #EEE; }
#single { float: none; display: block; margin: 15px auto; border: 1px solid #DDD; background-color: #FFF; padding: 20px;  }


/* -------------------------------------------------- */
/* TRI-M
/* -------------------------------------------------- */
.page-tri-m .panel { margin-bottom: 20px; }

/* -------------------------------------------------- */
/* TRI-M APPLICATION
/* -------------------------------------------------- */
#tri-m-application { display: block; background: #FFF; border: 1px solid #DDD; float: none; padding: 15px; margin: 15px auto; }
#tri-m-application .description { font-style: italic; color: #888; margin-top: -15px; }
#tri-m-application .inputs100 input { width: 272px; }
#tri-m-application textarea { width: 347px; padding: 4px; border: 1px solid #DDD; height: 300px; }
#tri-m-application textarea.short { height: 50px; width: 722px; }
#tri-m-application label { font-size: 16px; }
#tri-m-application label small { color: #888; display: block; }
#tri-m-application label.inline { display: inline; color: #888; font-weight: normal; font-size: inherit; cursor: pointer; }
#tri-m-application #response { background: #DDD; border: 1px solid #CCC; text-align: center; font-weight: bold; padding: 10px; }
#tri-m-application label.error { font-size: 12px; text-align: left; padding: 2px 5px; }

/* -------------------------------------------------- */
/* WHY JOIN BAND
/* -------------------------------------------------- */
.page-why #pagetitle { margin-bottom: 0; }
.bighead { font-size: 64px; line-height: 60px; text-transform: uppercase; letter-spacing: -2px; color: #000 }
.bigparagraph { font-size: 20px; line-height: 30px; }

/* Stats */
.statistic { clear: both; overflow: hidden; padding-bottom: 5px; }
.number { font-size: 30px; display: inline-block; font-weight: bold; color: #000; padding-right: 10px; vertical-align: middle; }
.caption { color: #FFF; font-style: italic;}
cite { font-size: 11px; }
cite a { color: #555; }
cite a:hover { color: #410057; }

#picture-this, #trust-the-numbers, #band-plus-life { overflow: hidden; padding: 30px 0; }
#picture-this { background: #333; color: #CCC; }
#picture-this strong { color: #FFF; }
#picture-this .bighead { color: #FFF; }
#trust-the-numbers { background: #888; }
#trust-the-numbers h2 { color: #410057; }
#band-plus-life .bighead { color: #410057; }

/* -------------------------------------------------- */
/* WORKS PERFORMED
/* -------------------------------------------------- */
#works-performed { display: table; border-collapse: collapse; }
#works-performed thead, #works-performed tbody { width: 100%; }
#works-performed thead { background: #410057 url(i/gradients.png) 0 -70px; border: 1px solid #410057; }
#works-performed th { padding: 5px; color: #FFF; font-weight: bold; }
#works-performed tbody { border: 1px solid #DDD; background: #FFF; }
#works-performed td { padding: 8px 5px; border-bottom: 1px dashed #DDD; vertical-align: middle; }
#works-performed td.title { font-weight: bold; }
#works-performed .school_year { white-space: nowrap; }
#works-performed td.title, #works-performed th.title,
#works-performed td.school_year, #works-performed th.school_year,
#works-performed td.ensemble, #works-performed th.ensemble { padding-right: 20px; }
#works-performed td.noresults { text-align: center; padding: 10px 0; font-style: italic; color: #888; }
#filters { padding-bottom: 5px; }
.filterlabel { display: inline; text-transform: uppercase; color: #888; }
.filterbox { display: inline; }
#filters .pod_submit { background: #000; color: #FFF; padding: 2px 10px; border: 0; cursor: pointer; float: none; margin: 0; }
#filters .pod_submit:hover { background: #444; -webkit-transition 0.2s linear; }