@import url('reset.css');

body
{padding:0;
margin:0 auto;} 


#wrapper
{position:fixed;

top:0; }

#heading
{float:left;
width:100%; 
}

#main-image
{padding:0;
margin:0 auto; 
float:left;
width:100%;
text-align:center;
}

  h1, h2, h3, h4
  { font-family: "FrancoisOneRegular", "franklin gothic medium", "trebuchet ms";
    }
  

  h1
  {
  font-size:2em;
text-transform:uppercase;
  font-weight:lighter;
background: url(../images/blackbg.png);
  margin:0;
padding:10px;
float:left;
color:#fff;
   }
  
  h3 a
  {color:#0078a4;
  text-decoration:none; 
  padding:.2em;}
  
    h3 a:hover
  {color:#fff;
  text-decoration:none; 
  background:#f00}

p, #copy ul{color:#000;
font-size:.9em;
font-family: "franklin gothic medium"; 
background: url(../images/whitebg.png);
margin:0;
padding:10px;

}

p a
{color:#f00;
text-decoration:none;}

p a:hover
{background:#000;
color:#fff;
} 

#copy
{width:60%;
float:left;
position:fixed;
bottom:10%;
margin:5% 0 ;
opacity:.8;
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
z-index:2;

}

#nav_thumbs
{width:40%;
position:fixed;
bottom:18%;
right:0;
float:right;
margin:1% 3% 0 0;
opacity:0.1;
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}

#copy:hover
{opacity:1; }

#nav_thumbs:hover
{opacity:1; }

.t{ 
float:left;
opacity:0.5;
margin:.3em;
padding:.4em;
background:#fff;
width:12%;
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}

.t a
{

float:left;


}

.t:hover
{

border:none;
opacity:1;
-webkit-box-shadow:  0px 0px 3px 3px #b9b8b8;
box-shadow:  0px 0px 3px 3px #b9b8b8;
-webkit-border-radius: 4px;
border-radius: 4px;
}



.next a, .back a
{position:fixed; 
top:45%;
z-index:8;
display:block;
margin:10px;
opacity:0.5;
-webkit-transition:  1s ease;
-moz-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}

.back a
{
left:0;
float:right; 

}

.next a
{
right:0;
float:right; 

}

.next a:hover, .back a:hover
{
opacity:1;

}





#analytics
{float:left;
width:100%;
display:none;}


#footer
{position:fixed;
background:#000;
bottom:0; 
padding:5px 0 0 0;
width:100%;
float:left;
z-index:10;
}

img
{max-width:100%; }

.social
{font-family: "FrancoisOneRegular", "franklin gothic medium", "trebuchet ms";
text-align:left;
width:47%;
float:left;
padding: 0 0 0 3%;
}

.social a
{text-decoration:none; 
text-align:left;
color:#999;
padding:0 1em 0 1em;


} 

.social a:hover
{
color:#fff ; }
.picturejockey
{text-align:right;
float:left;
width:49%;
padding:0 1% 0 0 ; }

.picturejockey
{text-align:right;
float:left;
width:49%;
padding:0 1% 0 0 ; }

/* This is the code for font*/
@font-face {
    font-family: 'FrancoisOneRegular';
    src: url('FrancoisOne-webfont.eot');
    src: url('FrancoisOne-webfont.eot?#iefix') format('embedded-opentype'),
         url('FrancoisOne-webfont.woff') format('woff'),
         url('FrancoisOne-webfont.ttf') format('truetype'),
         url('FrancoisOne-webfont.svg#FrancoisOneRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


#comments
{}

#box156
{ }

.collapsible {
width:60%;
background: url(../images/comments-bg.png) #fff;
background-position:bottom;
background-repeat:repeat-x;
float:left;
padding:1% 20% 1% 20%; 
border:dashed #333;
border-width:0 0 1px 0;
position:absolute;
z-index:5;
display: none; /* Only important part */
        
}

.collapsible p
{font-family: "FrancoisOneRegular", "franklin gothic medium", "trebuchet ms"; }

/*media Queries*/
@media (max-width: 2000px) {
#ipadnav
{
display:none;
 }

}

/*media Queries*/
@media (max-width: 1024px) {
#ipadnav
{position:fixed;
top:0;
right:0;
margin:1em 1em 0;
float:right;
display:block;
 }

}

/*media Queries*/
@media (max-width: 805px) {
	
	#copy, #nav_thumbs {
position:relative;
 }
 #ipadnav
{
display:none;
 }
 .t{ 
opacity:1;
margin:.2em;
padding:.1em;
border: 1px solid #ccc;
width:8%;

}

 .t:hover{ 
opacity:1;
margin:.2em;
padding:.1em;
border: 1px solid #ccc;
width:8%;
-webkit-box-shadow:  0px 0px 0px 0px #b9b8b8;
box-shadow:  0px 0px 0px 0px #b9b8b8;
-webkit-border-radius: 0px;
border-radius: 0px;

}
 
#copy, #nav_thumbs
{opacity:1; 
width:84%;
float:left;
margin:0 8% 0 8%;}
 h1,p
  {background: none;
  color:#333;}
  
.collapsible {
position:relative;
width:84%;
float:left;
padding:1% 8% 1% 8%; 
display: block
        
}
.close
{display:none; }

}