/*
*    RULES ABOUT THIS FILE:
*  
*    - only put *global* styles in here
*    - if it's on one page it probably doesn't belong here
*    - it will most likely contain styles for a tag or a general class ( eg ul.tabs {  } )
*    - if it doesn't meet those requirements it most likely goes in # { controller }.css
*/

/*---------------------
 * HACKS & TOOLS
 *-------------------*/

/* Clearfix */
.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden }
.clearfix { display: inline-block }
/* Hides from IE-mac \*/
* html .clearfix { height: 1% }
.clearfix { display: block }
/* End hide from IE-mac */

/* Shortcut for creating flicker-free rollover buttons. Button image must 
   contain the rollover state as well as the default state. The rollover
   must be on the bottom. Add this class to an anchor tag or image button.	
   The size of the image must be set elsewhere */
a.hoverButton, input.hoverButton { background-position: left top; background-repeat: no-repeat; display: block }
a.hoverButton:hover, input.hoverButton:hover { background-position: left bottom }

/* Prevent centered content from jumping with the following two styles */
html { overflow-y: scroll }

/* Use this class to create default text for an input
   field that clears onFocus */
input.cleardefault, textarea.cleardefault { color: #065E82 !important }

/*--------
 * RESETS
 *-------*/
* { margin: 0; outline: none; padding: 0 }
body { background: #000 url('../images/layout/main_background.jpg') no-repeat center top; color: #EBF9FF; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; text-align: center }

p { font-size: 16px; font-weight: lighter; line-height: 30px; margin-bottom: 1.0em; }
p a:hover { }
p strong { font-size: 20px; font-weight: bold; }

h1 { font-size: 42px; font-weight: bold; letter-spacing: -1px; line-height: 1em; margin-bottom: 18px; }
h2 { font-size: 26px; font-weight: bold; line-height: 60px; }
h2 a.small_link { float: right; font-size: 14px; }
h3 { font-size: 20px; font-weight: bold; line-height: 30px; }
h4 { font-size: 16px; font-weight: normal; line-height: 30px; }
h4 a { font-weight: bold; }
big { display: block; font-size: 20px; font-weight: lighter; line-height: 60px; padding: 40px 0; text-align: center; }
big img { vertical-align: text-bottom; }
h2 span { display: inline; float: left; font-weight: lighter; width: 180px;  }

/* BBCode Support */
span.font_size_1 { font-size: 12px; }
span.font_size_2 { font-size: 14px; }
span.font_size_3 { font-size: 16px; }
span.font_size_4 { font-size: 20px; }
span.font_size_5 { font-size: 26px; }
span.font_size_6 { font-size: 38px; }
span.font_size_7 { font-size: 42px; }

/* Links */
a { color: #00b6ff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; outline: none; text-decoration: none }
a:focus, a:active { outline: none }  
a:hover { color: #6FD3FC; text-decoration: none }
a.active:hover { text-decoration: none }
a.star_ellipsis { background: url('../images/layout/star_ellipsis.png') no-repeat right bottom; padding-right: 42px; }
a.admin { color: #ffff00; }
a.FB_Link { color: #00b6ff !important; }
a.FB_Link:hover { color: #6FD3FC !important; text-decoration: none !important }

img { -o-text-overflow: ellipsis; border: 0; color: #f2f2f2; font-size: 9px; overflow: hidden; text-decoration: none; text-overflow: ellipsis }

/* Input */
input { outline: none;}

ol, ul { }
ul { list-style-type: none; color: #f2f2f2; }
/*--------------
 * MAIN LAYOUT
 *------------*/
div#wrapper {  position: relative; }
div#inner { margin: 0 auto; position: relative; text-align: left; width: 960px; }
div#footer { color: #262829;  padding-bottom: 40px; padding-right: 40px; padding-top: 20px; text-align: right; }
div#footer a { color: #002C3D; }
div#footer a:hover { color: #005F85; }

/*------------
 * HEADER
 *---------*/
div#header { height: 100px; }
div#header a#logo { display: block; height: 100px; width: 767px; text-indent: -10000px; }

/*---------
 * NAVIGATION
 *-------*/
div#navigation { height: 40px; position: relative; text-shadow: #07151b 0px -1px 0px; }
div#navigation ul { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; left: 0; margin: 0; position: absolute; padding: 0 0 0 20px; top: 0; z-index: 3; }
div#navigation ul li { display: inline; float: left; height: 40px; }
div#navigation ul li a { border: none; color: #EBF9FF; display: inline; float: left; font-weight: bold; height: 40px; line-height: 40px; padding: 0 20px; text-shadow: #07151b 0px -1px 0px; }
div#navigation ul li a:hover, div#navigation ul li a.active { font-size: #fff; text-shadow: #00B6FF 0px 0px 20px; }
div#navigation div#login_info { float: right; font-size: 14px; font-weight: bold; line-height: 40px; }
div#action_buttons { float: right; width: 162px; }
div#action_buttons a {  background: url('../images/layout/sign_in_button.png') no-repeat; background-position: left top; color: #EBF9FF; display: inline; float: right; font-size: 13px; font-weight: normal; height: 40px; line-height: 40px; text-align: center; text-shadow: #07151b 0px -1px 0px; width: 81px; }
div#action_buttons a.active, div#action_buttons a:active { background-position: left bottom; }
div#navigation div#navigation_effects { height: 30px; position: absolute; top: 10px; z-index: 2; }
div#navigation div.nav_effect { background: url('../images/layout/nav_glow.jpg') no-repeat left top; height: 30px; position: absolute; top: 0; width: 70px; }
div#login_info div#login_form { height: 40px; left: 10px; line-height: 40px; position: absolute; text-align: left; top: 0px; width: 820px; z-index: 4; }
div#login_info div#login_form form { display: inline; }
div#login_info div#login_form label { display: inline; float: left; font-size: 14px; font-weight: normal; line-height: 40px; padding: 0 10px 0 30px; }
div#login_info div#login_form input.text { border: none; display: inline; float: left; font-size: 12px; margin-top: 8px; padding: 5px 10px; width: 100px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
div#login_info div#login_form a.button { background: url('../images/layout/login_button.png') no-repeat left top; color: #EBF9FF; display: inline; float: left; font-size: 12px; height: 29px; line-height: 27px; margin-left: 20px; margin-top: 7px; text-align: center; width:62px; }
div#login_info div#login_form a.button:active { background-position: left bottom; }
div#login_info div#login_form span { display: inline; float: left; font-size: 14px; font-weight: normal; line-height: 40px; padding: 0 40px; }
div#login_info div#login_form span img { vertical-align: middle; }
div#login_info div#login_form span a { font-weight: normal; }
div#login_info div#login_form span strong { padding-right: 40px; }
/*---------
 * MAIN CONTENT
 *-------*/
div#content { min-height: 800px; margin: 0px 40px 20px; }
div#breadcrumbs { font-size: 14px; margin: 20px 0 20px 0; }
div#breadcrumbs a { font-weight: normal; line-height: 20px;  }

/*-------------
 * FORM FIELDS
 *-----------*/
div.standard_form { clear: both; display: inline; float: left; margin-right: 80px; position: relative; width: 500px; }
div.centered_form { float: none !important; display: block; left: 50%; margin-left: -250px; }
div.form_with_explanation { margin-right: 0px; width: 880px; }
div.standard_form p { clear: left; display: inline; float: left; margin-bottom: 20px; width: 500px; }
div.standard_form p.legend { font-size: 12px; font-style: italic; line-height: 20px; margin-bottom: 10px; text-align: right; }
div.standard_form p.legend img { vertical-align: middle; }
div.form_with_explanation p { width: 880px; }
div.form_with_explanation p.legend { width: 500px; }
div.standard_form select { display: inline; float: left; font-size: 16px; line-height: 30px; margin-top: 7px; width: 260px; }
div.standard_form textarea { background: #002F42; border: none; color:#EBF9FF; display: inline;  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; float: left; line-height: 25px; padding: 10px; width: 480px; height: 200px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
div.standard_form textarea.extra_tall { height: 400px; }
div.standard_form p input.button { background: #065E82; border: none; color: #EBF9FF; display: inline; float: right; font-size: 16px; padding: 10px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
div.standard_form input.text { background: #002F42; border: none; color: #EBF9FF; display: inline; float: left; font-size: 16px; padding: 10px; width: 240px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
div.standard_form p input.file { background: #EBF9FF; color: #333; display: inline; float: left; font-size: 10px; margin-top: 12px; overflow: hidden; width: 260px; }
div.form_with_explanation p input, div.form_with_explanation p textarea, div.form_with_explanation p select { margin-right: 40px;}
div.form_with_explanation p input.button { margin-right: 380px; }
div.form_with_explanation p input.checkbox { margin-right: 0; }
div.standard_form p span.date { display: inline; float: left; height: 30px; padding-top: 0; width: 260px;}
div.standard_form p span.file { display: inline; float: left; width: 260px; }
div.standard_form p span.facebook { padding-top: 50px; text-align: center; }
div.standard_form p span.file div.user_thumbnail { border: 1px solid red; }
div.standard_form p span.file a { font-size: 14px; font-weight: normal; padding-left: 20px; }
div.form_with_explanation p span.date, div.form_with_explanation p span.file  { margin-right: 40px; }
div.standard_form p span.date select { font-size: 15px; margin-right: 10px; width: auto; }
div.form_with_explanation span.explanation { display: inline; float: left; font-size: 14px; width: 340px; }
div.standard_form p label { display: inline; float: left; font-size: 16px; font-weight: normal; line-height: 40px; margin-right: 20px; text-align: right; width: 220px; }
div.standard_form p label.required { background: url('../images/layout/small_star.png') no-repeat right center; padding-right: 20px; width: 200px; }
div.standard_form p.for_checkbox { padding-left: 240px; }
div.form_with_explanation p.for_checkbox { width: 640px; }
div.standard_form p.for_checkbox label { float: none; line-height: 20px; padding-left: 20px; vertical-align: middle; width: auto;  }
div.standard_form p.for_checkbox span.checkbox { clear: left; display: inline; float: left; width: 300px; }
div.standard_form p input.checkbox { vertical-align: middle; }
div.standard_form p span.field_with_errors { display: inline; float: right;  }
div.form_with_explanation p span.field_with_errors { float: none; }
div.standard_form p span.field_with_errors input.text, div.standard_form p span.field_with_errors input.file, div.standard_form p span.field_with_errors input.textarea { background: #420200; }
div#fb_connect_form { display: inline; float: left; width: 300px; }
div#fb_connect_button { margin-top: 40px; text-align: center; }
div.standard_form div#recaptcha_area { float: right; margin-bottom: 20px; }

/*-----------
 * THUMBNAILS
 *-----------*/
.user_thumbnail { background-position: left top; display: inline; float: left; overflow: hidden; position: relative; }
.user_thumbnail img, .user_thumbnail a { left: 0px; position: absolute; top: 0px; z-index: 2;}
.small_thumbnail { width: 50px; height: 50px; } 
.medium_thumbnail { width: 100px; height: 100px; } 
.large_thumbnail { width: 250px; height: 250px; }
.small_thumbnail div.photo { background-image: url('../images/layout/small_thumb_mask.png'); height: 50px; width: 50px; }
.medium_thumbnail div.photo { background-image: url('../images/layout/medium_thumb_mask.png'); height: 100px; width: 100px; }
.large_thumbnail div.photo { background-image: url('../images/layout/large_thumb_mask.png'); height: 250px; width: 250px; }
.user_thumbnail div.photo { background-position: center center; display: inline; float: left; left: 0px; position: absolute; text-indent: -10000px; top: 0px; z-index: 3; }

/*----------
 * ADMIN
 *---------*/
div.admin_links { margin-bottom: 20px; position: absolute; right: 20px; text-align: right; top: 160px; }
div.admin_links a { color: #ffff00; font-size: 14px; padding-left: 20px; }

/*------------
 * PAGES WITH SUBNAV
 *------------*/
div#main_column { display: inline; float: left; margin-right: 40px; width: 590px;}
div#main_column h2#comments_header span { float: none; font-weight: bold; width: auto; }
div#side_column { display: inline; float: left; width: 250px; }
div#side_column .user_thumbnail { float: left; margin-bottom: 20px; }
div#side_column ul { clear: left; float: left; margin: 0 0 20px 0; padding: 0; }
div#side_column ul li { clear: left; float: left; width: 250px; }
div#side_column ul li a { background-position: left 7px; background-repeat: no-repeat; border-bottom: 1px solid #002a3a; display: block; line-height: 30px; padding-left: 26px;  }
div#side_column ul li a.admin { border-bottom: none; }
div#side_column ul li a.active, div#side_column ul li a:hover { color: #EBF9FF; }
div#side_column ul li a span { float: right; font-weight: normal; }
div#side_column ul li a#user_bio_link { background-image: url('../images/icons/book_open.png'); }
div#side_column ul li a#user_mixes_link { background-image: url('../images/icons/cd.png'); }
div#side_column ul li a#user_events_link { background-image: url('../images/icons/date.png'); }
div#side_column ul li a#user_website_link { background-image: url('../images/icons/page_white_world.png'); }
div#side_column ul li a#user_book_link { background-image: url('../images/icons/email_open.png'); }

/*----------------
 * STANDARD LISTS
 *--------------*/
ul.big_list { border-top: 1px solid #002a3a;}
ul.big_list h2 { float: left; line-height: 1em; margin-bottom: 10px; width: 400px; }
ul.big_list li { border-bottom: 1px solid #002a3a; display: block; padding: 20px 20px; }
ul#comments li { border: none; padding: 15px 0 15px 0; }
ul#comments { border: none; }
ul#comments li.spam p { color: #666666; font-style: italic; }
ul.big_list div.description { clear: left; float: left; width: 550px; }
ul.big_list li .user_thumbnail { clear: none; display: inline; float: left; margin: 0 20px 0 0; }
ul.big_list li a.download, ul.big_list li a.admin { float: right; font-size: 14px; padding-left: 20px; }
ul.big_list li span { font-size: 14px; padding-right: 20px; }
ul.big_list li span.date { float: right; font-style: italic; padding: 0;  }
ul.big_list li span.name { font-size: 16px; font-weight: bold; line-height: 1em; }
ul.big_list li span.action_links { background-position: left 1px; background-repeat: no-repeat; padding-left: 21px; }
ul.big_list li span.downloads { background-image: url('../images/icons/download.png'); }
ul.events li span.photos { background-image: url('../images/icons/picture.png'); }
ul.big_list li span.comments, ul.events li span.comments { background-image: url('../images/icons/comment.png'); }
ul.big_list li p { margin-bottom: 0; margin-top: 7px; width: 520px; }
ul.big_list li div.name_and_body { display: inline; float: left; width: 480px; }
ul.events { padding-bottom: 30px;}
ul.events li { clear: left; float: left; margin-bottom: 20px; width: 880px; }
ul.events li a.flyer, ul.events li span.flyer { display: inline; float: left; margin-right: 30px; width: 175px; }
ul.events li span.date { display: inline; float: left; font-size: 26px; font-weight: bold; line-height: 60px; margin-right: 30px;  }
ul.events li h2 { display: inline; float: left; }
ul.events li span.event_info { display: inline; float: left; }
ul.events li span.action_links { background-position: left 1px; background-repeat: no-repeat; padding-left: 21px; padding-right: 20px; }
ul.events li span.action_links { font-size: 14px; }
ul.events li span.actions { clear: left; float: left; }
/*----------
 * ERRORS 
 *---------*/
div.errorExplanation h2 { color: #d00; font-size: 20px; line-height: 30px; margin-bottom: 0; }
div.errorExplanation p, div.errorExplanation li { color: #d00; font-size: 14px; font-weight: normal; line-height: 20px;  }
div.errorExplanation p { float: none; line-height: 30px; margin-bottom: 0; }
div.errorExplanation ul { list-style-image: url('../images/layout/small_star.png'); list-style-type: disc; margin-left: 20px; padding-left: 20px;  }
div#flash_error div, div#flash_notice div { font-size: 16px; font-weight: bold; line-height: 30px; padding: 0 20px 0 45px; margin-bottom: 20px; }
div#flash_error div { background:url('../images/icons/warning.png') no-repeat left center; color: #d00; }
div#flash_notice div { background:url('../images/icons/notice.png') no-repeat left center; color: #27AE0A; }