/* @override 
	http://192.168.0.7:8888/wwwGingerJam/wp-content/themes/jam2014/style.css */
/*   
Theme Name: jam2014
Theme URI: http://www.gingerjam.co.uk
Description: gallery of Paul Barlow
Author: paul-barlow
Author URI: http://www.gingerjam.co.uk
Template: 
Version: v1
.
General comments/License Statement if any.
.
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
body{
  background: whitesmoke;
}
.wrapper{
  max-width: 1200px;
  margin: 0px auto;
  position: relative;
}
#header img, .wrapper img, #midBand img, article img, #photoArticle, #photo img, .photoThumb img{
  max-width: 100%;
  height: auto;
}
iframe{
  max-width: 100%;
}
#featureVideo iframe{
  width: 100%;
  min-height: 600px;
  margin-bottom: 30px;
}
li.widget{
  list-style-type: none;
}
article{
  display: block;
  min-height: 600px;
}
.theFeatureImage{
  position: relative; top: -10px;
}
.date{
  position: relative; top: 20px;
  font-size: 12px; text-align: right;
  font-weight: 600; color: #999;
}
#commentform textarea{
  max-height: 100px;
}
#commentform input#submit{
  background: orangered; color: #fff;
  border: 2px solid #fff;
}
.nextLastPosts a{
  display: block;
  padding: 10px;
  text-transform: uppercase;
}
.theArticle{
  margin-top: 15px;
}
/* @group TYPE */
body{
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
h1, h2, h3, h4, h5, h6, h1 a, h1 a:hover{
  font-weight: 300;
}
h1, #recentBand h2{
  margin-top: 0px;
}
.video h1{
  text-align: center;
}
.photography h1{
  color: #999;
}
a, a:hover{
  font-weight: 400;
  color: orangered;
}
p a, .gallery a, #mainNav a, .postTease a{
  border-radius: 100px;
  padding: 0px 5px;
}
a:hover{
  text-decoration: none;
  background: rgba(0, 0, 0, .1);
}
.thumbnail:hover{
  background: rgba(219, 219, 222, 0.8);
}
#midBand a{
  color: #fff;
}
p{
  font-size: 16px;
  line-height: 24px;
}
.smallPrint, .gallery-caption{
  font-size: 11px;
}
/* @end */

/* @group HEADER */
#header{
  min-height: 140px;
  border-bottom: 2px solid #999;
  background: #515151;
  padding-top: 50px;
  position: relative;
  z-index: 20000;
}
#gj{
  height: 220px;
  width: 220px;
  position: absolute; 
  top:-60px; left: -30px;
  z-index: 20000;
}
#mainNav ul, #mainNav li{
  padding: 0px;margin: 0px;
}
#mainNav ul{
  margin-left: 30px;
}
#mainNav li{
  text-decoration: none;
  display: inline-block;
  margin-right: 15px;
  text-align: center;
  font-size: 18px;
}
#mainNav li a{
  font-weight: 300;
  color: #999;
  text-transform: lowercase;
}
label.screen-reader-text,input#searchsubmit{
  display: none;
}
input#s {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid #999;
  border-radius: 0px;
}
.searchIcon{
  width: 26px;height: 26px;
  position: absolute;
  right: 0px;
  top: -2px;
}
/* @end */

/* @group MIDBAND */
#midBand{
  background: orangered;
  color: #fff;
  margin-top: 15px;
  border-bottom: 1px solid #fff;
  border-top: 2px solid #999;
  padding: 0px 0px;
}
#midBand .postImage{
  max-height: 300px;
  margin-bottom: 15px;
}
#blogPrev h3{
  background: #ed681e; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkNjgxZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYTU1MjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left,  #ed681e 0%, #ea5522 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ed681e), color-stop(100%,#ea5522)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #ed681e 0%,#ea5522 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #ed681e 0%,#ea5522 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #ed681e 0%,#ea5522 100%); /* IE10+ */
  background: linear-gradient(to right,  #ed681e 0%,#ea5522 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed681e', endColorstr='#ea5522',GradientType=1 ); /* IE6-8 */
  text-align: center;
  color: #000;
  font-size: 27px;
  line-height: 32px;
  padding: 20px;
  background-color: #ea5522;
}
#blogPrev h3:before{
  content:'\003C  ';
} 
#blogPrev h3:after{
  content:'  \003E  ';
} 

/* @end */
/* @group THE_GRID */

.container-fluid.theGrid{
  margin: 0px; padding: 0px 15px;
}
.theGrid .row{
  margin: 0px; padding: 0px;
}
.theGrid{
  margin: 0px auto!important;
  position: relative;
}
.theGrid a h2{
  font-size: 18px;
  line-height: 18px;
  position: absolute;
  bottom: 0px;left: 0px;
  background-color: #000;
  background-color: rgba(0, 0, 0, .75);
  color: #fff;
  padding: 10px 14px;
}
.theGrid a:hover h2{
  color: orangered;
}
.theGridSquare{
  min-height: 200px;
  margin: 0px; padding: 0px;
  border: 1px solid #fff;
  overflow: hidden;
  background-color: orangered;
}
.theGridImage{
 width: 100%;
 height: 100%;
 margin: 0px; padding: 0px;
 background: url(img/orangeGrad.jpg) center center no-repeat;
 background-color: orangered;
 background-size: cover;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover; 
}
.theGrid .excerpt{
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  height: 600px;
  padding: 15px;
  margin: 0px;
  position: absolute;
  top: 0px;  width: 100%; height: 100%;
  display: none;
}
.theGrid .excerpt p{
  max-width: 600px; margin: 0px auto;
  font-size: 14px;
  line-height: 20px;
}
.theGrid a:hover .excerpt{
  /*display: static;*/
}
.theGrid a:hover .theGridImage{
  filter: gray;
  -webkit-filter: grayscale(1) blur(1px);
  /*-webkit-filter: grayscale(1);*/
  opacity: 0.8;
}
.theGridBox iframe{
  width: 100%;
}
.videoClose{
  position: absolute; z-index: 1100;
  right: 5px;top: -28px;
  width: 30px; padding: 4px; text-align: center;
  background: #333;color: #fff;
  border: 1px solid #fff;
  cursor: pointer;
  display: none;
}
/* @end */

#recentBand{
  padding-top: 10px;
  padding-bottom: 15px;
  background-color: #bdbfc0;
  width: 100%;
}
.recentRow{
  width: 100%;
  height: 170px;
  overflow: auto;  
}
.recentInner{
  width: 2655px;
}
.recentThumbs{
  float: left;
  margin-right: 15px;
}
/* @group FOOTER */
footer{
  background: #39393b;
  color: #fff;
  min-height: 200px;
  border-top: 2px solid #999;
  padding-bottom: 100px;
}
#shareRow span{
  cursor: pointer;
}
#shareRow span img{
  max-width: 60px;

}
footer input{
  background: #000; color: #fff;
  padding: 6px;
  border: none;
  border-radius: 6px;
}
/* @end */

/* @group CAROUSEL */
.carousel-control.left, .carousel-control.right{
  background: none;
}
.carousel-control{
  width: 50px;
  height: 80%;
}
.carousel-control:hover{
  width: 60px;
}
#carousel-recent-posts a.right{
  background: url(img/carControl.png) 0 center no-repeat;
}
#carousel-recent-posts a.left{
  background: url(img/carControlLeft.png) right center no-repeat;
}
#carousel-recent-posts a.right.carousel-control span.glyphicon.glyphicon-chevron-right {
color: #333;
left: 35px;
display: none;
}
#carousel-recent-posts a.left.carousel-control span.glyphicon.glyphicon-chevron-left {
color: #333;
left: 12px;
display: none;  
}

ol.carousel-indicators{
  background: rgba(0, 0, 0, .1);
  position: absolute;
  top: -25px;
  height: 20px;
  border-radius: 100px;  
}
.postImage{
  height: 700px;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.postImage a{
  display: block;
  width: 1000px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -500px;
}
.postImage img{
  display: block;
  margin: 0px auto; 
}
.postTease{
  max-width: 400px; 
  padding: 0px 30px;
  margin: 0px auto;
  text-align: center;
}
.postTease h2{
  font-size: 24px; line-height: 24px;
}
.postTease p{
  font-size: 18px; line-height: 28px;
}
/* @end */

.center{
  text-align: center;
}
.left{
  text-align: left;
}
.right{
  text-align: right;
}
.clear{
  clear: both;
}
.s6Box{
  margin-bottom: -5px;
}
/* @group PHOT SINGLE */
.photography{
  	background: #222222;
}
#photoArticle, #photo{
		color: #888;
}
#photoArticle{
  border-bottom: 1px solid #999; 
}
#photoContent .postTitle, #photo h3{
  color: #fff;
}
#photo{
  border-bottom: 1px solid #999; 
}
#photoGalleryThumbs{
  background: #222;  
  max-height: 208px;
  overflow: auto;
  z-index: 200;
  position: relative;
}
#photoGalleryThumbsHolder{
  width: 3000px;/*this value will change with JS*/
  margin: 0px auto;
  overflow: hidden;
}
.photoThumb{
  float: left;
  max-width: 80px;margin: 4px 2px;
}
img.photo, #photo img{
  display: block;
  margin: 0px auto;
}
#photo .container{
  position: relative;
}
.catPrevTitle{
  font-size: 12px;
  line-height: 20px;
  display: block; height: 38px;margin-bottom: 10px;
  overflow: hidden;
  text-align: center;
}

/* @end */

/* @group COMICS SINGLE */
.theArticleBg{
  background: url(img/orangeGrad.jpg) center center no-repeat;
  background-color: orangered;
  background-size: cover;
  -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover; 
  height: 400px;
}


/* @end */

/*.video{
  background-color: #000;
  color: #888;
}
.home, .illustration-and-design{
  background: whitesmoke;
  color: #333;
}*/
@media (min-width:992px){
  .cols-2{
  -moz-column-count: 2;
  -moz-column-gap: 30px;
  -webkit-column-count: 2;
  -webkit-column-gap: 30px;
  column-count: 2;
  column-gap: 30px;
  padding-top: 2px;
  }
}
@media (max-width:970px){
   #mainNav ul a{
     font-size: 12px;
   }
   input#s{
    margin-left: 32px;
   }
}
@media (max-width:768px){
  #header{
    padding-top: 15px;
    padding-bottom: 10px;
  }
  #gj{
    width: 170px;
    top: -10px;
  }
  #mainNav ul a{
    padding: 0px;
    border-radius: 0px;
  }
  .date{
    position: static;
    float: left;
  }
  .postImage{
    max-height: 400px;
  }
  .postImage img{
      max-width: 100%;
      height: auto;
  }
  #featureVideo iframe{
    min-height: 400px;
  }
  #mainNav li{
    width: 100%;
    text-align: left;
  }
  input#s{
   margin-left: 26px;
  }
  .shop .right{
    float: left;
  }
  .shop .col-xs-offset-4{
    margin-left: 0px;
  }
  .shop .col-xs-offset-4 a img{
    max-width: 200px!important;
  }
  .theGrid .excerpt p{
    height: 0px; overflow: hidden;
    color: red;
  }
}