/* ABOUT  
/* Main CSS styles for Joma Music, jomamusic.com
/* By Jeff Schram, SchramIndustries.com
*/

/* COLORS

b5e0f4 Blue 0 (lightest)
5bb5e6 Blue 1
007bbe Blue 2
00518d Blue 3 (darkest)

0065ac LOGO BLUE
ff4e00 Orange
ff007a Pink
f0f0f0 Off-white
*/

/* IE Image resizing */
img { -ms-interpolation-mode: bicubic; }

a img { border: none; outline: none; text-decoration: none; }

/* BODY */
body { background: white; color: #111; font-size: 62.5%;font-family: "helvetica neue", helvetica, sans-serif; text-align: center; }
#wrap { width: 910px; margin: 0 auto 20px; text-align: left;}

h1, h2, h3, h4 { color: #0065ac; }

h1  {font: bold 2em/2.2em "helvetica neue", helvetica, sans-serif; }
h2  {font: bold 1.6em/1.8em "helvetica neue", helvetica, sans-serif; }
h3  {font: bold 1.2em/1.4em "helvetica neue", helvetica, sans-serif; }
h4  {font: bold 1em/1.2em "helvetica neue", helvetica, sans-serif; }

/* HEADER  */
header { padding: 20px 0; }
header h1 {float: left; display: inline-block; margin-left: -10px; width: 120px; height: 120px; background: url(../images/joma-logo.jpg); text-indent: -9999px;  } 

header #header-tweet { display:inline-block; float: left; width: 450px; color: #5bb5e6; font-size: 12px; font-weight: 500; margin-left: 20px;   }
header #header-tweet a { color: #5bb5e6; }
header #header-tweet dl { width: 500px; }
header #header-tweet dt a {text-decoration: none; color: #ff4e00; }
header #header-tweet dt span { line-height: 11px; height: 11px; color: #ff007a; font-size: 16px; }
header #header-tweet dd li { list-style-type: none; }
header #header-tweet dd span.separator { display: block; line-height: 11px; height: 11px; color: #ff007a; font-size: 16px; }

header #header-links { display: inline-block; float: right; text-align: left; color: #5bb5e6; font-size: 12px; font-weight: 500;}
header #header-links h3 { font-size: 17px; }
header #header-links p { font-size: 1.35em; line-height: 1.45; }
header #header-links a {color: #5bb5e6; text-decoration: none; font-size: 1em; }
header #header-links a:hover {color: #ff007a; }
header #header-links span.separator { display: block; line-height: 11px; height: 11px; color: #ff007a; font-size: 16px; }


/* PAGE WRAP  */
#page-wrap { position: relative; min-height: 660px;}


/* HOME  */
#circle-home, #circle-joma-records {width: 517px; height: 652px; position: absolute; top: 0; }

#circle-home { left: -62px; }
#circle-joma-records { right: -62px;}


/* MAIN CONTENT  */
#main-content { float:left; width: 675px; }
#content { display: none; }

#loading { position: absolute; top: 100px; left: 50%; display: none; }

/* SECTION */
section { padding-top: 10px; }
 a { color: #007bbe; text-decoration: none;}
#contents a:hover { color: #ff007a;}
#contents p { font-size:1.3em; line-height: 1.6em; margin-bottom: 2em; }
#contents h2.page-title { font-size: 3em; color: #0065ac; margin-bottom: 15px;}



/* HOME-FEATURED */
#home-featured { margin-bottom: 0;}
#home-featured a, #home-featured a img { border: 0; outline: 0; }
#home-featured a { display: block; }
#home-cycler li { list-style-type: none; }

/* home-search-form */
#home-search-form { padding: 10px; border: 3px solid #00518d; background: #F8F8F8; margin: 10px 0 0;}
#home-search-form label { display: inline-block; font: 18px/30px "helvetica neue",helvetica,sans-serif; text-transform: uppercase;}

*+html #home-search-form label { font: 22px/30px "helvetica neue",helvetica,sans-serif;}

#home-search-form .colon { display: block; color: #ff007a; font: bold 24px/30px helvetica, sans-serif; padding: 0 10px 0 3px; }

#home-search-form input[type='text'] { display: inline-block; height: 24px; font: normal 15px/30px "helvetica neue",helvetica,sans-serif; border: 3px solid #ff4e00; color: #000; padding: 0 5px; width: 315px; -webkit-appearance: none;}
#home-search-form input[type='submit'] {text-transform: uppercase; display: inline-block; text-decoration: none; padding: 0 5px; border: 3px solid #ff4e00; color: #ff007a; font: bold 20px/25px "helvetica neue",helvetica,sans-serif; text-align: center; margin-left: 10px; height: 30px; background: white; -webkit-appearance: none;}
#home-search-form input[type='submit']:hover { background: #ff007a; color: white; }


#home-content table#home2 { border-collapse: collapse; margin-bottom: 40px; }

#home-content table#home2 td h3 { margin: 0 0 0 85px; }
#home-content table#home2 td p { margin: 0 0 0 85px; }
#home-content table#home2 td a.home2-img { float: left;  }
#home-content table#home2 td a.home2-img img { width: 70px; height: 70px }

#home-content table#home2 td.row-first { border: 3px solid #007bbe; background: #f8f8f8; padding: 10px; }
#home-content table#home2 td.row-second { border: 3px solid #5bb5e6; background: #f8f8f8; padding: 10px; }
#home-content table#home2 td.row-third { border: 3px solid #b5e0f4;  background: #f8f8f8; padding: 10px; }
#home-content table#home2 td.spacer { border-top: 2px solid white; border-bottom: 3px solid white; background: white;}
#home-content table#home2 td.spacer-h { width: 100%; color: white; height: 8px; background: none; border: none;}

.section-row { overflow: hidden; }
.section-col { width: 330px; }
.section-col-l { margin-right: 14px; float: left;}
.section-col-r { float: right; }
.section-col-full { width: 100%; }

.section-col-half .section-col-box {padding: 10px; margin-bottom: 10px; overflow: hidden; border: 3px solid #007bbe; background: #f0f0f0; }
.section-col-half .section-col-box {padding: 10px; overflow: hidden; height: 185px; border: 3px solid #007bbe; background: #f8f8f8; }
.section-col-half .section-col-box h3 { padding-left: 10px; color: black; }
.section-col-half .section-col-box p {padding-left: 10px; margin-bottom: 0;}
.section-col-half .section-col-box img {width: 70px; height: 70px; float:left;}
.section-col-half .section-col-box td { vertical-align: top;}

.section-col-full .section-col-box {margin-bottom: 30px; padding-bottom: 30px; overflow: hidden;  background: none;  }
.section-col-full .section-col-box h3 { padding-left: 10px; text-align: left; font: normal 2em/1em ""helvetica neue", helvetica", sans-serif; margin-bottom: 5px;}
.section-col-full .section-col-box p {padding-left: 10px; margin-bottom: 0; margin-right: 25px;}
.section-col-full .section-col-box img {width: 70px; height: 70px; float:left;}
.section-col-full .section-col-box table { width: 100%; }
.section-col-full .section-col-box td { vertical-align: top;}
.section-col-full .section-col-box div { font: normal 12px/16px sans-serif !important; background: none !important; padding: none !important; }

section.second .section-col-box { border: 3px solid #5bb5e6; }
section.third .section-col-box { border: 3px solid #b5e0f4; }


/* ARTISTS AND WRITERS */
#artist-writer-content img { width: 180px; height: 180px; margin: 0 20px 20px 0; display: inline; float:left;}
.section-detail img { float: left; margin: 0 30px 30px 0; }

/* SONG SEARCH */
#song-search-form { padding: 20px; margin-bottom: 20px;  }
#song-search-form p { margin: 10px 0; font-size: .9em; }
#song-search-form table td { vertical-align: top; padding: 10px;}
#song-search-form label { font-weight: bold; font-size: 1.2em; }

/* SONG LIST */
#song-list .section-col-full .section-col-box {padding: 10px; margin-bottom: 10px; overflow: hidden; border: 3px solid #007bbe; background: #f8f8f8;  }
#song-list .section-col-full .section-col-box h3 { padding-left: 10px; font-weight: bold; font-size: 1.2em;}
#song-list .section-col-full .section-col-box p {padding-left: 10px; margin-bottom: 0; font-size: 1em;}
#song-list .section-col-full .section-col-box img {width: 50px; height: 50px; float:left;}
#song-list .section-col-full .section-col-box td { vertical-align: top;}

.data-table td.song-title { font-size:96%; }

.paypal-form { padding: 0; margin: 0; border: 0; }

.button { display: block; padding: 3px 8px; background: #ff007a; color: white; margin-bottom: 3px; text-decoration: none; white-space: nowrap; border: 0; width: 90px; }
.button.large { width: 255px; font-size: 13px; padding: 8px 0 3px 5px; text-align: left; }
a.button.large { width: 250px; }

.button:hover { background: #ff4e00; color: white !important; }
input.button { width: 100%; text-align: left; }

/* RELEASES */

#releases-content td a { display: block; }
#releases-content td img {width: 250px; height: 250px; margin:0 20px 20px 0; border: 1px solid red; }
#releases-content td { vertical-align: top;}
#releases-content p { padding-right: 20px; }

/* LICENSING */
#license-form { border: 3px solid #00518d;  overflow: hidden; background: #f8f8f8; margin-bottom: 20px; padding: 20px; }
#license-form table { }
#license-form .mand { color: #ff007a; display: none;  }
#license-form div.mand { padding: 20px 0; font-weight: bold; }
#license-form label { font: bold 15px/20px sans-serif; height: 20px; width: 80px; padding-right: 10px; color: #ff007a; text-align: right; }
#license-form input, #license-form textarea { font: bold 13px/20px sans-serif; height: 18px; padding: 1px 5px; border: 3px solid #ff4e00; color: #000; margin-bottom: 20px;  width: 300px;}

#license-form label.checkbox-label { color: black; width: auto; text-align: left; }
#license-form input[type='radio'], #license-form input[type='checkbox'] { width: auto; display: inline-block; margin: 0 7px 0 0; height: 20px; }
#license-form input[type='submit'] { width: auto; color: white; height: auto; border: none; }
#license-form textarea { height: 50px; }


/* NAV  */
nav { padding: 0 0 10px; }
body#splash nav { display: none; }
nav table { width: 100%;}
nav table td { }
nav table td a {text-transform: uppercase; display: block; text-decoration: none; padding: 4px 0; margin: 3px; border: 3px solid #ff4e00; color: #ff007a; font: bold 10px sans-serif; text-align: center; }
nav table td a:hover, nav table td a.on { color: #fff; background: #ff007a; }
nav table td a:active { color: #fff; background: #ff4e00; border: 3px solid #ff007a;}
nav table td a.first { margin-left: 0; }
nav table td a.last { margin-right: 0; }



/* ASIDE */
aside { float: right; width:215px; }


#player-wrap { border: 3px solid #00518d;  overflow: hidden; background: #f8f8f8; margin-bottom: 20px; position: relative; }

#nowplaying {padding: 10px 0 10px 10px; overflow:hidden; }
.nowplayingtext { padding: 0 10px 0 0;}
.nowplayingtext img { margin: 0 10px 10px 0; display: block; float: left;}
.nowplayingtext a { color:#ff007a; text-decoration: none; }
.nowplayingtext a:hover { color:#ff4e00;}
.nowplayingtext a#info { display: inline-block; padding: 3px 6px; text-transform: uppercase; color: white; background: #ff007a; width: 80px; font-weight: bold; margin-top: 3px;}
.nowplayingtext a#info:hover { background: #ff4e00; }

.nowplayingtext h4 a { color: #0065AC !important; }

#releases {min-height: 415px; clear:both; overflow: hidden; padding: 10px 0; border: 3px solid #8dd0f0; background: #f8f8f8; }
#releases h2 {padding: 0 0 0 10px;}

.releasebox {display: inline-block; width: 80px; margin: 0 0 10px 10px; float: left; }
.releasebox a { display: inline-block; text-decoration: none; color: black;}
.releasebox a:hover, .releasebox a:hover h3 { color: #ff007a;}
.releasebox a img { width: 80px; height: auto; }

aside #player { margin: 0 0 10px 10px;}

#jquery_jplayer { margin-top: 180px; margin-left: 20px;  }
#jquery_jplayer p { width: 200px; color: red; }


/* FOOTER */
footer, footer p, footer a { color: #ff007a; }


/* MISC */
a, a img { border: none; outline: none; }


/* PAYPAL */
#paypal-wrap { text-align: left;}
#paypal-wrap h3 { font-size: 18px; margin-bottom: 5px; }
#paypal-wrap table { width: 100%; margin: 20px 0 40px; }
#paypal-wrap table th { font-size: 14px; text-align: left;  border-bottom: 1px solid #888; padding: 10px 5px;}

#paypal-wrap table td { font-size: 15px; line-height: 18px; color: #777; padding: 10px 5px; border-bottom: 1px dashed #eee;}

#paypal-wrap table tfoot { border-top: 1px solid #888; }

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?dib4si');
	src:url('../fonts/icomoon.eot?#iefixdib4si') format('embedded-opentype'),
		url('../fonts/icomoon.woff?dib4si') format('woff'),
		url('../fonts/icomoon.ttf?dib4si') format('truetype'),
		url('../fonts/icomoon.svg?dib4si#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
	content: "\ea8d";
}

.icon-instagram:before {
	content: "\ea90";
}

.icon-twitter:before {
	content: "\ea91";
}

.icon-youtube:before {
	content: "\ea99";
}

.header-links__social {
  padding-top: 5px;
}
.header-links__social a {
  padding-right: 7px;
}