/*
Theme Name: 	VK Theme
Theme URI: 		none
Description: 	Theme for Vonnegut / Kraft
Version: 		1.0
Author: 		Nathan Hauenstein
Author URI: 	http://nathanhauenstein.com
Tags: 			clean, portfolio
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,600,400);


div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#000; color:#fff; }
::selection 		{ background:#000; color:#fff; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/


body,
input,
textarea 			{ 

font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: .78em;
}

b {
font-weight: 600;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* 400 and up */
@media screen and (min-width:400px) {

					{ /* Place your styles here for all widths greater than 400px */ }

}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {

					{ /* Place your styles here for all 'Retina' screens */ }

}

body{
background-color: #ffffff;
height:100%;
margin:0;
padding:0;
}


/*making the invisible visible

a#header{
border: solid red;
}


#page-wrapper{
border: solid green;
}
*/


a:link, a:visited, a{
color: rgb(67,60,63); text-decoration: none;
}


a img {
border:none;
}

/* header styling */
a#header {
background-position: center center;
background-repeat: no-repeat;
height: 100px;
width: 307px;
background-image: url(img/logo.png);
position: fixed;
left: 50%;
margin-left: -153px;
top:10px;
z-index: 1000;
transition-property:opacity,margin-top;
-moz-transition-property:opacity,margin-top;
-webkit-transition-property:opacity,margin-top;
-o-transition-property:opacity,margin-top;
transition-duration: .5s;
-webkit-transition-duration: .5s;
-o-transition-duration: .5s;
}

a#header:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
margin-top:10px;
transition-duration: .5s;
-webkit-transition-duration: .5s;
-o-transition-duration: .5s;
transition-property:opacity,margin-top;
-moz-transition-property:opacity,margin-top;
-webkit-transition-property:opacity,margin-top;
-o-transition-property:opacity,margin-top;
}


/* menu styling */
.menu-header-menu-container {
bottom: 0px;
position: fixed;
width: 100%;
text-align: center;
padding-bottom: 20px;
z-index: 1000;
}

.menu-header-menu-container ul li{
display:inline-block;
padding-right: 30px;
padding-left: 30px;
font-weight: 600;
}

.menu-header-menu-container a:hover{
border-bottom: solid;
border-bottom-width: 10px;
}

.menu-header-menu-container a, .menu-header-menu-container .current_page_item a{
color:#000;
}

.menu-header-menu-container .current_page_item a, .single-project .menu-item-22 a{
border-bottom: solid;
border-bottom-width: 10px;
}


.menu-header-menu-container a:link, .menu-header-menu-container a:visited, .menu-header-menu-container a{
text-transform: uppercase;
text-decoration: none;
}


#page-wrapper{
margin-top:200px;

}

#project-wrapper{
text-align: center;
}

#project {
display:inline-block;
margin-right:25px;
margin-left:25px;
}

#project img{
height: 200px;
/*setup for javascript*/
display:none;
transition-property:box-shadow,
-moz-transition-property:box-shadow;
-webkit-transition-property:box-shadow;
-o-transition-property:box-shadow;
box-shadow: 0px rgba(100, 100, 100, 0);
}

/*project title*/
#project .title {
padding-top: 15px;
padding-bottom: 15px;
font-size: 12px;
text-transform: uppercase;
display: inline-block;
text-align: left;
width:100%;
opacity: 0;
transition-duration: .5s;
transition-property: opacity;
-moz-transition-property: opacity;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
}

#project:hover .title{
opacity: 1;
transition-duration: 1s;
transition-property: opacity;
-moz-transition-property: opacity;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
}


#project:hover img{
/*opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
-webkit-box-shadow: 0px 0px 8px 1px rgba(20,20,20, .2);
box-shadow: 0px 0px 8px 1px rgba(100, 100, 100, .2);
transition-duration:.5s;
transition-property:box-shadow,
-moz-transition-property:box-shadow;
-webkit-transition-property:box-shadow;
-o-transition-property:box-shadow;
}


.single-project .article, .page-article {
width:800px;
margin-left: auto;
margin-right: auto;
}

.single-project .description {
position: absolute;
right: -445px;
top: 17px;
width: 250px;
}

.single-project .gallery {
float:left;
width:600px;
}

.single-project .single-column {
float:none;
width:auto;
}

.clickable{
cursor: pointer;
}

/* give slideshow some style */
.flexslider {
margin: 20px auto;
width: 800px;
height: 500px;

}

/* give each slide the same dimensions */
.flexslider div {
width: 800px;
height: 500px;
}

/* make sure each slide image is centered */
.flexslider div img {
margin: auto;
display: block;
max-height: 500px;
}


/*div.flexslider img{
max-height:500px;
}*/

.single-project .single-column {
float:none;
width:100%;
text-align: center;
}

/*footer is turned off*/
footer{
display:none
}


/*tumblr page*/

.tumblr_post {
display:inline-block;
padding: 20px;
}

/* about page */
.about-contact .page-article {
/*background-color: white;*/
padding: 50px;
width: 800px;
opacity:0;
text-align: left;
}

.page-article p {
padding-bottom:1.5em;
}

.about-contact img {    
float: left;
margin-right: 30px;
}
.about-contact .img {
padding-bottom:0px;
}

#tearsheet {
margin-top: 2em;
font-size: 11px;
}

/*pdf icons*/
a[href$=".pdf"] {
background: url(http://artistsspace.org/aspace/wp-content/plugins/file-icons/icons/silkicons/page_white_acrobat.png) no-repeat scroll left center;
padding-bottom: 2px;
padding-left: 22px;
padding-top: 2px;
}