/*
Theme Name: kellyissuperneato
Description: Site for kellyissuperneato.com
Author: Fruit Salad Studios http://www.fruitsaladstudios.com
Version: 1.0
*/

/*load non-standard fonts*/
@font-face {
    font-family: 'sharpie';
    src: url('lamson-sharpie-webfont.eot');
    src: url('lamson-sharpie-webfont.eot?#iefix') format('embedded-opentype'),
         url('lamson-sharpie-webfont.woff') format('woff'),
         url('lamson-sharpie-webfont.ttf') format('truetype'),
         url('lamson-sharpie-webfont.svg#lamson-sharpie-webfont') format('svg');
    font-weight: normal;
    font-style: normal;}

/*typography*/

html, body {
	font-family: georgia, serif;
	font-size: 105%;
	line-height: 105%;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: sharpie, arial, sans-serif;	}

.navitem {
	font-family: sharpie, arial, sans-serif;
	text-transform: lowercase;
	}

.title {
	font-family: sharpie, arial, sans-serif; 
	text-transform: uppercase;
	 }
	 
.text {
	font-size: 90%;
	line-height: 1.3;}

.caption{
	font-family: arial, sans-serif;
	font-size: .65em;
	text-transform: uppercase;
	text-align: justify;
	display: block;
}

a:link {text-decoration: none; color: #000000;}      /* unvisited link */
a:visited {text-decoration: none; color: #000000;}  /* visited link */
a:hover {text-decoration: underline; color: #000000;}  /* mouse over link */
a:active {text-decoration: none; color: #000000;}  /* selected link */ 

a img{border: 0;}


/*theme*/
html, body {
	width: 100%;
	margin:0;
	}

.site {
	height: 900px;
	width: 99%;
	margin-left: auto;
	margin-right: auto;
	max-width: 62.5em;
  	*zoom: 1;
  	}

.navbar{
	padding-left: 1em;
	padding-right: 1em;}

.logo {}

.logo img{ max-width: 280px;
width: 100%;
	}

.navitem {margin-bottom: 15px;
		margin-top: 5px;}

.content{
}

.text{
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 20px;
	height: 1000px;
	padding-bottom: -1000px;
	text-align: left;}

.item { margin-top: 20px;}
.separator { margin-top: 40px;}

.sm_show {

}

.pics{}




/*1 column view*/
@media only screen and (min-width: 1px) and (max-width: 480px) and (min-height: 321px)
{
.navbar {
	width: 100%;
	}

.content {
	width: 100%;
	}

.sm_show {
display: block;
text-align: center;
}

.sm_show img{
width: 100%;
max-width: 400px;
}

.caption {
width: 99%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}

.pics {
	width: 0px;
	height: 0px;
	display: none;
}
}

@media only screen and (min-width: 1px) and (max-width: 320px) and (min-height: 1px) and (max-height:320){
.navbar {
	width: 100%;
	}

.content {
	width: 100%;
	}

.sm_show {
display: block;
text-align: center;
}

.sm_show img{
width: 100%;
max-width: 400px;
}

.caption {
width: 99%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}

.pics {
	width: 0px;
	height: 0px;
	display: none;
}
}
/*end 1 column view*/

/*2 column no caption*/
@media only screen and (min-width: 321px) and (min-height:1px) and (max-height:320px){

.navbar {
float: left;
width: 32%;}

.content {
clear: both;
width: 32%;
}

.text {
width: 100%;}

.sm_show {
width: 0;
height: 0;
display: none;}


.pics {
	display: block;
	width: 50%;
	position:fixed;
	top: 5%;
	right: 5%;
	height: 90%;
	max-height: 288px;
	text-align: center;
}

.pics .caption {display:none;}

.pics img{
	height: 100%;
	width: auto;
	max-height: 288px;
}
	
}/*end 2 column no caption*/

/*2 column 240x300 w caption*/
@media only screen and (min-width: 481px) and (min-height: 321px) and (max-height:480px)
{
.navbar {
float: left;
width: 42%;}

.content {
clear: both;
width: 42%;
}

.text {
width: 100%;}

.sm_show {
width: 0;
height: 0;
display: none;}


.pics {
	display: block;
	width: 45%;
	position:fixed;
	top: 5%;
	right: 5%;
	height: 90%;
	max-height: 350px;
	text-align: center;

}

.pics .caption { display: block;
	width: 240px;
	margin-left: auto;
	margin-right: auto;}

.pics img{
	width: 240px;
	height: 300px;
}
	
}/*end 2 column 240x300 w caption*/

/*2 column detail*/
@media only screen and (min-width: 481px) and (max-width: 1023px) and (min-height: 481px){
.navbar {
float: left;
width: 42%;}

.content {
clear: both;
width: 42%;
}

.text {
width: 100%;}

.sm_show {
width: 0;
height: 0;
display: none;}


.pics {
	display: block;
	width: 45%;
	position:fixed;
	top:5%;
	right: 5%;
	max-width: 400px;
}

.pics img{
	width: 100%;
	max-width: 400px;}
	
}


/*end 2 column detail*/


/*3 columns*/
@media only screen and (min-width: 1024px) and (min-height: 481px){

.navbar {
float: left;
width: 23%;
}

.content {
float: right;
width: 72%;
}

.sm_show {
width: 0;
height: 0;
display: none;}

.text {
	padding-top: 5%;
	width: 36%;
	height: 2000px;
	padding-bottom: -2000px;}

.pics {
	display: block;
	position:fixed;
	width: 37%;
	top:5%;
	right: 5%;
	max-width: 400px;
}

.pics img{
	width: 100%;
	max-width: 400px;}

	
}/*end 3 columns*/