/*   
Theme Name: Stoats and Weasels 2
Theme URI: http://lomokev.com
Description: Specially for Stoats & Weasels
Author: Kevin Meredith
Author URI: http://lomokev.com
Version: 2
*/

/*
portfolio blue     00AEC5 section-portfolio
about     purple   662D91 section-about
blog      pink     EC008C section-blog
contact   orange   F89728 section-contact
*/

/* 

Gothem Screen Smart Book
font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: normal;

Gothem Screen Smart Italic
font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 400; font-style: italic;

Gothem Screen Smart Bold
font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 700; font-style: normal;

Gothem Screen Smart Bold Italic
font-family: 'Gotham SSm A', 'Gotham SSm B'; font-weight: 700; font-style: italic;

*/


/* Zero down margin and paddin on all elements */

* {
  margin: 0;
  padding: 0;
  border:none; /* fix IE image border */
}

body{
	font-weight:300;
	font-style:normal;
}

h1, h2, h3{
	text-decoration:none;
	color:#000;
	font-weight:500;
	font-size:18px;
	line-height:20px;
	padding-bottom:18px;
	margin-top:-4px;
}

strong, b{
	font-weight:500;
}

em, i{
	font-style:italic;
}

.section-portfolio h1, .section-portfolio h2, .section-portfolio h3{
		color:#00AEC5;
}

.section-blog h1, .section-blog h2, .section-blog h3{
		color:#EC008C;
}

.section-contact h1, .section-contact h2, .section-contact h3{
		color:#F89728;
}

.section-about h1, .section-about h2, .section-about h3{
		color:#662D91;
}

hr{
	height: 1px;
	border: none;
	margin-bottom:20px;
}

.section-contact hr{
	background-color:#F89728;
}

.section-blog hr{
	background-color:#EC008C;
}

h1 a:link, h2 a:link, h3 a:link{
	text-decoration:none;
	color:inherit; /* color is inhrated from .section-portfolio h2 */
}

h1 a:visited, h2 a:visited, h3 a:visited{
	color:inherit;
}

/* links that are in body copy start */
	
.section-portfolio p a:link,
.section-portfolio p a:visited,
.portfolio-info-text a:link,
.portfolio-info-text a:visited{
	color:#00AEC5;
	text-decoration:none;
}

.section-about p a:link,
.section-about p a:visited,
.about-info-text a:link,
.about-info-text a:visited{
	color:#662D91;
	text-decoration:none;
}

.section-blog p a:link,
.section-blog p a:visited,
.blog-info-text a:link,
.blog-info-text a:visited{
	color:#EC008C;
	text-decoration:none;
}

.section-blog p a:link,
.section-blog p a:visited,
.blog-info-text a:link,
.blog-info-text a:visited{
	color:#EC008C;
	text-decoration:none;
}

.section-contact p a:link,
.section-contact p a:visited,
.contact-info-text a:link,
.contact-info-text a:visited{
	color:#F89728;
	text-decoration:none;
}

.section-contact p a:hover,
.contact-info-text a:hover,
.section-blog p a:hover,
.blog-info-text a:hover,
.section-portfolio p a:hover,
.portfolio-info-text a:hover,
.section-about p a:hover,
.about-info-text a:hover{
	text-decoration:underline;
}

/* links that are in body copy end */
	
/*
h1 a:hover, h2 a:hover, h3 a:hover{
}

h1 a:active, h2 a:active, h3 a:active{
}
*/

body {
	padding-top:30px;
	padding-bottom:30px;
	font-family: 'Gotham SSm A', 'Gotham SSm B';
	/* background-image:url(graphics/test-line.gif);
	background-position:center;
	background-position:top;
	background-repeat:repeat-x; */
	font-size:13px;
	line-height:19px;
}

#header {
  height: 256px;
  /* background-color:#9FF; */
  background-image:url('graphics/stoats-and-weasels-big-logo.jpg');
  background-repeat:no-repeat;
  background-position:left top;
  text-align:right;
}

#strapline{
	padding-top:99px;
}

#left-one-column {
  /* list-style: none; */
}

.one-column-index{
	/* right text column for front page new Oct 4th 2012 */
	padding-left:24px;
}

#menu {
	height:60px;
	/* background-color:#9FF; */
}

#menu ul{
	list-style:none;
	float:left;
}

#menu ul li{
	margin: 0;
	padding: 0;
	/* ie and opera indent list diffrently from safari and firefox
	so the margins and padding have to reset */
	float:left;
	width:228px;
	/* margin-right:24px; not working in IE */
	margin-left:24px;
	/* background-color:#CCC; */
}
/* margin-right:24px; not working in IE 
#menu ul li:last-child{
	margin-right:0px;	
}
*/
#menu ul li:first-child {
   /* margin-right: 0; not working in IE */
   margin-left:0;
}

/* was #menu ul li a:link{ */
.mainMenuLink:link{
	width:222px;
	height:28px;
	border-bottom-width:2px;
	border-bottom-style:solid;
	text-decoration:none;
	color:#000;
	/* background-color:#0F0; */
	padding-left:6px; /* remember to take this off the width */
	font-size:19px;
	text-transform:uppercase;
	display: block; /* so that there width can be set */
}

.mainMenuLink:visited{
	color:#000;
}

.portfolioLink{
	border-bottom-color:#00AEC5;
}

.aboutLink{
	border-bottom-color:#662D91;
}

.blogLink{
	border-bottom-color:#EC008C;
}

.contactLink{
	border-bottom-color:#F89728;
}

/* what the links look when there open start
2 styles are appled to the a elmaent and these can be targeted if there both present if contactanted */

.portfolioLink.open{
	color:#00AEC5;
}

.aboutLink.open{
	color:#662D91;
}

.blogLink.open{
	color:#EC008C;
}

.contactLink.open{
	color:#F89728;
}

/* what the links look when there open end */

.mainMenuLink:hover{
	cursor:pointer;
}

.portfolioLink:hover{
	color:#00AEC5;
}

.aboutLink:hover{
	color:#662D91;
}

.blogLink:hover{
	color:#EC008C;
}

.contactLink:hover{
	color:#F89728;
}

/* lay out of columns */

body {
  text-align: center; 
  min-width: 1024px; /* 40 pixels more than the wrapper width to give 20px margin on each side */
}

#wrapper {
  width: 984px; /* (228 * 4) + (3 * 24) */
  margin: 0 auto; 
  text-align: left;
  /*background-color:#CCC;*/
}

#left-one-column { 
  width: 228px; 
  float: left;
  margin-bottom:20px;
}

#three-columns { /* covers 3 columns and containes (3 * 228) + (2 * 24)  */
  width: 732px; 
  float: right;
}

#four-columns { /* covers 3 columns and containes (3 * 228) + (2 * 24)  */
  /* vlues values so that etsy shop is in middle */
  margin-left: 20px;
  width: 964px; /* was 984 */
}

.page-template-full-width-page-php #index-info-rapper{
    border-top: 0 none;
    padding-top: 0; /* was 25px */
}

.page-template-full-width-page-php #index-info-rapper iframe{
	margin-top: 30px;
	height:980px;
	overflow: hidden;
	margin-bottom: 30px;
}

.front-page-float { /* used on the front page / new Oct 4th 2012 /  covers 3 columns and containes (3 * 228) + (2 * 24)   */
  float: left !important;
}

#two-columns { /* 2 middle columns (2 * 228) + (24)  */
  width: 480px; 
  min-height:400px;
  margin: 0; 
  float: left;
}

.section-contact #two-columns{
	margin-top:4px; /* fix the extra spacing on the contact page above the image */
}

#right-one-column { /* right hand column */
  width: 228px;
  display: inline; /* :KLUDGE: Fixes IE double margin float bug */
  float: right;
}

#index-info-rapper{
	border-top: 2px solid #000000;
	padding-top:25px;
}

/* ----- portfolo page start ----- */

#folio-thumbs ul {
    padding: 0;
}

#folio-thumbs li {
    display: inline-block;
	padding-right:24px;
	padding-bottom:20px;
}

.end-folio-column{
	padding-right:0px !important; /* every 4th thumb dose not have a right padding as there is no image to it's right */ 
}

.project-title{
	width:228px;
	height:144px;
    position: absolute;
    z-index: 2;
	/* text-decoration:underline; */
}

.project-title div{
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(0, 0, 0, 0.8);
	color:#FFF;
	position: absolute;
	bottom: 0;
	right: 0;
	width:208px; /* minus 20 because of the padding */
	padding: 10px 10px 10px 10px;
	font-size:13px;
	line-height:16px;/* 
	display:none; 
	open sanse regula */
}

/* ----- portfolo page end ----- */

/* ----- portfolio single start ----- */

.folio-text-image{
	padding-bottom:30px;
}

.folio-text{
	width:228px;
	float:left;
}

.folio-text p, #three-columns p, .one-column-index p{
	margin-top:-4px; /* -4 lines up perfactllly so image captions line up with top of pofolio images */
	margin-bottom:20px; /* so the space between p them  */
	padding-bottom:1px; /* so that the p is the same height as 2 lines */
}

.folio-text h1, .folio-text h2, .folio-text h3, #three-columnsh1, #three-columns h2, #three-columns h3, .one-column-index h1, .one-column-index h2, .one-column-index h3{
	/* margin-top:-4px; */ /*  -4 lines up perfactllly  add a minus value so that the top of the text lines up */
	/* moved to gernric h1, h2, h3 */	
}

.folio-image{
	float:right;
	padding-bottom:26px; /* should be 30 but there is already 4px there */
}

.clear{
	clear:both;
}

/* ----- portfolio single end ----- */

/*
#footer {
  background-color:#b0b0b0;
  padding: 0px 0px;
}
*/

/* text that appears grey under blog posts and else where? */

.minor-text{
	font-size:11px;
	color:#58595B;	
	padding-bottom:18px;
	text-align:right;
	float:right;
	margin-top:-7px;
}

.minor-text a:link, .minor-text a:visited{
	text-decoration:none;
	color:inherit;
}

.minor-text a:hover{
	text-decoration:underline;	
}


#footer { 
  clear: both; 
  border-top-color:#000;
  border-top-width:2px;
  border-top-style:solid;
  -webkit-text-size-adjust: none;
  /* background-color:#9F9; */
  /* padding-bottom:30px; padding is now taken care of in the body tag */ 
} 

.section-blog #footer{ /* so different padding can be appled to different sections */
	/* margin can't be set for some reason*/
}

#social-buttons{
	/* background-color:#0FF; */
	float:left;
	margin-top:20px;
}

.icon{
	width:22px;
	height:22px;
	overflow:hidden;
	display:inline-block;
	text-indent: -9999px; /* so that text is not viable in the icon */
	background-image:url('graphics/social-media-icons-new.gif');
	margin-right:9px;
}

.twitter{			background-position:0px 0px; }
.twitter:hover{		background-position:0px -22px; }
.linkedin{			background-position:-22px 0px; }
.linkedin:hover{	background-position:-22px -22px; }
.flickr{			background-position:-44px 0px; }
.flickr:hover{		background-position:-44px -22px; }
.rss{				background-position:-66px 0px; }
.rss:hover{			background-position:-66px -22px;}
.etsy{				background-position:-88px 0px; }
.etsy:hover{		background-position:-88px -22px;}
.instagram{			background-position:-110px 0px; }
.instagram:hover{	background-position:-110px -22px;}

#text-info{
	/* background-color:#99F; */
	float:right;
	font-size:11px;
	margin-top:22px;
}

/* widigit styling */

.widget{
	padding-bottom:24px;
	padding-top:20px;
	border-bottom:solid;
	border-bottom-width:1px;
	border-bottom-color:#000;
}

.section-blog .widget{
	border-bottom-color:#EC008C;
}

.section-about .widget{
	border-bottom-color:#662D91;
}

.section-contact .widget{
	border-bottom-color:#F89728;
}

.widget:first-child {
	padding-top:0px;
}

.widget:last-child {
	padding-bottom:0px;
	border-bottom:none;
	border-bottom-width:0px;
}

.widget ul{
	list-style:none;
	margin-top:-4px;
}

.widget ul li{
	margin-bottom:2px;
}

.widget a:link, .widget a:visited{
	text-decoration:none;
	color:#000;
}

.widget a:hover{
	text-decoration:underline;
}

.section-blog .widget a:hover{
	color:#EC008C;
}

.section-contact .widget a:hover{
	color:#F89728;
}

.section-about .widget a:hover{
	color:#662D91;
}

/* back and next buttons on posts, post index pages */



/* previous next page start */

.previous-next-page{
	width:732px;
	margin-left:252px;
	padding-top:2px;
}

.back-to-gird-button{
	width:228px;
	text-align:center;
	float:left;
	margin-left:24px;
}
/* previous */
#back-to-grid-link:link, #back-to-grid-link:visited{
	/* margin-left:252px; */
	text-decoration:none;
	color:#000;
}

#back-to-grid-link:hover{
	color:#00AEC5;
}

/* previous next page old */

.previous-next{
	padding-bottom:45px; /* padding before the footer */
}

.previous-next a:link, .previous-next a:visited, .previous-next-page a:link, .previous-next-page a:visited{
	text-decoration:none;
	color:inherit;
}

.section-blog .next a:link{
	background:url('graphics/left-pink-arrow.gif') no-repeat left center;
	padding-left: 15px;
}

.section-blog .previous a:link{
	background:url('graphics/right-pink-arrow.gif') no-repeat right center;
	padding-right: 15px;
}

.section-portfolio .next a:link{
	background:url('graphics/left-blue-arrow.gif') no-repeat left center;
	padding-left: 15px;
}

.section-portfolio .previous a:link{
	background:url('graphics/right-blue-arrow.gif') no-repeat right center;
	padding-right: 15px;
}

.section-portfolio .previous-next-page a:hover{
	color:#00AEC5;
}

.section-blog .previous-next a:hover{
	color:#EC008C;
}

.next{ /* older */
	float:left;
}

.previous{ /* newer */
	float:right;
}

.section-portfolio .next{
	/* so the back to grid buttons works */
	width:228px;
}
/*
.section-portfolio .next{
	right:0px;
}
.section-portfolio  .previous{
	left:0px;
}
*/

/* about text 3 columns */

.client-feedback{
	width:228px;
	float:left;
	padding-right:24px;
	color:#58595B;
}

.zero-right-pad{
	padding-right:0px;
}

/* mail chimp mail sign up */

.textwidget input[type="text"], .textwidget input[type="email"]{
	border-color:#939598;
	border-style:solid;
	border-width:1px;
	color:#6D6E71; /* text color */
	padding: 6px 0px 6px 10px;
	margin-bottom:6px;
	width:216px;
}

.textwidget input[type="submit"] {
	border:none;
	background: transparent;
	cursor: pointer;
	color:#FFF;
	background:url('graphics/right-pink-arrow.gif') no-repeat right center;
	padding-right: 15px;
	color:#777777;
	font-size:inherit;
	text-transform:uppercase;
	/* float:right; */
}

.section-blog .textwidget input[type="submit"] {
	background:url('graphics/right-pink-arrow.gif') no-repeat right center;
}

.section-contact .textwidget input[type="submit"] {
	background:url('graphics/right-yellow-arrow.gif') no-repeat right center;
}

.section-blog .textwidget input[type="submit"]:hover {
	color:#EC008C;
}

.section-contact .textwidget input[type="submit"]:hover {
	color:#F89728;
}

/* mail chimp mail sign up end */

.error_four_o_four{
	height:400px;
}

img#wpstats{
	/* tracking image will appear if jazy load is active on the page
	and wp stats is told not to display image. lazy load makes it appear
	display none can be use but setting to 1px works just as well */
	width:0px;
	height:0px;
}

#error404{
	padding-bottom:23px;	
}

.social-media{
	height:20px;
	width:200px;
    position:absolute;
}

.twitter-share-button{
	vertical-align: text-bottom;
	width:85px !important;
}

.social-buttons{
	float:left;
	display:inline-block;
}

.clearing{
	clear:both;
}

.social-media.in-blog{
	/* social media on blog */
	position:inherit;
	float:left;
}

#home-page-phone-email-testimonial{
	color:#FFF;
}

#home-page-phone-email-testimonial a{
	color:inherit;
	text-decoration:none;
}

#home-page-phone-email-testimonial .black-bar{
	margin-bottom:20px;
	height:23px;
	padding-top:7px;
	padding-left:5px;
	background-color:#231F20;
}

.black-bar.social{
	 /* div that has the social stuff */
	 padding-top:0px !important;
	 padding-right:0px !important;
	 height:30px !important;
}

.social-media.front-page{ /* also has class .black-bar */
	/* social media on blog */
	position:relative;
	top:5px;
	left:1px;
	width:200px;
}

.pink{
	color:#EC008C;
	padding-right:5px;
  	padding-left:2px;
}

#home-page-phone-email-testimonial .email, #home-page-phone-email-testimonial .testimonial{
  background:url(graphics/front-page-email-phone.png) no-repeat 0px 0px #231F20;
  padding-left:45px;
}

#home-page-phone-email-testimonial .email:hover{
	background-position:0px -30px;
}

#home-page-phone-email-testimonial .testimonial{
	background-position:0px -60px; 
}

#home-page-phone-email-testimonial .testimonial:hover{
	background-position:0px -90px;
}

/* survey page start */

.page-template-survey-page-php #two-columns label, .page-template-survey-page-php #two-columns textarea{
	display:block;
    margin-bottom: 10px;
}

.page-template-survey-page-php #two-columns label{
}

.page-template-survey-page-php #two-columns textarea{
	border-color: #939598;
    border-style: solid;
    border-width: 1px;
    color: #6D6E71;
    padding: 6px 0 6px 10px;
    width: 468px;
	resize:vertical;
	height:25px;
}

.page-template-survey-page-php #two-columns input[type="submit"] {
    background: url("graphics/right-yellow-arrow.gif") no-repeat scroll right center rgba(0, 0, 0, 0);
    border: medium none;
    color: #777777;
    cursor: pointer;
    float: right;
    font-size: inherit;
    padding-right: 15px;
    text-transform: uppercase;
	margin-bottom:20px;
}

.page-template-survey-page-php #two-columns{
	padding-bottom:20px;
}

.page-template-survey-page-php #two-columns input[type="text"], .page-template-survey-page-php #two-columns input[type="email"]{
	border-color:#939598;
	border-style:solid;
	border-width:1px;
	color:#6D6E71; /* text color */
	padding: 6px 0px 6px 10px;
	margin-bottom:6px;
	width:216px;
}

.page-template-survey-page-php #two-columns {
    margin-top: 0; /* on the contact page template there is 4px margin this removes it */
}