/*
Theme Name: ECHO ETC
Description: ECHO Teen Club templates
Author: James Sui
*/

/* 
-------------------------------------------------------------------
ECHO Teen Club stylesheet: global styles
-------------------------------------------------------------------
*/

/* Resets
-------------------------------------------------------------------
*/

* { margin: 0; padding: 0; font-size: 1em; }

img, embed, form, fieldset { border: 0; vertical-align: bottom; }

html { height: 100%; }
body { font: 62.5% "Arial", sans-serif; background: #6ac707 url(/images/template/bg-body.png) repeat-x; color: #000; height: 100%; line-height: 1; text-align: center; }

input, select, textarea { font: 1em "Arial", sans-serif; vertical-align: bottom; }

table { border-collapse: collapse; border-spacing: 0; }
table tr th, table tr td { vertical-align: top; }

ul, ol { list-style: none; }

a { text-decoration: none; }

/* Container, wrapper, logo and main content DIVs
-------------------------------------------------------------------
*/

#container { min-height: 100%; background: url(/images/template/bg-container.png) no-repeat center top; }

#wrapper { width: 710px; margin: 0 auto; padding: 188px 0 2em 0; position: relative; text-align: left; }
#pgHome #wrapper { background: url(/images/template/bg-wrapper-home.png) no-repeat; }
#pgInfo #wrapper { background: url(/images/template/bg-wrapper-info.png) no-repeat; }
#pgDownloads #wrapper { background: url(/images/template/bg-wrapper-chat.png) no-repeat; }
#pgEvents #wrapper { background: url(/images/template/bg-wrapper-events.png) no-repeat; }
#pgChat #wrapper { background: url(/images/template/bg-wrapper-chat.png) no-repeat; }
#pgGames #wrapper { background: url(/images/template/bg-wrapper-events.png) no-repeat; }
#pg16Plus #wrapper { background: url(/images/template/bg-wrapper-info.png) no-repeat; }
#pgContact #wrapper { background: url(/images/template/bg-wrapper-home.png) no-repeat; }
#pgSuggestionsBox #wrapper { background: url(/images/template/bg-wrapper-home.png) no-repeat; }

#logo { position: absolute; top: 138px; right: -43px; }

#content { padding: 3px 12px 12px; background: #fff; }
#content div { background: url(/images/template/bg-content.png) repeat-y; border-top: 3px solid #e2e1e1; }
#content div div { background: none; border-top: 0; }

#content a { color: #000; }

/* Left column (main menu, etc.)
-------------------------------------------------------------------
*/

#content #leftCol { width: 142px; padding: 0 0 15px 0; float: left; background: #e2e1e1; }
#content #leftCol ul#mainMenu { margin: 0 0 17px 0; }
#content #leftCol ul#mainMenu li { margin: 0 0 1px 0; }
#content #leftCol ul#mainMenu li.page-item-2 a { background: #d50089; }
#content #leftCol ul#mainMenu li.page-item-2 a:hover { background: #9f0267; }
#content #leftCol ul#mainMenu li.page-item-3 a { background: #a2de14; }
#content #leftCol ul#mainMenu li.page-item-3 a:hover { background: #7eb008; }
#content #leftCol ul#mainMenu li.page-item-5 a { background: #2d9ddf; }
#content #leftCol ul#mainMenu li.page-item-5 a:hover { background: #1683c3; }
#content #leftCol ul#mainMenu li.page-item-6 a { background: #ffff09; }
#content #leftCol ul#mainMenu li.page-item-6 a:hover { background: #d5d501; }
#content #leftCol ul#mainMenu li.page-item-7 a { background: #a20abd; }
#content #leftCol ul#mainMenu li.page-item-7 a:hover { background: #8e04a6; }
#content #leftCol ul#mainMenu li.page-item-8 a { background: #ff2a28; }
#content #leftCol ul#mainMenu li.page-item-8 a:hover { background: #de0200; }
#content #leftCol ul#mainMenu li.page-item-9 a { background: #f77e08; }
#content #leftCol ul#mainMenu li.page-item-9 a:hover { background: #dd6e01; }
#content #leftCol ul#mainMenu li.page-item-10 a { background: #d50089; }
#content #leftCol ul#mainMenu li.page-item-10 a:hover { background: #9f0267; }
#content #leftCol ul#mainMenu li.page-item-21 a { display: none; }
#content #leftCol ul#mainMenu li a { padding: .2em 8px; display: block; font-size: 1.7em; font-weight: bold; border: 2px solid #000; }
#content #leftCol ul#mainMenu li a:hover, #content #leftCol ul#mainMenu li a:active, #content #leftCol ul#mainMenu li a:focus { color: #fff; }
#content #leftCol ul#mainMenu li.current_page_item a { color: #fff; }

/* second level */
#content #leftCol ul#mainMenu li ul { display: none; }
#content #leftCol ul#mainMenu li.current_page_item ul, #content #leftCol ul#mainMenu li.current_page_parent ul, #content #leftCol ul#mainMenu li.current_page_ancestor ul { margin: 1px 0 0; display: block; }
#content #leftCol ul#mainMenu li.current_page_parent ul li a, #content #leftCol ul#mainMenu li.current_page_item ul li a, #content #leftCol ul#mainMenu li.current_page_ancestor ul li a { padding: .2em 8px .2em 20px; color: #000; }
#content #leftCol ul#mainMenu li.current_page_parent ul li a:hover, #content #leftCol ul#mainMenu li.current_page_item ul li a:hover { color: #fff; }
#content #leftCol ul#mainMenu li.page-item-3 ul li a:hover { background: #7eb008; }
#content #leftCol ul#mainMenu li.page-item-9 ul li a { background: #dd6e01; }
#content #leftCol ul#mainMenu li.page-item-9 ul li a:hover { background: #b15f06; }
#content #leftCol ul#mainMenu li.current_page_parent ul li.current_page_item a, #content #leftCol ul#mainMenu li.current_page_item ul li.current_page_item a { color: #fff; }

#content #leftCol ul#mainMenu li.page-item-96 ul { display: none; }

#content #leftCol #register { background: url(/images/template/leftcol-register-bg.png); }
#content #leftCol #register div { background: url(/images/template/leftcol-register-top.png) no-repeat; }
#content #leftCol #register div div { background: url(/images/template/leftcol-register-btm.png) no-repeat bottom; }
#content #leftCol #register div div h2 { position: absolute; top: 0; left: -9999px; }
#content #leftCol #register div div p { font-size: 1.1em; line-height: 1.3em; }
#content #leftCol #register div div p a { color: #000; display: block; padding: 110px 18px 10px; }
#content #leftCol #register div div p a:hover strong { text-decoration: underline; }

/* Main content area (rightCol)
-------------------------------------------------------------------
*/

#content #rightCol { width: 538px; padding: 0 0 .8em; border-bottom: 3px solid #e2e1e1; float: right; }

#content #rightCol #pageTitle { height: 66px; }
#content #rightCol #pageTitle h1 { position: absolute; top: 0; left: -9999px; }
#pgHome #content #rightCol #pageTitle { background: url(/images/template/pagetitle-home.png); }
#pgInfo #content #rightCol #pageTitle { background: url(/images/template/pagetitle-info.png); }
#pgDownloads #content #rightCol #pageTitle { background: url(/images/template/pagetitle-downloads.png); }
#pgEvents #content #rightCol #pageTitle { background: url(/images/template/pagetitle-events.png); }
#pgChat #content #rightCol #pageTitle { background: url(/images/template/pagetitle-chat.png); }
#pgGames #content #rightCol #pageTitle { background: url(/images/template/pagetitle-games.png); }
#pg16Plus #content #rightCol #pageTitle { background: url(/images/template/pagetitle-16plus.png); }
#pgContact #content #rightCol #pageTitle { background: url(/images/template/pagetitle-contact.png); }
#pgSuggestionsBox #content #rightCol #pageTitle { background: url(/images/template/pagetitle-suggestionsbox.png); }

#content #rightCol #subTitle { margin: 3px 0 0 0; padding: .4em 8px; background: #e2e1e1; }
#content #rightCol #subTitle p { font-weight: bold; font-size: 2em; }
#content #rightCol #subTitle span { display: block; font-size: 2em; height: 1em; }

#content #rightCol #body { margin: 1.4em 0 0 0; }
#pgHome #content #rightCol #body { background: url(/images/template/bg-content-body-home.png) repeat-y top right; }
#pgInfo #content #rightCol #body { background: url(/images/template/bg-content-body-info.png) repeat-y top right; }
#pgDownloads #content #rightCol #body { background: url(/images/template/bg-content-body-downloads.png) repeat-y top right; }
#pgEvents #content #rightCol #body { background: url(/images/template/bg-content-body-events.png) repeat-y top right; }
#pgChat #content #rightCol #body { background: url(/images/template/bg-content-body-chat.png) repeat-y top right; }
#pgGames #content #rightCol #body { background: url(/images/template/bg-content-body-games.png) repeat-y top right; }
#pg16Plus #content #rightCol #body { background: url(/images/template/bg-content-body-16plus.png) repeat-y top right; }
#pgContact #content #rightCol #body { background: url(/images/template/bg-content-body-home.png) repeat-y top right; }
#pgSuggestionsBox #content #rightCol #body { background: url(/images/template/bg-content-body-home.png) repeat-y top right; }

#content #rightCol #priCol { width: 318px; padding: 1px 10px 0; float: left; line-height: 1.5em; }

#content #rightCol #priCol p { margin: 0 0 1.2em; font-size: 1.2em; }
#content #rightCol #priCol h2 { margin: 0 0 .9em; font-size: 1.6em; }
#content #rightCol #priCol h3 { margin: 0 0 1.2em; font-size: 1.2em; }
#content #rightCol #priCol ul { font-size: 1.2em; margin: .8em 0 0 0; zoom: 1; }
#content #rightCol #priCol ul li { list-style: disc; margin: 0 0 .5em 2em; }
#content #rightCol #priCol ul li ul { font-size: 1em; }
#content #rightCol #priCol ol { font-size: 1.2em; margin: .8em 0 0 0; zoom: 1; }
#content #rightCol #priCol ol li { list-style: decimal; margin: 0 0 .5em 2.5em; }
#content #rightCol #priCol hr { width: 100%; margin: 0 0 1.4em; padding: 0; font-size: 1em; color: #e2e1e1; background: #e2e1e1; height: 2px; border: 0; }
#pgDownloads #content #rightCol #priCol hr { width: 100%; margin: 0; font-size: 1em; color: #fff; background: #fff; height: 0; border: 0; clear: both; }

#content #rightCol #priCol a { color: #d50089; }
#content #rightCol #priCol a:hover { text-decoration: underline; }
#content #rightCol #priCol a:active, #content #rightCol #priCol a:focus { color: #000; }

#content #rightCol #priCol img.alignleft { margin: 0 8px .4em 0; float: left; border: 1px solid #d50089; padding: 2px; }
#content #rightCol #priCol img.alignright { margin: 0 0 .4em 8px; float: right; border: 1px solid #d50089; padding: 2px; }

#content #rightCol #priCol .story { width: 49.9%; float: left; text-align: center; }
#content #rightCol #priCol .story img { }

#content #rightCol #priCol ul.lightbox { padding: 12px 0 12px 12px; background: #ffff84; overflow: hidden; }
#content #rightCol #priCol ul.lightbox li { list-style: none; margin: 12px 12px 0 0; float: left; }
#content #rightCol #priCol ul.lightbox li a img { border: 1px solid #d50089; }
#content #rightCol #priCol ul.lightbox li a:hover img { border: 1px solid #000; }

#content #rightCol #priCol form.cform { }
#content #rightCol #priCol form.cform ol { margin: 0; }
#content #rightCol #priCol form.cform ol li { list-style: none; margin: 0; }
#content #rightCol #priCol form.cform label { display: block; margin: .8em 0 .3em; }
#content #rightCol #priCol form.cform .reqtxt, #content #rightCol #priCol form.cform .emailreqtxt { font-style: italic; display: block; font-size: .9em; }
#content #rightCol #priCol p.linklove { display: none; }
#content #rightCol #priCol .cf_info.failure, #content #rightCol #priCol .cf_info.waiting, #content #rightCol #priCol .cf_info.success { font-size: 1.2em; font-weight: bold; text-align: center; color: #d50089; border: 2px solid #d50089; padding: .3em; background: #f9f9f9; }

#content #rightCol #secCol { width: 188px; padding: 0 0 1em 0; float: right; }
#content #rightCol #secCol div.image { height: 151px; }
#pgHome #content #rightCol #secCol div.image { background: #fff url(/images/template/subcol-image-home.jpg) no-repeat center 10px; }
#pgInfo #content #rightCol #secCol div.image { background: #fff url(/images/template/subcol-image-info.jpg) no-repeat center 10px; }
#pgInfo.healthyEating #content #rightCol #secCol div.image { background: #fff url(/images/template/subcol-image-healthyeating.jpg) no-repeat center 10px; }
#pgDownloads #content #rightCol #secCol div.image { background: #fff url(/images/template/subcol-image-downloads.jpg) no-repeat center 10px; }
#pgEvents #content #rightCol #secCol div.image { background: #fff url(/images/template/subcol-image-events.jpg) no-repeat center 10px; }
#pgEvents.transition #content #rightCol #secCol div.image { background: #fff url(/images/template/subcol-image-events-transition.jpg) no-repeat center 10px !important; }
#pgChat #content #rightCol #secCol div.image { background: #fff url(/images/template/subcol-image-chat.jpg) no-repeat center 10px; }
#pgGames #content #rightCol #secCol div.image { background: #fff url(/images/template/subcol-image-games.jpg) no-repeat center 10px; }
#pg16Plus #content #rightCol #secCol div.image { background: #fff url(/images/template/subcol-image-16plus.jpg) no-repeat center 10px; }
#pgContact #content #rightCol #secCol div.image { background: #fff url(/images/template/subcol-image-home.jpg) no-repeat center 10px; }
#pgSuggestionsBox #content #rightCol #secCol div.image { background: #fff url(/images/template/subcol-image-home.jpg) no-repeat center 10px; }

#content #rightCol #secCol #siteSearch { width: 202px; position: relative; left: -6px; background: url(/images/template/sitesearch-bg.png) repeat-y top left; }
#content #rightCol #secCol #siteSearch form { background: url(/images/template/sitesearch-top.png) no-repeat; }
#content #rightCol #secCol #siteSearch form fieldset { padding: 20px 0 14px; text-align: center; }
#content #rightCol #secCol #siteSearch form fieldset input { width: 135px; padding: .1em 5px; font-size: 1.1em; vertical-align: middle; }
#content #rightCol #secCol #siteSearch form fieldset input.submit { width: auto; padding: 0; }

#pgHome #content #rightCol #secCol #siteSearch form fieldset { background: url(/images/template/sitesearch-btm-home.png) no-repeat bottom left; }
#pgInfo #content #rightCol #secCol #siteSearch form fieldset { background: url(/images/template/sitesearch-btm-info.png) no-repeat bottom left; }
#pgDownloads #content #rightCol #secCol #siteSearch form fieldset { background: url(/images/template/sitesearch-btm-downloads.png) no-repeat bottom left; }
#pgEvents #content #rightCol #secCol #siteSearch form fieldset { background: url(/images/template/sitesearch-btm-events.png) no-repeat bottom left; }
#pgChat #content #rightCol #secCol #siteSearch form fieldset { background: url(/images/template/sitesearch-btm-chat.png) no-repeat bottom left; }
#pgGames #content #rightCol #secCol #siteSearch form fieldset { background: url(/images/template/sitesearch-btm-games.png) no-repeat bottom left; }
#pg16Plus #content #rightCol #secCol #siteSearch form fieldset { background: url(/images/template/sitesearch-btm-16plus.png) no-repeat bottom left; }
#pgContact #content #rightCol #secCol #siteSearch form fieldset { background: url(/images/template/sitesearch-btm-home.png) no-repeat bottom left; }
#pgSuggestionsBox #content #rightCol #secCol #siteSearch form fieldset { background: url(/images/template/sitesearch-btm-home.png) no-repeat bottom left; }

#content #rightCol #secCol .text { line-height: 1.5em; padding: 0 8px; }
#content #rightCol #secCol .text h2 { font-size: 1.6em; padding: .6em 0 0; }
#content #rightCol #secCol .text p { font-size: 1.2em; padding: .8em 0; border-bottom: 2px solid #fff; }
#content #rightCol #secCol .text p.suggestions { text-align: center; border-bottom: 0; }
#content #rightCol #secCol .text p a { text-decoration: underline; }
#content #rightCol #secCol .text p a:hover { text-decoration: none; }

/*#content #rightCol #secCol #futureEvents { margin: 1.5em 8px 0; line-height: 1.5em; border-bottom: 2px solid #fff; }
#content #rightCol #secCol #futureEvents p.imgLeft img { margin: 0 4px .4em 0; border: 1px solid #fff; padding: 2px; float: left; }
#content #rightCol #secCol #futureEvents h2 { font-size: 1.2em; }
#content #rightCol #secCol #futureEvents p { margin: .6em 0 0 0; font-size: 1.2em; }
#content #rightCol #secCol #futureEvents a:hover, #content #rightCol #secCol #futureEvents a:active, #content #rightCol #secCol #futureEvents a:focus { text-decoration: underline; }*/

#content #forum { background: #fff; padding: 1em 0; }
#content #forum #header h1 { display: none; }
#content #forum form.login { padding: 1em 1.5em; margin: 0 0 1.4em; background: #eee; }
#content #forum form.login p { display: inline; font-size: 1.1em; }
#content #forum form.login label { float: left; font-weight: bold; margin: .3em 1em .5em 0; display: block; font-size: 1.1em; }
#content #forum form.login label input { margin: .3em 0 0; display: block; }
#content #forum form.login #submit { margin: 1.8em 0 0 0; }
#content #forum form.login .remember label { font-weight: normal; margin: 0; font-size: 1.1em; }
#content #forum form.login .remember label input { margin: 0; display: inline; }

#content #forum h2 { margin: 0 0 .9em; font-size: 1.6em; }
#content #forum h3 { margin: 0 0 1.2em; font-size: 1.2em; }
#content #forum p { margin: 0 0 1.2em; font-size: 1.2em; }
#content #forum dl { margin: 0 0 1.2em; font-size: 1.2em; }
#content #forum ul { font-size: 1.2em; margin: .8em 0 0 0; zoom: 1; }
#content #forum ul li { list-style: disc; margin: 0 0 .5em 2em; }
#content #forum ul li ul { font-size: 1em; }
#content #forum a { color: #d50089; }
#content #forum a:hover { text-decoration: underline; }
#content #forum a:active, #content #forum a:focus { color: #000; }

#content #forum table { width: 100%; font-size: 1.2em; margin: 0 0 1.2em; }
#content #forum table tr th, #content #forum table tr td { padding: .3em .5em; }
#content #forum legend { font-size: 1.2em; font-weight: bold; padding: 0 0 .8em; }

#content #forum .postform label { display: block; font-weight: bold; }
#content #forum .postform input, #content #forum .postform textarea { display: block; }

#content #forum ol#thread li { margin: 0 0 1.2em; padding: .4em; }
#content #forum ol#thread li.alt { background: #f6f6f6; }
#content #forum .threadauthor { width: 20%; float: left; }
#content #forum .threadpost { width: 79%; float: right; }

#content #forum #footer p { font-size: 1.1em; font-style: italic; text-align: right; }

#content #forum form.login div:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#content #forum form.login div { display: inline-block; }

/* Hides from IE-mac \*/
* html #content #forum form.login div { height: 1%; }
#content #forum form.login div { display: block; }
/* End hide from IE-mac */

/* Footers
-------------------------------------------------------------------
*/

#content #copyright { padding: 8px .5em; background: #e2e1e1; clear: both; border: solid #fff; border-width: 6px 0; text-align: center; }
#content #copyright p { font-size: 1.1em; }
#content #copyright a:hover, #content #copyright a:active, #content #copyright a:hover { text-decoration: underline; }

#content #credits { padding: 8px .5em; background: #afe214; text-align: center; }
#content #credits p { font-size: 1.1em; }
#content #credits a:hover, #content #credits a:active, #content #credits a:hover { text-decoration: underline; }

/* Clearfix
-------------------------------------------------------------------
*/

.clearfix:after, #body:after, #content #rightCol #secCol #futureEvents:after, #content #forum #thread li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix, #body, #content #rightCol #secCol #futureEvents, #content #forum #thread li { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix, * html #body, * html #content #rightCol #secCol #futureEvents, * html #content #forum #thread li { height: 1%; }
.clearfix, #body, #content #rightCol #secCol #futureEvents, #content #forum #thread li { display: block; }
/* End hide from IE-mac */