/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* Table of Contents
==================================================
    #Base 1000 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */




   

  

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 100%; }
        /*.container .column,
        .container .columns                         { padding-left: 1.5%; padding-right: 1.5%;  }*/
      

           }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width:100%; }
        .container .columns,
        .container .column {  padding-left: 0%; padding-right: 0%;  }

     }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 100% }
        .container .columns,
        .container .column { padding: 0; }

      
    }

/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }
    
    

    
/*if you just want to adjust the size of the stage and the thumbnails, you can do so by editing the following lines: */


.jcarousel-skin-pika .jcarousel-container-vertical { height: 260px; overflow:hidden;}



	
/* Style the thumbnails */
/*.pika-thumbs{ padding: 0 16px; height: 75px; }*/
	/*.jcarousel-item { width:300px; height:100px; padding: 0; overflow: hidden;cursor: pointer;}*/

	/*.pika-thumbs li .clip {position:relative;height:100%;text-align: center; vertical-align: middle; overflow: hidden;}*/
	
/* The stage is the wrapper. The image fills 100% the height of the stage */
/*.pika-stage, .pika-textnav {width: 65%;}
.pika-stage {position: relative; background: #fafafa; border: 1px solid #e5e5e5; padding: 10px 10px 40px 10px; text-align:center; height:250px;}
.pika-stage img{height:100%;}
*/
/* Ths play, pause, prev and next buttons */
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:1113;}
	.pika-imgnav a.previous {background: url(/temple-gate/wp-content/themes/templegate/images/prev.png) no-repeat left 45%; height: 100%; width: 50px; top: 10px; left: 0;cursor:pointer;}
	.pika-imgnav a.next {background: url(/temple-gate/wp-content/themes/templegate/images/next.png) no-repeat right 45%; height: 100%; width: 50px; top: 10px; right: 0;cursor:pointer;}
	/*.pika-imgnav a.play {background: url(/temple-gate/wp-content/themes/templegate/css/play.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display: none;cursor:pointer;}
	.pika-imgnav a.pause {background: url(/temple-gate/wp-content/themes/templegate/css/pause.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display:none;cursor:pointer;}*/
/* Ths play, pause, prev and next buttons */


/* The previous and next textual buttons */
.pika-textnav {overflow: hidden; margin: 10px 10px 0 15px;bottom:5px; position:absolute;left:0;background-color:rgba(50,50,50,0.5);border-radius:3px}
.pika-textnav a {font-size: 13px; text-decoration: none; color: #ddd; padding: 2px 10px;}
	.pika-textnav a.previous {float: left; width: auto; display: block;}
	.pika-textnav a.next {float: right; width: auto; display: block;}

/*for the tool tips*/
.pika-tooltip{display:none;}



.pika-counter{position: absolute;top: 15px;right:3%;color:#ddd;background:rgba(0,0,0,0.25);font-size:12px;padding:2px 10px;-moz-border-radius: 2px;border-radius:2px;}

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */		
.pika-loader{ background:url(/temple-gate/wp-content/themes/templegate/images/loading.gif) 3px 3px no-repeat #000; background-color:rgba(0,0,0,0.9); color:white; width:60px; font-size:11px; padding:5px 3px; 
text-align:right; position:absolute; top:15px; right:15px; }


/*if you just want to adjust the size of the stage and the thumbnails, you can do so by editing the following lines: */
.pika-thumbs li{width:100%;}
.pikachoose{ position:relative;}



/**
 *  Vertical Buttons
 */
  .jcarousel-skin-pika .jcarousel-next-vertical:before,
   .jcarousel-skin-pika .jcarousel-prev-vertical:before
   {color:#fff; font-family: "WebSymbolsRegular"    ;font-size:30px;box-shadow: 0 0 #ddd;opacity:0.5;text-shadow:1px 1px 10px #aaa;}
  
   .jcarousel-skin-pika .jcarousel-prev-vertical:before{ content:':' }
 .jcarousel-skin-pika .jcarousel-next-vertical:before{ content:';';}
   
 .jcarousel-skin-pika .jcarousel-prev-vertical,
 .jcarousel-skin-pika .jcarousel-next-vertical
 { position: absolute;z-index:100!important;background-color:transparent;cursor: pointer;width: 32px;height: 32px;left: 45%;}
.jcarousel-skin-pika .jcarousel-next-vertical {bottom:0}
.jcarousel-skin-pika .jcarousel-prev-vertical {top:0}

.jcarousel-skin-pika .jcarousel-prev-vertical:hover:before,
.jcarousel-skin-pika .jcarousel-prev-vertical:active:before,
.jcarousel-skin-pika .jcarousel-next-vertical:hover:before,
.jcarousel-skin-pika .jcarousel-next-vertical:active:before {
opacity:0.2;}



.jcarousel-list .selectedItem img,
 button.jcarousel-prev:focus, button.jcarousel-next:focus,
.jcarousel-list .jcarousel-item:focus img{outline: 1px dotted #FFFCDD;background-color:transparent;}

.jcarousel-list .jcarousel-item:focus img{outline-offset: -2px;}
.jcarousel-list .selectedItem img {outline-offset: -1px;}

button.jcarousel-prev, button.jcarousel-next {border: none;}






/*@media only screen and (min-width: 1025px) {
	
.next_big {margin:0 3%;	background: rgba(255, 255, 255, 0.25)!important;}}*/
	
	

@media only screen and (max-width: 1024px) {
.prev_big,.next_big {margin:0 1%;	background: rgba(250, 250, 250, 0.55)!important}
	}

.prev_big,.next_big {

top:35%;
color: #e8e8e8;overflow:hidden;
font-size: 80px;
width: 80px;
height: 200px;
line-height: 200px;
position: fixed;
text-shadow: 0 1px 0 #FFF;

z-index: 3;text-decoration:none;
-moz-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}

.next_big {
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
padding: 0 0 15px 20px;
right: 0;
}

.prev_big {border-bottom-right-radius: 15px;border-top-right-radius: 15px;padding: 0 20px 15px 0;left: 0;
}

.prev_big:hover,
.next_big:hover {
	background-color: rgba(100, 100, 100, 0.85)!important;
text-decoration:none!important;color:#555;text-shadow:none;
}

.prev_big:hover {padding-left:10px}
.next_big:hover {padding-right:10px}