/* Reset */
textarea, input[type='text'] { box-sizing: border-box; }
body, ul { margin: 0; padding: 0; }
a, a:hover { text-decoration: underline; }
#top a:hover { text-decoration: none; }
.container { max-width: 1100px; margin: 0 auto; text-align: left; }
#container { padding: 0 20px 30px 20px; text-align: center; overflow: hidden; max-width: 1100px; margin: 0 auto; }
hr { background-color: #ddd; margin: 30px 0 20px 0; border: 0; height: 1px; }
h2 { font-size: 22px; margin: 0 0 10px 0; padding-top: 10px; }

/* Color Palette */
body { background-color: #fff; }
a { color: orange; }
a:hover { color: #ab0283; }
#loggedinstatus { background-color: #eee; }
#songcontainer form#thesong { padding: 20px; background-color: #eee; }

#google-center-div { display: flex!important; height: 100%; align-items: center; }

/* Fonts */
body { font-family: 'Karla', Arial, sans-serif; }
#top a, h1 span { font-family: fatfrank, sans-serif; font-weight: 400; font-style: normal; }

/* Buttons */
#editsongbtn, .form-button { letter-spacing: 1px; border-radius: 18px; background-color: #008AA7; text-decoration: none; color: #fff; text-transform: uppercase;font-weight: bold;cursor: pointer; display: inline-block; width: auto!important; border: 0; padding: 14px 30px; font-size: 14px; margin-top: 20px; }
#editsongbtn:hover, .form-button:hover { color: white; text-decoration: none; opacity: .8; }

/* Top of Screen */
#statusMessage { display: none; background-color: #ffeebb; width: 50%; padding: 10px; text-align: center; margin: 0 0 0 25%; position: absolute; border-radius-bottom-left: 10px; border-radius: 0 0 10px 10px; }
h1 { font-size: 40px; margin: 10px 0 0 0; text-align: center; }
h1 a { text-decoration: none; }
h1 span { display: block; margin-left: 312px; font-size: 22px; color: #D63D2B; }
#feedbacktab a { margin: 92px 0 0 -56px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); position: fixed; background-color: #0283ab; padding: 18px 10px 10px 10px; color: #fff; text-decoration: none; }
#feedbacktab a:hover { margin-left: -50px; background-color: #221B4F; }
#top { font-weight: normal; margin-left: 0; color: #000; padding: 18px 0; font-size: 14px; }
#top a { font-size: 62px; color: #E8812C; }
#textlinks { margin: 24px auto 0 auto; padding-bottom: 10px; border-bottom: 1px solid #ddd; text-align: center; }

/* Top Area: Ad and Logged In Status */
#firstad { padding: 10px 0; width: 100%; background-color: #efefef; padding: 0; text-align: center; }
#firstad .container { text-align: center; }
#loggedinstatus, .horizontal-ad { vertical-align: top; display: inline-block; }
.horizontal-ad { margin: 0 auto; text-align: center; width: 728px; }
#loggedinstatus { text-align: left; font-size: 13px; line-height: 17px; width: 200px; margin: 14px 0 0 0; padding: 0 20px; }
#loggedinstatus p { margin-top: 6px; }
#loggedinstatus .userphoto { width: 50px; float: left; margin-right: 20px; }

/* Navigation */
#leftnav { padding: 10px; font-size: 12px; }
.leftnavheader { display: block; padding-top: 10px; border-top: 1px solid #ddd; font-size: 16px; margin-top: 10px; margin-bottom: 10px; }
.firstnavheader { margin-top: 0; padding-top: 0; border-top: 0; }
#leftnav a { display: block; margin: 6px 0 0 0px; font-size: 16px; text-decoration: underline; }

/* Columns */
.left-column, #leftnav, .right-column { display: inline-block; vertical-align: top; text-align: left; }
.left-column { width: calc(100% - 330px); margin-right: 30px; }
.right-column { width: 300px; float: right; }

/* Stepper for Writing a Song */
.stepperline { display: none; width: 400px; height:3px; background-color: #bbb; margin-top: 23px; margin-bottom: 60px; }
.stepper { margin-right: 30px; margin-bottom: 20px; position: static; vertical-align: top; background-color: #bbb; color: #fff; border-radius: 3px; padding: 7px 10px; display: inline-block; font-size: 1rem; text-transform: uppercase; width: auto;}
.stepper.active { background-color: #0283ab; color: #eee; }

/* Step 1 */
.type-of-song label input { margin-right: 10px; }
.type-of-song label  { font-size: 16px;  }

/* Step 2 */
.question { text-align: left; margin-bottom: 20px; }
.question label { font-size: 14px; margin-bottom: 6px; }
.question-answer { padding: 10px 16px; font-family: 'Karla'; font-size: 1rem; width: 100%; border: 1px solid #ddd; display: block; }
.question-answer:focus { outline: none; border-color: #E8812C; }


/* Individual Song */
#songcontainer input { font-size: 20px; width: 100%; }
#songcontainer textarea { width: 100%; height: 400px;  }
#songcontainer form#thesong { padding: 20px; }
#songauthor { font-size: 12px; line-height: 15px; font-style: italic; }
.mysongstars { margin: 0; }
/* Comments */
#commentsheader { margin-top: 40px; }
.postedcomment { margin-bottom: 20px; }
.postedcomment span { display: block; font-size: 11px; margin-bottom: 4px; }
textarea#commentarea { height: 100px; }
/* Ratings */
#rateheader { margin-top: 40px; }
#rating { font-size: 12px; font-style: italic; }
#songcontainer .starform input { margin-right: 4px; width: 20px; height: 20px; }
.starform { display: inline; }
/* Song sharing */
#sharesongcontainer { margin-bottom: 20px; }
#sharesongcontainer a { margin-right: 10px; }
#sharethissong { margin-bottom: 6px; display: inline-block; float: left; margin-right: 10px; font-size: 16px; font-style: italic; }
/* Edit song */
#editsongbtn { margin-top: 6px; }
/* If you don't have an account - the promo */
#loginpromo { font-size: 18px; font-weight: bold; margin-bottom: 20px; background-color: #feb; padding: 0 10px 10px 10px; }

/* General stars styling */
.emptystar { cursor:pointer; margin-right: 4px; width: 20px; height: 20px; background-image: url(images/starempty.png); display: inline-block; }
.filledstar { cursor:pointer; margin-right: 4px; width: 20px; height: 20px; background-image: url(images/starfull.png); display: inline-block; }
span.emptystar, span.filledstar { cursor:auto;}

/* User styles */
#myTable .userphoto { width: 50px; padding: 2px; margin-right: 20px; float: left; }
.userphoto { padding: 6px; border: 1px solid #ddd; }

/* List/archive pages */
#myTable { width: 100%; }
.left-column #featuredsongs { padding-left: 0; }
#featuredsongs li { min-height:65px; padding: 10px 10px 10px 90px; background: transparent url('images/musicnote.png') no-repeat scroll 5px 5px; list-style: none; border: 1px dashed #ccc; margin-bottom: 10px; display: block; }
#featuredsongs li a.songtitle { display: block; }
#featuredsongs li span.description { font-size: 11px; display: block; font-style: italic; }
#featuredsongs .filledstar, #featuredsongs .emptystar { margin: 6px 0; }

/* General middle column styling */
.left-column label { font-size: 1rem; margin-top: 20px; display: block; }
.left-column label input[type=radio] { margin-right: 10px; }
.left-column input.text, .left-column textarea { width: 300px; border: 1px solid #ddd; font-size: 13px; padding: 4px; }
.left-column textarea { height: 200px; width: 400px; }
.left-column ul { padding-left: 12px; }
.left-column ul li span { margin-top: 4px; }
.left-column p { line-height: 22px; font-size: 16px;  }

/* Feedback Form */
#feedbackform { margin: 0; padding: 0; }
#feedbackform li { list-style: none; margin: 0; }
#feedbackform li input { margin-right: 10px; }
#feedbackform textarea { display: block; width: 400px; height: 150px; }

/* User profile - edit */
#biotextarea { margin-bottom: 10px; }

/* Community page */
.community { width: 856px; margin-right: 0; display: inline-block; vertical-align: top; font-size: 14px; text-align: left; }
.community tr td { border-bottom: 1px solid #ddd; padding: 10px 10px 10px 0; }

/* Footer */
#bottom { background-color: #efefef; width: 100%; height: 90px; padding: 10px 0; }
#bottom .container { text-align: center; }
.footernotes { text-align: center; margin: 30px 0; line-height: 18px; font-size: 12px; }


@media (max-width: 1020px) {
	.horizontal-ad, .right-column { display: none; }
}

@media (max-width: 700px) {
	.horizontal-ad, .right-column { display: none; }
}

@media (max-width: 600px) {
	#top a { font-size: 32px; }
	h1 span { margin-left: 0; }
	.left-column { margin-right: 0; width: 100%; }
	.stepperline { display: none; }
	.stepper { display: block; width: calc(100% - 20px); margin-top: 0; margin-bottom: 8px; }
}