/*  
Theme Name: Wunderpit Music
Theme URI: 
Description: Custom design for wunderpitmusic.com
Version: 1.0
Author: Todd Low
Author URI: 
Price: Free
*/



@import url("fonts/persans.css");
@import url("fonts/rosario.css");
@import url("fonts/newscycle.css");
@import url("fonts/m1.css");
@import url("fonts/days.css");

* { margin: 0; padding: 0; }


body { margin: 0; padding: 0px; background: #fff url('images/frame/bg.jpg'); font-family: RosarioRegular, Arial, Helvetica, sans-serif; font-size: 12px; color: #555; }
div { padding: 0px; margin: 0px; text-align: left; }
p, ul, li { line-height: 20px; text-align: left; font-size: 14px; color: #555; margin-bottom: 10px; }
p { line-height: 22px; text-align: left; font-size: 14px; color: #555; margin-bottom: 10px; }
h1, h2, h3 { font-family: NewsCycleRegular, arial black, arial; margin-top: 0; color: #005972; text-align: left; font-weight: 100; }
h1 { font-size: 36px; color: #232421; padding: 0px; margin-bottom: 5px; }
h1.title { margin: 0px 0px 10px 0px; font-size: 38px; color: #1a1a1a; letter-spacing: -2px; text-transform: uppercase; }
h2 { font-size: 1.6em; color: #000000; }
h2.title { color: #21717f; border-bottom: 1px solid #21717f; margin-bottom: 15px; }
h2.title { color: #000; border-bottom: 1px solid #000; margin-bottom: 15px; }
h3 { font-size: 1em; }
ul, li { }
a { text-decoration: none; color: #1e7f90; }
a:hover { text-decoration: underline; }
a img { border: none; }
.center { text-align: center; }
.right { text-align: center; }
p.right a { opacity:0.6; filter:alpha(opacity=60); }
p.right a:hover { opacity:1.0; filter:alpha(opacity=100); }
.left { text-align: left; }
hr { width: 100%; height: 3px; background: #fff; border: 0; border-top: 1px solid #9a9a9a; margin: 5px 0px 10px; }
.clear { clear: both; }
.sidebarimage { border: 1px solid #333; }


/* Header */
#logo { float: left; width: 192px; margin-top: -10px; display: block; }
#logo img { max-height: 120px; min-width: 180px; }
#music-player { color: #000; text-decoration: none; background: #6ab0bc; width: 100%; margin: 0px auto; height: 35px; font-family: arial; }
a.music-player:hover { color: #000; text-decoration: none; }
.track_title { position: absolute; top: 11px; left: 70px; width: 505px; height: 41px; font-family: arial; color: #373737; font-size: 12px; }
.play_track { position: absolute; border: 0px solid #990000; width: 20px; height: 30px; top: 2px; left: 25px; text-indent: -9999px; background: url('images/icons/play2.png') 0 0 no-repeat; }
.previous_track { position: absolute; border: 0px solid #990000; width: 20px; height: 30px; top: 2px; left: 5px; text-indent: -9999px; background: url('images/icons/previous2.png') 0 0 no-repeat; }
.next_track { position: absolute; border: 0px solid #990000; width: 20px; height: 30px; top: 2px; left: 40px; text-indent: -9999px; background: url('images/icons/next2.png') 0 0 no-repeat; }





#header-wrapper { background: url('images/frame/bg_repeat2.jpg') 50% -10px repeat-x; width: 100%; margin: 0px auto; height: 122px; }
#header { width: 940px; margin: 0px auto; padding: 11px 0px 0px 0px; height: 119px; }

/* Navigation */
#navigation { width: 730px; float: right; height: 58px; padding: 0; margin: -10px auto 0; }
#navigation #mobile_nav { display: none; }
#navbar li { list-style: none; float: right; padding: 0; margin: 0; }
#navbar li a { display: block; text-decoration: none; margin: 0px; text-transform: uppercase; font-size: 20px; color: #fff; font-family: NewsCycleRegular; font-weight: 100; padding: 50px 10px; }
#navbar li a:hover, #navbar li:hover a, #navbar li.hover a { color: #1a1a1a; background: #69afbb; }
#navbar li ul { display: none; width: 225px; z-index: 10; }
#navbar li:hover ul, #navbar li.hover ul { display: block; position: absolute; background: #69afbb; padding: 0px; border: 0px; text-align: left; }
#navbar li ul li { text-align: left; }
#navbar li ul li a { display: block; width: 215px; font-size: 14px; text-align: left !important; padding: 5px; }
#navbar li ul li a:hover { background: #1a1a1a; color: #fff; }

/* Content */
#contentbg { width: 100%; height: auto; margin: 0 auto; padding: 10px 0px 35px 0px; }
#content { width: 960px; padding: 0; margin: 0 auto; }
#page-bgtop #page-content { float: left; display: inline; width: 610px; padding: 0px 15px 15px 0px; }
#page-bgtop #page-sidebar { float: left; display: inline; width: 300px; margin: 0px 0px 15px 15px; }
#full #page-content { width: 750px; }
#full #page-sidebar { display: none; }
#page-sidebar ul{ list-style: none; }

.msg_head { font-weight: bold; font-size: 14px; padding-bottom: 0px; margin-bottom: 0px; line-height: 18px; }
.msg_body { margin: 5px 0 15px 0; padding-top: 0px; }


/* Breadcrumbs */
.breadcrumb ul { list-style: none; margin: 0px; padding: 0px; }
.breadcrumb ul li { display: block; color: #888; font-size: 10px; float: left; margin: 5px 4px 5px 0px; padding: 0px 0px 0px 0px; }
.breadcrumb ul li a { color: #888; padding: 0px 0px 0px 0px; }



/* SubNav */
ul.subnav { list-style: none; margin: 15px 0; }
ul.subnav li { padding: 0; margin: 0; }
ul.subnav li a { display: block; padding: 8px; border-bottom: 1px solid #ccc; }
ul.subnav li a.active { border-left: 1px solid #1e7f90; background: #fff; }
ul.subnav li a:hover { text-decoration: none; background: #1e7f90; color: #fff; }
ul.subnav li ul { display: none; }


/* Contact Form */
form label { padding-top: 3px; font-size: 14px; }
form .clear { height: 15px; }
.radio { width: 15px; }
.notify { border: 2px solid #00242d; background: #005972; color: #fff; padding: 5px; margin-bottom: 10px; display: none; font-size: 16px; }
label { width: 200px; float: left; padding-right: 10px; }
input { width: 265px; padding: 5px; color: #777; font-family: arial; background: #fff; border: 1px solid #ccc; }
.select { width: 275px; padding: 5px; color: #777; font-family: arial; background: #fff; border: 1px solid #ccc; }
.textarea { width: 265px; height: 55px; background: #fff; border: 1px solid #ccc; padding: 5px; color: #777; font-family: arial; }
.largetextarea { width: 600px; height: 100px; }
.submit { width: auto !important; cursor: pointer; padding: 5px 15px; background: #444; border: 1px solid #777; color: #fff; font-size: 14px; }
.submit:hover { background: #777; }









/* Footer */

#footer-wrapper { width: 100%; padding: 0px 0px; height: 250px; border-top: 1px solid #ccc; background: #fff url('images/frame/footer.png') 50% -5px no-repeat; }
#footer {  width: 940px; margin: 0px auto 0 auto; padding: 25px 15px; }
#footer p { margin: 0; padding: 0px; font-size: 12px; color: #575757; }
#footer a { color: #777; text-decoration: underline; }
#footer a:hover { color: #333; text-decoration: none; }


#blocks { }
#blocks .block { width: 470px; float: left; margin: 0px; }
#blocks .block p { padding: 5px 0; }





.galleryset { padding: 15px; width: 583px; margin-bottom: 10px; background: #eee; border: 1px solid #ccc; }
.galleryset h1 { margin-bottom: 10px; line-height: 34px; padding: 3px 0px 3px 5px; background: #ddd; }

.galleryset h2.title { color: #fff; font-weight: bold; border: 0; padding: 0px 15px; text-decoration: none; }
.galleryset a:hover { text-decoration: none; }


/* ribbon style */
.ribbon-wrapper { position: relative; padding-bottom: 20px; }
.ribbon-front { background-color: #ccf;	height: 30px; width: 634px; position: relative; left:-25px; z-index: 2; }
.ribbon-front, .ribbon-back-left, .ribbon-back-right { }
.ribbon-edge-topleft, .ribbon-edge-topright, .ribbon-edge-bottomleft, .ribbon-edge-bottomright { position: absolute; z-index: 1; border-style:solid; height:0px; width:0px; }
.ribbon-edge-topleft, .ribbon-edge-topright { }
.ribbon-edge-bottomleft, .ribbon-edge-bottomright { top: 30px; }
.ribbon-edge-topleft, .ribbon-edge-bottomleft { left: -25px; border-color: transparent #99c transparent transparent; }
.ribbon-edge-topleft { top: 0px; border-width: 0px 10px 0 0; }
.ribbon-edge-bottomleft { border-width: 0 10px 10px 0; } 
.ribbon-edge-topright, .ribbon-edge-bottomright { left: 599px; border-color: transparent transparent transparent #99c; }
.ribbon-edge-topright { top: 0px; border-width: 0px 0 0 10px;}
.ribbon-edge-bottomright { border-width: 0 0 10px 10px; }
.ribbon-back-left { position: absolute; top: 10px; left: 0px; width: 0px; height: 30px; z-index: 0; }
.ribbon-back-right { position: absolute; top: 10px; right: 0px; width: 0px; height: 30px; z-index: 0; }










.gallerydetails { background: #333; padding: 10px; }
.gallerydetails hr { margin: 10px 0px; }
.gallerydetails a { font-weight: bold; text-decoration: none; }
.gallerydetails a:hover { font-weight: bold; text-decoration: underline; }
.galleryset .date { margin: -15px 0px 10px 0px; color: #999; font-style: italic; }
.galleryset .social { width: 170px; margin-top: 3px; float: right; }

div.gallery { width: 91px; height: 91px; border: 0px solid #000; float: left; margin: 0px 5px 5px 0px; overflow: hidden; }
div.gallery a.gallery { border: 0px; }
div.gallery a.gallery img.gallery { border: 0px; width: 200px; }
.artistname { font-size: 22px; }
.galleryname { margin-top: -10px; font-size: 12px; margin-bottom: 10px; line-height: 18px; }


.addtocart { border: 0; background: #21717f; border-radius: 5px; color: #fff; font-size: 18px; font-family: PerspectiveSansRegular, arial; padding: 5px 15px; width: 120px; float: right; cursor: pointer; margin: 0px 0px 0px 0px; }
.addtocart:hover { background: #333; }
.small { font-family: PerspectiveSansRegular, arial; font-size: 12px; padding: 3px 5px; width: 40px;float: right; cursor: pointer; margin: -32px 0px 0px 0px; }

.inquire { border: 0; background: #36332c; border-radius: 5px; color: #fff; font-size: 18px; font-family: bebas; padding: 5px 15px; width: 120px; float: right; cursor: pointer; margin: 25px 15px 0px 0px; }
.inquire:hover { background: #5e5d58; }
.viewtracks { border: 0; background: #36332c; border-radius: 5px; color: #fff; font-size: 18px; font-family: bebas; padding: 5px 15px; width: 120px; float: right; cursor: pointer; margin: 25px 25px 0px 0px; }
.viewtracks:hover { background: #5e5d58; }

.percussionparts { width: 150px; margin: 0px 0px 0px 0px; float: left; }
.percussionparts a { display: block; font-family: PerspectiveSansRegular, arial; border: 0; background: #ccc; border-radius: 5px; color: #000; font-size: 12px; padding: 9px 15px 8px; width: 150px; text-align: center; }
.percussionparts a:hover { background: #333; color: #fff; text-decoration: none; }


div.viewcart { width: 120px; margin: 0px 25px 0px 0px; float: right; }
input.viewcart { font-family: PerspectiveSansRegular, arial; border: 0; background: #1e7f90; border-radius: 5px; color: #fff; font-size: 18px; padding: 5px 15px; width: 120px; cursor: pointer; }
input.viewcart:hover { background: #333; color: #fff; }

.galleryphotos .details { width: 100%; margin: 25px auto; }
.galleryphotos .details p { font-size: 10px; line-height: 14px; }
.half { width: 300px; float: left; }
.galleryphotos { width: 100%; float: right; }
.instrumentation { padding: 0px 0px 15px 0px; }
.expand { background: #d7d3d3; color: #fff; font-size: 22px; font-family: 'bebas'; padding: 5px 10px; cursor: pointer; width: 100%; margin: 0px; clear: both; float: none; }
.expand:hover { background: #813032; }
.hide { background: #555; }
.player { float: left; margin: 0px 5px 0px 0px; } 


.hidemusicplayer { display: none; }




div.track_image { float: left; margin: 0 10px 0 0; width: 75px; height: 75px; overflow: hidden; }
div.track_image img.track_image { width: 75px; height: 75px; }
div.tracklist { padding-top: 25px; }
ul.tracklist { list-style: none; }
ul.tracklist li { margin: 0px 0px 0px 15px; border-bottom: 0px solid #eee; padding: 7px; }



.jp-audio ul { list-style: none; }
.jp-controls { float: left; width: 30px; margin: 0px; padding: 0px; }
.jp-controls ul { margin: 0; padding: 0; }
.jp-controls ul li { margin: 0; padding: 0; }
.jp-controls .jp-play { float: left; width: 22px; height: 20px; display: block; background: url('images/frame/PlayPause.png') -20px 0px no-repeat; text-indent: -9999px; }
.jp-controls .jp-pause { float: left; width: 21px; height: 20px; margin-top: -10px; display: block; background: url('images/frame/PlayPause.png') 1px 0px no-repeat; text-indent: -9999px; }
.jp-controls .jp-stop { float: left; }
.trackdetails { float: left; width: 380px; line-height: 14px; }
.trackdetails p { line-height: 12px; margin: 0px 0px 5px 0px; }
.jp-title { float: left; padding-top: 2px; width: 400px; }
.jp-time-holder { display: none; float: left; padding-top: 3px; width: 80px; }
.jp-price { float: left; text-align: right; font-weight: bold; padding-top: 2px; width: 75px; overflow: hidden; }
.jp-add { float: right; text-align: right; margin: -25px 0px 0px 0px; width: 55px; overflow: hidden; }
.jp-time-holder .jp-current-time { float: right; font-size: 10px; }
.jp-time-holder .jp-slash { float: right; font-size: 10px; }
.jp-time-holder .jp-duration { float: right; font-size: 10px; }
.hidethis { display: none !important; }
div.jp-progress { margin: 5px 0px 5px 0px; overflow:hidden; width: 100%; background-color: #ddd; }
div.jp-progress { height: 2px; }
div.jp-progress { width:186px; }
div.jp-progress { width:130px; }
div.jp-progress { width:100%; height: 2px; }
div.jp-seek-bar { background: #ccc; width:0px; height:100%; cursor: pointer; }
div.jp-play-bar { background: #000; width:0px; height:100%; }
/* The seeking class is added/removed inside jPlayer */
div.jp-seeking-bg { background: #ff0000; }




#page-sidebar .jp-audio { width: 300px; }
#page-sidebar .trackdetails { float: left; width: 250px; line-height: 14px; }
#page-sidebar .jp-title { float: left; padding-top: 2px; width: 180px; }
#page-sidebar .jp-time-holder { display: block; float: right; padding-top: 3px; width: 65px; }
#page-sidebar .jp-time-holder .jp-current-time { float: right; font-size: 10px; }
#page-sidebar .jp-time-holder .jp-slash { float: right; font-size: 10px; }
#page-sidebar .jp-time-holder .jp-duration { float: right; font-size: 10px; }




.tipsy { padding: 5px; font-size: 11px; line-height: 14px; background-repeat: no-repeat;  background-image: url(images/tipzy.png); }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: #333; color: #fff; max-width: 200px; border: 1px solid #222222; }
.tipsy-inner a { color: #fff; font-weight: bold;  }
.tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; margin-left: 15px; }




ul.social_icons { list-style: none; margin: -37px 0 0 155px; padding: 0; }
.social_icons li { margin: 0; padding: 0; }
.social_icons li a { display: block; float: left; width: 50px; height: 90px; background: url('images/icons/social_icons2.png') 0 0 no-repeat; text-indent: -9999px; margin: 0 0 0 10px; padding: 0; }
.social_icons li a.facebook { background-position: 0 -100px; }
.social_icons li a.facebook:hover { background-position: 0 0; }
.social_icons li a.twitter { background-position: -60px -100px; }
.social_icons li a.twitter:hover { background-position: -60px 0; }
.social_icons li a.soundcloud { background-position: -120px -100px; }
.social_icons li a.soundcloud:hover { background-position: -120px 0; }
.social_icons li a.paypal { background-position: -180px -100px; }
.social_icons li a.paypal:hover { background-position: -180px 0; }
.social_icons li a.youtube { background-position: -240px -100px; }
.social_icons li a.youtube:hover { background-position: -240px 0; }

.gallimg { width: 30%; margin: 0 5% 0 0; padding: 0; float: left; }
.gallimg img { width: 100%; }
.galltext { float: left; width: 65%; margin: 0; padding: 0; }

.clear_mobile { display: none; }

@media (min-width: 10px) and (max-width: 970px) {

	body { font-size: 16px; }
	p, ul, li { line-height: 22px; font-size: 16px; }

	#body { background: none; width: 100%; }
	#showmusicplayer { display: none; }
	
	/* Header */
	#header-wrapper { width: 100%; height: auto; background: url('images/frame/bg_repeat2.jpg') 50% 0px repeat-x; }
	#footer-wrapper { width: 100%; height: auto; }
	#header { width: 100%; height: auto; }
	#logo { margin: 0px; padding: 0; width: 100%; text-align: center; height: auto; }
	#logo img { display: block; max-width: 312px; margin: 0 auto; }
	#page-bgtop { width: 100%; padding: 0; margin: 0; }
	#content, #contentbg { width: 100% !important; padding: 0 !important; margin: 0 auto !important; }
	.main { width: 100%; padding: 0 !important; margin: 0 !important; }
	#page-content, .page-content { float: none !important; display: block !important; width: 90% !important; padding: 0 !important; margin: 0 5% 15px !important; }
	#page-sidebar, .page-sidebar { float: none !important; display: block !important; width: 90% !important; margin: 15px 5% 15px !important; padding: 0 !important; }

	/* Navigation */
	#navigation { background: url('images/frame/bg_repeat2.jpg') 50% 0px repeat-x; width: 100%; height: auto; padding: 5px 0px; margin: 0px auto; }
	#navigation #mobile_nav { display: block; width: 90%; margin: 0px auto 10px; padding: 5px 5%; font-size: 18px; }
	#navbar { display: none; }
	
	.galleryset { padding: 5%; width: 90% !important; background: #eee; border: 1px solid #ccc; }
	.galleryset img { max-width: 100% !important; }
	.galleryset h1 { margin-bottom: 10px; line-height: 34px; padding: 3px 0px 3px 5px; background: #ddd; }
	.galleryset h2.title { color: #fff; font-weight: bold; border: 0; padding: 0px 15px; text-decoration: none; }
	.galleryset a:hover { text-decoration: none; }
	/* ribbon style */
	.ribbon-wrapper { position: relative; padding-bottom: 20px; }
	.ribbon-front { background-color: #ccf;	height: auto; width: 100%; position: relative; left:0px; z-index: 2; }
	.ribbon-front, .ribbon-back-left, .ribbon-back-right { }
	.ribbon-edge-topleft, .ribbon-edge-topright, .ribbon-edge-bottomleft, .ribbon-edge-bottomright { position: absolute; z-index: 1; border-style:solid; height:0px; width:0px; }
	.ribbon-edge-topleft, .ribbon-edge-topright { }
	.ribbon-edge-bottomleft, .ribbon-edge-bottomright { top: 30px; }
	.ribbon-edge-topleft, .ribbon-edge-bottomleft { display: none; }
	.ribbon-edge-topleft { display: none; }
	.ribbon-edge-bottomleft { display: none; } 
	.ribbon-edge-topright, .ribbon-edge-bottomright { display: none; }
	.ribbon-edge-topright { display: none; }
	.ribbon-edge-bottomright { display: none; }
	.ribbon-back-left { display: none; }
	.ribbon-back-right { display: none; }
	
	.addtocart { float: left; font-size: 12px; }
	div.viewcart { float: right; margin: 0; }
	input.viewcart { font-size: 12px; margin: 0; }
	
	div.track_image { float: left; margin: 0 10px 0 0; width: 75px; height: 75px; overflow: hidden; }
	div.track_image img.track_image { width: 75px; height: 75px; }
	div.tracklist { padding-top: 25px; }
	ul.tracklist { list-style: none; }
	ul.tracklist li { margin: 0px 0px 0px 15px; border-bottom: 0px solid #eee; padding: 7px; }

	.percussionparts { width: 80%; margin: 0px auto 10px auto; float: none; }
	.percussionparts a { padding: 8px 3%; width: 96%; text-align: center; }

	.jp-audio ul { list-style: none; }
	.jp-controls { float: left; width: 35px; height: 25px; position: relative; z-index: 5; margin: 0px; padding: 0px 0 0 0px; text-align: center; }
	.jp-controls ul { margin: 0; padding: 0; }
	.jp-controls ul li { margin: 0; padding: 0; }
	.jp-controls .jp-play { margin: 0 auto; float: left; width: 35px; height: 25px; display: block; background: url('images/frame/PlayPause.png') -20px 0px no-repeat; text-indent: -9999px; }
	.jp-controls .jp-pause { float: left; width: 21px; height: 20px; margin: -10px auto 0; display: block; background: url('images/frame/PlayPause.png') 1px 0px no-repeat; text-indent: -9999px; }
	.jp-controls .jp-stop { float: left; }
	.trackdetails { float: left; width: 70%; line-height: 16px; position: relative; z-index: 3; }
	.trackdetails p { line-height: 16px; margin: 0px 0px 5px 0px; }
	.jp-title { float: left; padding-top: 2px; width: 100%; }
	.jp-time-holder { display: none; float: left; padding-top: 3px; width: 5%; }
	.jp-price { float: left; text-align: right; font-weight: bold; padding-top: 2px; width: 8%; overflow: hidden; }
	.jp-add { float: right; text-align: right; margin: -25px 0px 0px 0px; width: 5%; overflow: hidden; }
	.jp-time-holder .jp-current-time { float: right; font-size: 10px; }
	.jp-time-holder .jp-slash { float: right; font-size: 10px; }
	.jp-time-holder .jp-duration { float: right; font-size: 10px; }
	.small { font-family: PerspectiveSansRegular, arial; font-size: 12px; padding: 3px 5px; width: 40px;float: right; cursor: pointer; margin: -32px 0px 0px 0px; }

	/* Contact Form */
	label { width: 25%; float: left; padding-right: 10px; }
	input { width: 60%; padding: 5px; color: #777; font-family: arial; background: #fff; border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
	.textarea { width: 60%; height: 55px; background: #fff; border: 1px solid #ccc; padding: 5px; color: #777; font-family: arial; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
	
	#footer { width: 90%; height: auto; position: relative; background: none; background: #fff; border-top: 1px solid #ccc; }
	#footer p { margin: 0; padding: 0; text-align: center; text-transform: uppercase; font-size: 10px; color: #575757; }
	#footer p.right { padding-bottom: 25px; }
	#blocks { }
	#blocks .block { width: 100%; float: none; margin: 0px; }
	#blocks .block p { padding: 50px 0 0; }
	ul.social_icons { position: absolute; top: -11px; left: 50%; list-style: none; width: 300px; margin: 0px 0 0 -155px; padding: 0; }
	.clear_mobile { display: block; width: 100%; clear: both; height: 10px; }
}