/* 
    Theme Name:     soundpit 
    Theme URI:      soundpit.co.nz
    Description:    Child theme for the Twenty Eleven theme 
    Author:         lifeformlabs 
    Author URI:     http://lifeform.co.nz
    Template:       twentytwelve
    Version:        0.1.0 
    */  

    @import url("../twentytwelve/style.css");
    
    
/* ==========================================================================
   General styles
   ========================================================================== */

/* set the default font colour to #fff (white) */
body { color: #fff; }

/* remove default box shadow from main content area*/
body .site { box-shadow: none; margin-top: 0; }

/* set color and opacity on main content area */
.site {
  background-color: rgb(0, 0, 0); /* fallback for browsers that don't support rgba */
  background-color: rgba(20, 20, 20, 0.8);
  padding: 0 40px;
  padding: 0 1.71429rem;
}

/* add clearance below lowered logo image */
.site-content { margin: 66px 0 0; margin: 4.714rem 0 0; }

/* change default link color from blue to white  */
a { color: #fff; font-weight: bold }

/* change default link hover color to yellow */
a:hover { color: #f7f654; }

/* remove double border, bottom margin & padding from content */
.site-content article {
  border-bottom: medium none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* page titles */
.entry-header h1.entry-title {
  color: #FFFFFF;
  font-family: verdana, sans-serif;
  font-weight: bold;
  font-size: 30px;
  font-size: 2.1428rem;
  letter-spacing: 1px;
}

/* ==========================================================================
   top navigation
   ========================================================================== */

/* set up for absolute position on #site-navigation & 'remove' left and right padding from #masthead */
#masthead {
  margin: 0 -40px;
  margin: 0 -2.85714rem;
  position: relative;
}

/* position navigation top right */
#site-navigation {
  position: absolute;
  right: 0;
  top: 0;
}

/* reduce default nav margin */
.main-navigation { margin-top:0; }

/* remove borders above and below nav */
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul, ul#menu-main.nav-menu /*ie*/ {
  border-bottom: none;
  border-top: none;
}

/* set font colour for nav */
.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a {
  color: #f7f654;
  font-weight: bold;
}

/* set font colour for nav - ie */
.ie .main-navigation .current-menu-item a,.ie .main-navigation .current-menu-ancestor a,.ie .main-navigation .current_page_item a,.ie .main-navigation .current_page_ancestor a {
  color: #f7f654;
  font-weight: bold;
}

/* set font size for top nav */
.main-navigation li {
  font-size: 15px;
  font-size: 1.0714285rem;
  line-height: 3.692307692; 
}

/* set font color/style for top nav */
.main-navigation li a, .ie .main-navigation li a {
		color: #fff;
		text-transform: lowercase;
	}
  
.main-navigation li a:hover,.ie .main-navigation li a:hover { color: #46BDF4; }


/* ==========================================================================
   Header Styles
   ========================================================================== */

.site-header { background: none repeat scroll 0 0 #0D0D0D; }

.site-header h1 a, .site-header h2 a {
  color: #F7F654;
  display: inline-block;
  text-decoration: none;
}

/* fix title color after 20130821 twenty twelve update - awaiting fix from theme authors */
.site-header h1 a, .site-header h2 { color: #F7F654 !important; }
.site-header h1 a:hover, .site-header h2 a:hover { color: #21759B !important; }

.site-header h1 {
  font-size: 30px;
  font-size: 2.1428rem; /*  30 / 14 */
  line-height: 1.84615;
  margin-bottom: 0;
}

.site-header h1 span {color: #FFFFFF;letter-spacing: 1px;}

h2.site-description {
  color: #FFFFFF;
  font-size: 30px;
  font-size: 2.1428rem; /*  30 / 14 */
  font-weight: bold;
  left: 5.8em;
  position: absolute;
  top: 0;
  width: 11em;
  letter-spacing: 1px;
}

.header-image {
  border: medium none;
  box-shadow: none !important;
  margin: 5px 0 -103px 15%;
}

/* set 4% left margin as default for ie 7 & 8, remove bottom margin in ie7 (so all of logo is visible) */
.ie .header-image { margin: 5px 0 -103px 4%; }
.ie7 .header-image { margin: 5px 0 -43px 4%; }
/* ...and adjust logo to suit for ie7 */
.ie7 hgroup { bottom: 64px;left: 35%; }

hgroup {
  bottom: 0;
  font-family: 'Verdana', Arimo,'open sans',sans-serif;
  left: 37%;
  position: absolute;
  letter-spacing: 2px; 
}

/* ==========================================================================
   Home page styles
   ========================================================================== */

/* Hide Home page title */
.post-5 h1.entry-title {display: none}

/* class for centred text - align centre normally, align left in media queries -see below :) */
.centre-left {text-align: center}

/* 
   Quote rotator
   ========================================================================== */
#quoterotator #quote {
  font-size: 1.0em;
}

#quoteauthor {
  display: block;
  font-weight: bold;
  font-size: 1.2em;
  }
  
span#quote {
  min-height: 110px;
}  
 
#quotearea {
  height:9em;
  margin-bottom: 1em;
  min-height: 120px;
}

#quotearea:after { clear:both; }

/* increase quote area height at points where largest quote starts to break downwards  */
@media (max-width: 750px) {  #quotearea { height:12em; }  }
@media (max-width: 560px) {  #quotearea { height:14em; }  }


/* Portfolio Slide show
   ========================================================================== */
/* set width of slideshow & allow text to sit on RHS of slideshow */
.slideshow-wrapper {
  float: left;
  margin-right: 2%;
  width: 36%;
}

/* set color of all 'horizontal rules' & reduce default margin */
hr { background-color: #626262; margin: 0.5em auto; }

/* ratio issue */
.fluid .slideshow-content img {
  height: auto !important;
  max-width: 100% !important;
}

/* ==========================================================================
   Contact page
   ========================================================================== */

/* contact form main div */
#FSContact1 {
  float: left;
  margin-right: 7%;
  width: 43%;
  margin-bottom: 2em;
}

/* repairs after upgrade to 4.x.x from 3 */
#fscf_captcha_field1 > label {
  clear: both;
  display: block;
  text-align: left;
}


/* wrapping for address details */
#contact {
  float: left;
  width:49%
}

/* fb image */
.fb { padding-bottom: 1em; }

/* make contact form input fields responsive */
#si_contact_form1 input, #si_contact_message1 { width: 100%; }

/* override above for submit button */
input#fsc-submit-1 { width: 12em }

/* single column on portrait smartphone  */
@media only screen 
and (max-width : 599px){
  
#FSContact1 {
  float: left;
  margin-right: 0%;
  width: 80% !important;
  clear: right;
}

#contact { width: 80%; }

}


/* ==========================================================================
   Footer
   ========================================================================== */

/* set footer top border color & reduce top padding on footer area */
footer[role="contentinfo"] {
  border-top: 1px solid #626262;
  padding: 7px 0 24px;
  padding: 0.5rem 0 1.71429rem;
}

/* Footer Widget Areas
   ========================================================================== */
/* reduce top margin on footer widget areas */
#colophon .widget-area {
  margin: 7px 0 0;
  margin: 0.5rem 0 0;
}


/* from http://zeaks.org/2013/twenty-twelve-footer-widgets-tutorial	
   ========================================================================== */ 
.site-info { clear: both; }

#footer-widgets {
    width: 100%;
    border-top: none;
}

#footer-widgets .widget li { list-style-type: none; }
 
.template-front-page #footer-widgets { padding-top: 0; }
 
@media screen and (min-width: 600px) {
 
/* this is purdy but not needed afaics - right margin on third widget makes too wide */
/*#footer-widgets.three .widget + .widget + .widget {*/
/*    margin-right: 1.71429rem;*/
/*}*/
 
#footer-widgets.three .widget {
    clear: none;
    float: left;
    margin-right: 1.71429rem;
    max-width: 30.85%;
    width: 30.85%;
    }
}
/* remove right margin from widget3 - a class I added  */
#footer-widgets.widget-area .widget3 {margin-right: 0;text-align: right}

/* style the LL link */
#footer-widgets.widget-area a.labs {
  color: #D6D6D6;
  font-family: open sans,arial,sans-serif;
  font-weight: normal;
  text-decoration: none;
}
#footer-widgets.widget-area a.labs:hover {color: #f7f654}

/* for IE8 and IE7 */
.ie #footer-widgets.three .widget {
    float: left;
    margin-right: 3.1%;
    width: 29.85%;
    clear: none;
}
.ie #footer-widgets.three .widget + .widget + .widget { margin-right: 3.1%; }


/* Hide footer widgets Homepage Template */
.template-front-page #footer-widgets { display: none; }






/* ==========================================================================
   media queries
   ========================================================================== */

/* reduce left margin on logo when title text begins to cover */
@media only screen and (max-width : 920px) {
 .header-image { margin: 5px 0 -103px 4%; } 
}


/* all ipads portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
  
/* left posi of logo and title */
.header-image { margin: 5px 0 -103px 4%; }
 hgroup { left: 31%; }
}


/* Mobile menu break point ----------- */
@media only screen
and (max-width : 600px) {
  
h2.site-description {
  font-size: 23px;
  left: 0;
  top: 2.5em;
}

#site-navigation {
  left: 2em;
  position: absolute;
  top: 0;
}

.main-navigation ul.nav-menu.toggled-on, .menu-toggle { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.76); }

}


/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
  
/* hide logo */   
#masthead.site-header a img.header-image { display: none; }

/* remove negative left margin to align centre */
#masthead { margin: 0 }

/* remove hefty added top margin */
.site-content { margin: 0; }

/* set min size of quote area */ 
 #quotearea {
  height:auto;
  min-height: 16em;
 }

 hgroup {
  top: 1%;
  left: 0%;
  position: relative;
}

.site-header h1 span {display: block;font-size: 0.5em} 
 
.site-header h1, .site-header h2 {
  text-align: center;
}

.site-header h1 {
  font-size: 44px;
  font-size: 3.143rem;
  line-height: 1.2em
}

/* set site description under title */ 
h2.site-description {
  font-size: 23px;
  left: 0;
  top: 2.5em;
}
 
/* hide slideshow */
 .slideshow-wrapper { display: none }

/* hide quote area imgs */
 #quotearea img { display: none }

.centre-left {text-align: left} 
 

}