/***********************************************/
/* GS Phase 2 Front End Stylesheet             */
/* Style: deafult                              */
/* Author(s): Vishal Agarwala, Joseph Kelly    */
/* Name: organs                                */
/* Purpose: Supplemental Structure             */
/* Derived For: Home
/***********************************************/

/* Standards */
body{margin: 0 auto; color:#304c65;}
h2{font-size: 24px; color: #2c4051; margin-bottom: 15px; font-weight:bold;}
h3{color: #8d9dab; font-size: 18px; font-weight:bold;}
p{color: #304c65; font-size: 12px;}

#mainContent div.wide{width: 620px; float:left;}
#mainContent div.side{width: 300px; float:right; background: url(images/sidebar_top.png) no-repeat top left #ebf2f8;}
#mainContent div.side h3 {font-weight: normal; margin-bottom: 15px;}
#mainContent div.side a {color:#CC0000/*#406577*/;}

.required{color:red; font-weight:bold;}
ul.arrow {margin: 0;}
ul.arrow li{background: url(images/icons/arrow_bullet.gif) no-repeat top left; margin: 0 0 10px 0; font-size: 12px; padding-left: 20px; line-height: 12px;}
ul.arrow li.required{ color:red; background: url(images/icons/arrow_bullet_red.gif) no-repeat top left;}
ul.arrow li ul {margin-top: 10px;}

.hrBlue {width:582px; height:2px; background:transparent url(images/hr_blue.png) no-repeat; margin:20px auto;}
.hrBlueShort {width:270px; height:1px; background:#B4CEDB; overflow:hidden; margin-left:15px; margin-top:10px;}

/* Widebar settings */
div.wide div.first{margin-top:0; padding-bottom: 15px; border-bottom: 1px solid #ebf2f8;}
div.wide div.middle{padding: 15px 0; border-bottom: 1px solid #ebf2f8;}
div.wide div.last{padding: 15px 0;}
div.wide h3{color: #19252f; margin:  0 0 15px 0;}

/*Sidebar settings */
div.side .first{border-bottom: 1px solid #b4cedb; margin: 0 15px; padding: 15px 0;}
div.side .middle{ border-top: 1px solid #fff; border-bottom: 1px solid #b4cedb;  margin: 0 15px; padding: 15px 0; width:270px;}
div.side .last{border-top: 1px solid #fff; margin: 0 14px; padding: 15px 0;}
div.side p{padding:5px 30px; font-size:12px;}
div.side p strong {font-weight:700;}

div.alert{border: 1px solid #e6db55 !important; background: #fffbcc; padding:15px !important; font-size: 16px; font-weight:bold; margin: 15px 0;}

/* Sub-navigation */
ul.subNav{margin: 0 15px; padding: 15px 0; border-bottom: 1px solid #b4cedb; width:270px;}
ul.subNav li{font-weight: bold; font-size: 14px;}
ul.subNav li a{display:block; height: 33px; margin-bottom: 2px; color: #406577;}
ul.subNav li a:hover, ul.subNav li a.active{background: url(images/subNav/hover.png) no-repeat; margin-bottom: 2px;}
ul.subNav li a span{display:block; line-height: 34px; text-indent: 15px;}
ul.subNav li a.active span{ background: url(images/subNav/activeArrow.png) no-repeat 10px 10px; padding-left: 15px;}

/* Account Forms - sidebar */
#accountForms{margin: 0 14px; width:270px;}
#accountForms h3{color: #406577; margin: 0 0 5px 0;}
#accountForms p{color:#85a8b9; font-size: 12px; margin-bottom: 15px;}

.side .accountForm ul{}
.side .accountForm ul li{height: 38px; background: url(images/forms/input_text_sidebar.png) no-repeat; margin-bottom: 5px; position:relative; color: #7ba3b6; text-align:center;}
.side .accountForm ul li label{font-weight:bold; font-size: 14px; text-indent: 10px; line-height: 36px; display:block; float:left; width: 100px; color:#5c7c98;}
.side .accountForm ul li input{float:left; width: 148px; background: none; border:none; margin: 10px; font-size: 14px; color: #7ba3b6; letter-spacing:1px;}

.side .accountForm .button {margin: 10px 0 0 0; text-align: center;}
.side .accountForm button.joinnow {background: url(images/forms/joinNow.png) no-repeat; width: 134px; height: 42px; margin: 0 auto;}
.side .accountForm button.joinnow:hover {background-position: bottom left;}
.side .accountForm button.joinnow span {display:none;}
.side .accountForm button.submit {background: url(images/forms/submit.png) no-repeat; width: 100px; height: 43px;}
.side .accountForm button.submit:hover {background-position: bottom left;}
.side .accountForm button.submit span {display:none;}

/* Account Forms - widebar */
.wide form{background: #ebf2f8; padding: 15px 14px; margin: 0 0 25px 0;}
.wide form ul li{position: relative; background: url(images/forms/input_text_widebar.png) no-repeat; margin-bottom: 5px; color: #7ba3b6; clear:both; width: 100%; height: 38px;}
.wide form ul li.selectBox{position: relative; background: url(images/forms/input_select_widebar.png) no-repeat; margin-bottom: 5px; color: #7ba3b6; clear:both; width: 100%; height: 38px;}
.wide form ul li.oops{background: url(images/forms/input_text_widebar_oops.png) no-repeat;}
.wide form ul li.oops label {}
.wide form ul li .oopsDescription {height:20px; color:#c32424; font-weight:700; font-size:12px; padding: 4px 0 0 25px; margin: 0 0 0 195px; background:url(images/icons/oops.png) no-repeat;}
.wide form ul li.errorMessage{background: transparent;}
.wide form ul li label{font-weight:bold; font-size: 14px; text-indent: 10px; line-height: 36px; display:block; float:left; width: 195px; color:#5c7c98;}
.wide form ul li label#tos{font-size:12px; width:auto; font-weight:normal; text-indent:2px;}
.wide form ul li label#tos a{color:#4c99db; font-weight:700;}
.wide form ul li input{float:left; width: 375px; background: none; border:none; margin: 10px; font-size: 14px; color: #7ba3b6; letter-spacing:1px;}
.wide form ul li select {margin:0; width:395px; height:30px; padding:7px 5px 5px 5px; font-size:14px; font-weight:700; font-family:Helvetica, Arial, sans-serif; color:#26333f;}

.wide form ul li.area{background: url(images/forms/input_area_widebar_middle.png) repeat-y; height:auto;}
.wide form ul li.area label{display:block; float:none; background: url(images/forms/input_area_widebar_top.png) no-repeat top left; width: 100%;}
.wide form ul li.area textarea{width: 96%; background: transparent; border:none; height: 150px; margin: 0% 2%; display:block; clear:both; display:block; color: #7ba3b6; letter-spacing:1px;} 
.wide form ul li.area .bottom{clear:both; background: url(images/forms/input_area_widebar_bottom.png) no-repeat bottom left; height: 7px;}
.wide form button.submit {background: url(images/forms/submit.png) no-repeat; width: 100px; height: 43px; margin:0 auto; display:block;}
.wide form button.submit:hover {background-position: bottom left;}
.wide form button.submit span {display:none;}

/* Notification Box */
#notificationBox {border:1px solid #B4CEDB; background:#EBF2F8; padding:20px; margin-bottom:20px;}
#notificationBox p {margin:0;}

/* Search */
#mainContent #search{background: url(images/search.png) no-repeat left center; width: 630px; padding:22px 0; margin: 0 auto; position:relative; left:-8px;}
#mainContent #search input{font-size: 24px; font-weight: bold; color: #37526d; padding:7px 0; width: 560px; border:none; background:none; margin-left:40px;}

/* Flash Player - for features */
.flashPlayer{margin: 0 0 40px 0; padding: 15px; background: #ebf2f8;}
.flashPlayer h3 {margin-top:20px;}
.flashPlayer p {margin:10px 0 0 0 !important; color:#304c65;}
.flashPlayer .videowithtext {margin:0 0 20px 0;}

/***********************************************/
/* Quotes Sidebar                     		  	*/
/***********************************************/
#quotes_list{height: 300px; position:relative;}
#quotes_list li{display:none; position: absloute;}
#quotes_list li.active{display:block;}


/***********************************************/
/* Features Pages                     		  	*/
/***********************************************/
ul.featureList{ margin: 0 0 20px 0;}
ul.featureList li{border-bottom: 1px solid #ebf2f8; padding: 20px 0 0 0; clear:both;}
ul.featureList li.first {padding-top: 0;}
ul.featureList li.last {border-bottom: none;}
ul.featureList li .feature{float: right; width: 350px; margin-bottom: 20px;}
ul.featureList li .feature h3{color: #19252f; margin: 5px 0 10px 0;}
ul.featureList li .feature p{color: #304c65; font-size: 12px; line-height: 20px;}
ul.featureList li .imageWrapper{float: left; width: 250px; height: 175px; margin-bottom: 20px;}
ul.featureList li .image{border: 1px solid #cbd6df;}
ul.featureList li .image img{margin: 5px; width: 235px; height: 160px;}
ul.featureList li .feature a.videoTour{background: url(images/icons/videoTourButton.png) no-repeat top left; height: 30px; width: 133px; display:block; margin-top: 20px;}
ul.featureList li .feature a.videoTour span{display:none;}
ul.featureList li .feature a.videoTour:hover{background-position: bottom left;}

/* Movies */
h3.movies{background: url(images/icons/movie.png) no-repeat top left; padding: 0 0 10px 50px;}
ul.videos{margin: 0 0 30px 50px;}
ul.videos a {color:#304c65 ;}

#interested{background: url(images/footer_blue.png) bottom center no-repeat #ebf2f8; padding: 15px; margin: 0 0 20px 0;}
#interested h3{color: #19252f;}
#interested p{color: #304c65; font-size: 12px; line-height: 18px; margin: 10px 0;}
#interested a.join{width: 124px; height: 35px; background: url(images/icons/joinButton.png) no-repeat; display:block; float:right; margin: 20px 10px 0 15px;}
#interested a.join span{display:none;}
#interested a.join:hover{background-position: bottom left;}




#trust {background: #ebf2f8; margin: 15px 0;}
#trust h3 {background: url(images/home/trust_top.png) no-repeat; padding: 15px 15px 0 15px; margin: 0 0 10px 0; color: #2c4051; text-align:center; font-size: 18px; font-weight: bold; line-height: 22px;}
#trust .topquote {background: url(images/icons/topQuotes.png) no-repeat top left; height: 15px; margin: 0 15px 5px 15px;}
#trust .topquote span {display:none;}
#trust .quote {font-style: italic; height:120px; vertical-align: middle; display: table-cell; font-size: 14px; line-height: 20px; text-align:center; color: #406577; padding: 0 30px 0 30px;}
#trust table {height:120px;}
#trust table tr td {font-style: italic; font-size: 14px; line-height: 20px; text-align:center; color: #406577; vertical-align: middle; padding: 0 15px;}
#trust .bottomquote {background: url(images/icons/bottomQuotes.png) no-repeat top right; margin: 0 15px 0 15px;}
#trust .bottomquote span {display:none;}
#trust .bottomquote p.person {padding: 15px 0 0 0;}
#trust .clear{background: url(images/home/trust_bottom.png) no-repeat; height: 75px;}
#trust #quotes_list {height: 195px !important;}
#trust ul.quotes ul.companies li.company{margin: 5px; float:left;}
#trust ul li.love {padding-left: 15px;}

#trust.sidebar {margin:0; width:270px;margin: 0 15px 0 15px; padding-bottom: 0px;}
#trust.sidebar ul {}
#trust.sidebar .topquote {margin: 0px;}
#trust.sidebar table {height:160px;margin: 0px; padding: 0 15px 0 15px; width:100%;}
#trust.sidebar .bottomquote {margin: 0px; clear:both;}
#trust.sidebar #quotes_list {height: 225px !important;}


.megaphone {background: url(images/sidebar_trust_footer.png) no-repeat; height: 85px;}


/***********************************************/
/* About Pages                     		  		*/
/***********************************************/
.headHoncho{height: 200px; background: url(images/about/headHoncho_right.png) no-repeat right center #222b32; width: 100%; margin: 15px 0;}
.headHoncho .photo{float: left; width: 250px;}
.headHoncho .about{text-align:center; color:#fff; float:left; width: 370px;}

/*
.vcard .about h2.fn{color: #fff; font-size: 28px; text-align:center; margin:15px 0 5px 0;}
.vcard .about h3.title{color: #86a8c6; font-size: 16px; text-align:center;}
#mainContent .vcard .about p{color: #fff; font-size: 13px; text-align:center; margin: 15px;}
.vcard .about a{width: 152px; height: 30px; background: url(images/about/profileButton.png) no-repeat; display:block; margin: 0 auto; margin-top: 15px;}
.vcard .about a span{display:none;}
*/

ul.employees {padding: 30px 0 0 0;}
ul.employees li.vcard {display: block; float: left; width:620px;}
ul.employees li.vcard .photo {width:150px; height:150px; float: left; margin: 0 0 30px 0;}
ul.employees li.vcard .aboutWrapper {background: url(images/vcard_bg.png) repeat-y #19252f; width:470px; float: right; margin: 0 0 30px 0;}
ul.employees li.vcard .about {background: url(images/vcard_top.png) no-repeat; padding: 6px 15px 6px 25px;}
ul.employees li.vcard .about h2 {color: #fff; font-size: 20px; margin:15px 0 5px 0; font-weight: normal;}
ul.employees li.vcard .about h3 {color: #86a8c6; font-size: 14px; font-weight: normal;}
ul.employees li.vcard .about p {color: #FFFFFF; font-size: 12px; font-weight: normal; line-height: 18px;}
ul.employees li.vcard .about ul {clear:both;}
ul.employees li.vcard .about ul li {list-style: none;}
ul.employees li.vcard .about ul li a {font-size: 12px; color:#86a8c6; line-height: 16px; margin: 0 15px 0 0; padding: 0 0 0 20px; float:left;}
ul.employees li.vcard .about ul li.email a{background:url(images/icons/mail.png) center left no-repeat;}
ul.employees li.vcard .about ul li.blog a{background:url(images/icons/blog.png) center left no-repeat;}
ul.employees li.vcard .about ul li.grooveshark a{background:url(images/icons/grooveshark.png) center left no-repeat;}
ul.employees li.vcard .aboutWrapper .bottom{background: url(images/vcard_bottom.png) bottom left no-repeat; height:10px; clear:both;}

/*
ul.lackeys{margin: 15px 0;}
ul.lackeys li{height: 400px; width: 196px; margin: 0 15px 15px 0; background: url(images/about/profile_bottom.png) no-repeat bottom center #222b32; float:left; position:relative;}
ul.lackeys li.last{margin-right: 0;}
ul.lackeys li .about{text-align: center; color: #fff;}
ul.lackeys li .about h2.fn{color: #fff; font-size: 20px; text-align:center; margin:15px 0 5px 0;}
ul.lackeys li .about h3.title{color: #86a8c6; font-size: 14px; text-align:center;}
ul.lackeys li .about p{font-size: 12px; margin: 15px;}
ul.lackeys li .about .grooveshark_profile{position:absolute; bottom: 20px; left: 22px;}
*/

/***********************************************/
/* Jobs Pages                     		  		*/
/***********************************************/
ul li.job{background: #ebf2f8; padding: 15px; margin-bottom: 30px; line-height: 20px;}
ul li.job h2{padding-bottom: 15px; border-bottom: 1px solid #a8bbcb;}
ul li.job h4{font-size: 14px; font-weight:bold; margin: 0 0 15px 0;}

/***********************************************/
/* Home Page                                   */
/***********************************************/
#splash{height: 350px; background: #000000; margin-bottom: 15px; position:relative; color: #fff;}
#splash h2{display:none;}
#splash h3{display:none;}

#search{background: url(images/home/search.png) no-repeat left center; width: 970px; padding:22px 0; margin: 0 auto; position:relative;}
#search input{font-size: 24px; font-weight: bold; color: #37526d; padding:7px 0; width: 900px; border:none; background:none; margin-left:40px;}

#home #mainContent div.wide{width: 600px; float:left;}
#home #mainContent div.side{width: 335px; float: right; background-color: #fff;}

#about{background: #ebf2f8; padding: 15px;}
#about h2{font-size: 24px; color: #2c4051;}
#about p{color: #8d9dab; font-size: 18px;}
#about ul{padding: 20px 20px 1px 20px; background: #fff; margin: 0;}
#about ul li{margin-bottom: 20px; padding: 0 0 0 50px;}
#about ul li.listen{background: url(images/home/play.png) no-repeat 0 1px;}
#about ul li.paid{background: url(images/home/cash.png) no-repeat 0 1px;}
#about ul li.social{background: url(images/home/social.png) no-repeat 0 0;}
#about ul li h3{color: #37526d; font-size: 20px;margin:  0 0 3px 0;}
#about ul li h4{font-size: 12px; color: #8399a4;}

#about ul.more{background: none; margin:15px 0 0 0; padding:0; height: 35px;}
#about ul.more li{display:inline; margin:0; padding:0;}
#about ul.more li a{float:left; height: 35px; display:block; margin-right: 15px;}
#about ul.more li a span{display:none;}
#about ul.more li.tour a{width: 155px; background: url(images/home/tourButton.png) no-repeat;}
#about ul.more li.join a{width: 109px; background: url(images/home/joinButton.png) no-repeat;}
#about ul.more li a:hover{background-position:bottom left;}


/***********************************************/
/* Join                                        */
/***********************************************/

#join input, #join textarea {font-weight:700; color:#26333f; font-size:14px; line-height:1.2em;}

#join button.submit {background: url(images/forms/submit.png) no-repeat; width: 100px; height: 43px; margin:0 auto; display:block;}
#join button.submit:hover {background-position: bottom left;}
#join button.submit span {display:none;}
#join #registerProgress {height:134px; border-bottom:1px solid #bad1e4; background:#fff; margin-bottom:30px;}
#join #registerProgress li {width:205px; height:134px; display:inline; float:left;}
#join #registerProgress span {display:none;}
#join #registerProgress #one {background:url(images/registerProgress_one_active.png) no-repeat;}
#join #registerProgress #one.error {background:url(images/registerProgress_one_error.png) no-repeat;}
#join #registerProgress #one.complete {background:url(images/registerProgress_one_complete.png) no-repeat;}
#join #registerProgress #two {background:url(images/registerProgress_two.png) no-repeat;}
#join #registerProgress #two.active {background:url(images/registerProgress_two_active.png) no-repeat;}
#join #registerProgress #two.error {background:url(images/registerProgress_two_error.png) no-repeat;}
#join #registerProgress #two.complete {background:url(images/registerProgress_two_complete.png) no-repeat;}
#join #registerProgress #three {background:url(images/registerProgress_three.png) no-repeat;}
#join #registerProgress #three.complete {background:url(images/registerProgress_three_complete.png) no-repeat;}
#join .blue {background-color:#ebf2f8; padding:15px; position:relative;}
#join .blue h3 {color:#566a7b; margin:15px 0;}
#join .osIconBig {width:128px; height:125px; float:left; margin-right:15px;}
#join .appleBig {background:url(images/osIconBig_apple.png) no-repeat;}
#join .windowsBig {background:url(images/osIconBig_windows.png) no-repeat;}
#join .linuxBig {background:url(images/osIconBig_linux.png) no-repeat;}
#join .osIconSmall {width:37px; height:36px; position:absolute; top:15px; right:15px;}
#join .appleSmall {background:url(images/osIconSmall_apple.png) no-repeat;}
#join .windowsSmall {background:url(images/osIconSmall_windows.png) no-repeat;}
#join .linuxSmall {background:url(images/osIconSmall_linux.png) no-repeat;}
#join .download {display:block; width:182px; height:42px; background:url(images/downloadNow.png) no-repeat; margin-left:140px;}
#join ul.datas {font-size:12px; margin-left:145px;}
#join ul.datas li {margin-bottom:5px;}
#join ul.links {font-size:12px; font-weight:700; margin-top:20px; margin-left:143px;}
#join ul.links li {display:inline; float:left; background:url(images/icons/arrow_bullet_bluebg.gif) no-repeat right; padding-right:15px; margin-right:20px;}
#join .hrBlue {margin:15px 0; background:url(images/forms/HL.png) no-repeat right; height:2px; overflow:hidden; width:100%;}
#join #enter {display:block; width:396px; height:81px; background:url(images/join_enterGrooveshark.png) no-repeat; margin:0 auto;}
#join .hrPerforated {width:100%; height:13px; background:url(images/hr_perforated.png);}
#join #osHeader {width:37px; height:36px; float:left; margin-right:10px;}
#join .notOp {background:url(images/icons/arrow_bullet.gif) no-repeat right; padding-right:15px; font-weight:700; font-size:12px; margin-top:5px; padding-top:2px;}

#join span.overspan {display:none;}
#join span.overspan-apply {position:absolute; top: 11px; left:204px; z-index:1; font-size:14px; font-weight:700; color:#ccc;}
#join span.overspan-hide {position:absolute; display:none;}

#join ul.installSteps{margin: 30px 0 20px 0;}
#join ul.installSteps li{border-bottom: 1px solid #ebf2f8; padding: 20px 0 0 0; clear:both;}
#join ul.installSteps li.first {padding-top: 0;}
#join ul.installSteps li.last {border-bottom: none;}
#join ul.installSteps li .step {float: right; width: 350px; margin-bottom: 20px;}
#join ul.installSteps li .step h3{color: #19252f; margin: 5px 0 10px 0;}
#join ul.installSteps li .step p{color: #304c65; font-size: 12px; line-height: 20px;}
#join ul.installSteps li .imageWrapper{float: left; width: 250px; height: 175px; margin-bottom: 20px;}
#join ul.installSteps li .image{border: 1px solid #cbd6df;}
#join ul.installSteps li .image img{margin: 5px; border: 1px solid #2c2c2c; width: 235px;}

#join .progressNav {margin-bottom:30px; height:49px;}
#join .progressNav li {}
#join .progressNav .back a{float:left; display:block; width:108px; height:49px; background:url(images/progressNav_back.png) no-repeat;}
#join .progressNav .continue a{float:right; display:block; width:154px; height:49px; background:url(images/progressNav_continue.png) no-repeat;}
#join .progressNav .skip a{float:right; display:block; width:108px; height:49px; background:url(images/progressNav_skip.png) no-repeat;}

/***********************************************/
/* Downloads                                 */
/***********************************************/
li.notice{background: #fffbcc; border-bottom:1px solid #e6db55; padding: 4px; font-weight:bold;}


/***********************************************/
/* Labels                                        */
/***********************************************/
#agreementWrapper{height: 300px; overflow:auto; margin-bottom:30px;}
#agreement{padding: 15px;}
#license_agreement input {color:#26333F; font-weight:700;}