/* apply a natural box layout model to all elements */
/* http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.chromeframe {position: absolute; top: 0;}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {font: normal 100% Helmet, Freesans, sans-serif; background-color:#FFFFFF;
}

#wrapper{
	background-image:url(/_/img/bg.png);
}
/* using local fonts? make sure to read up on Paul Irish's 
	Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

/* we like off-black for text */
body, select, input, textarea {color: #333;}
body{color: #bbcddf;
min-width:320px;
max-width:1280px;
margin:0 auto;}


@font-face {
    font-family: 'ChantelliAntiquaRegular';
    src: url('/_/fonts/Chantelli_Antiqua-webfont.eot');
    src: url('/_/fonts/Chantelli_Antiqua-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_/fonts/Chantelli_Antiqua-webfont.woff') format('woff'),
         url('/_/fonts/Chantelli_Antiqua-webfont.ttf') format('truetype'),
         url('/_/fonts/Chantelli_Antiqua-webfont.svg#ChantelliAntiquaRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'ExistenceLight';
    src: url('/_/fonts/Existence-Light-webfont.eot');
    src: url('/_/fonts/Existence-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_/fonts/Existence-Light-webfont.woff') format('woff'),
         url('/_/fonts/Existence-Light-webfont.ttf') format('truetype'),
         url('/_/fonts/Existence-Light-webfont.svg#ExistenceLight') format('svg');
    font-weight: normal;
    font-style: normal;
	}
	
	
/*@font-face {
    font-family: 'AlegreyaItalic';
    src: url('/_/fonts/Alegreya-Italic-webfont.eot');
    src: url('/_/fonts/Alegreya-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_/fonts/Alegreya-Italic-webfont.woff') format('woff'),
         url('/_/fonts/Alegreya-Italic-webfont.ttf') format('truetype'),
         url('/_/fonts/Alegreya-Italic-webfont.svg#AlegreyaItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}*/

@font-face {
	font-family: 'x';
	src:url('/_/fonts/x.eot');
	src:url('/_/fonts/x.eot?#iefix') format('embedded-opentype'),
		url('/_/fonts/x.woff') format('woff'),
		url('/_/fonts/x.ttf') format('truetype'),
		url('/_/fonts/x.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'x';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	color:#ce2d23;
	font-size:62px;
}
	
	h1, h2{
	font: 2.3em/1.4em 'ExistenceLight',Arial, Helvetica, sans-serif;
	}
	h2{
	font-weight:bold;
	}

nav{
background-color:#FFFFFF;
height:42px;
margin-bottom:37px;
border-bottom:1px #000000 dashed;
}


a {color: #565656;}
a:hover {color: #69f;}

nav .logo{
margin-bottom:-27px;
position:relative;
z-index:10000;
}

nav div#nblogo{
	background: url(/_/img/logo-bg-mobile.png) no-repeat scroll center 0 transparent; 
	padding-top: 10px;
	height:75px;
	}
	
nav a, nav a:link, nav a:visited{
	text-decoration:none;
	font: 1.3em/2em 'ChantelliAntiquaRegular',georgia, sarif;
	color:#000000;
	display:block;
}

nav ol{
	list-style:none;
	margin:0;
	padding:0;
	}

nav li{
	display:block;
	float:left;
	width:20%;
	text-align:center;
	position:relative;
	}
	

nav ol ol{
	list-style:none;
	margin:0;
	display:none;
	background-color:#e9e9e9;
	width:250%;
	position:absolute;
	padding-left:0;
	}
	
	nav ol ol.text{
	margin-left: -100%;
	}
	nav ol ol.web{
	margin-left: -50%;
	z-index:9999;
	}
	nav ol ol.web li{
	text-align:right;
	}
	
nav li li{
	display:block;
	float:none;
	text-align:left;
	width:100%;
	border-bottom:solid 1px #565656;
	padding:10px 9.375% 10px 9.375%;
	}
	
	
nav li li a, nav li li a:link, nav li li a:visited{
	text-decoration:none;
	font: 1em/1.3em Arial, Helvetica, sans-serif;
	color:#20273c;
}
	
	article{
	clear:both;
	}
	
	article p,article h1,article h2{
	padding:0 6.875% 10px 6.875%;
}

article p.text{
	font: 1em/1.5em Arial, Helvetica, sans-serif;
}

div.info, div.alert, div.success, div.tip {
  color: #000000;
  margin: 10px 0;
  padding: 8px 10px 8px 40px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
div.alert {
  background: url("/_/img/uc.gif") no-repeat scroll 7px 5px #CE2D23;
  border-bottom: 1px solid #000000;
  border-top: 1px solid #000000;
  clear:both;
  min-height:80px;
  padding: 8px 10px 8px 110px;
  font-size:1.4em;
  line-height:1.4em;
  
}

div.alert small{
  font-size:.5em;
  line-height:1em;
  display:block;
  text-shadow:none;
  color:#ffffff;
	
}

ul#artworks li{
	text-align:center;
	padding:3px 0;
	display:block;
}
	
	
#artimg, #webimg{
	text-align:center;
	width:100%;
}

article#storyseeds p{
clear:both;
padding-top:10px;
}
div#seedbuttons a{
background-image:url(/_/img/buttons-seeds.png);
height:54px;
font: 1.8125em 'ExistenceLight',Arial, Helvetica, sans-serif;
color:#ce2d23;
text-decoration:none;
	line-height:70px;
	background-repeat:no-repeat;
}

div#seedbuttons i{
background-image:url(/_/img/buttons-seeds.png);
height:56px;
width: 56px;
display:block;
}


a.random{
	display:block;
	background-position:right -73px;
	text-align:right;
	padding-right:9.1666667%;
}

a.random i{
	background-position:-13px -185px;
	float:right;
margin-right:2%;
margin-top:-7px;

}
a.random span{
	float:right;

}
a.search{
	display:block;
	background-position:left 0px;
	text-align:left;
	padding-left:9.1666667%;
	margin-top:10px;
}

a.search i{
	background-position:-78px -185px;
	float:left;
margin-left:2%;
margin-top:-5px;

}
a.search span{
	float:left;

}
.qwerty{
width:8%; height:2em; line-height:2em; float:left; text-align:center; margin:5px 1%; background-color:#FFFFFF; color:#000000; cursor:pointer;
border-radius:3px;
}

.numberkey{
display:none;
}

.searchterm{
	font:1em/1em Arial, Helvetica, sans-serif;
}

.searchkeys{
margin:0 3% 0 3%; clear:both; text-align:center; display:none;
}
.equalizer{
	clear:both;
}
footer{
	background-color:#ffffff;
	color:#565656;
	border-top:1px #000000 dashed;
	min-height:150px;
	margin-top:50px;
}

footer a, footer a:hover, footer:visited{
	color:#CE2D23;
	text-decoration:none;
}

	footer p{
clear:both;
	font: .6875em/1em Arial, Helvetica, sans-serif;
	padding:20px 6.875% 5px 6.875%;
}



/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) #fcd700*/
::-moz-selection{background: #CE2D23; color: #fff; text-shadow: none;}
::selection {background: #CE2D23; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #CE2D23;} 

ins {background-color: #CE2D23; color: #000; text-decoration: none;}
mark {background-color: #CE2D23; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

article#life div{
text-align:center;
	margin:0 auto;
}
article#life ul#sm{
	margin:0 auto;
}

article#life ul#sm li{
background-image:url(/_/img/social-media-icons.png);
background-repeat:no-repeat;
display:inline-block;
margin:5px 2% 5px 2%;
}

article#life ul#sm a{
	width:72px;
	height:72px;
	display:block;
}

article#life ul#sm li:nth-child(4) /*Instagram*/
{
	background-position: 0 0;
}
article#life ul#sm li:nth-child(5) /*Twitter*/
{
	background-position: -78px 0;
}
article#life ul#sm li:nth-child(2)/*Facebook*/
{
	background-position: -155px 0;
}
article#life ul#sm li:nth-child(3)/*LinkedIn*/
{
	background-position: -231px 0;
}

/*Wordpress
article#life ul#sm li:nth-child(7) 
{
	background-position: -305px 0;
}*/
/*Red Bubble*/
article#life ul#sm li:nth-child(7) 
{
	background-position: -305px 0;
}
article#life ul#sm li:nth-child(8) /*s6*/
{
	background-position: -610px 0;
}
article#life ul#sm li:nth-child(8) a /*s6*/
{
	width: 71px;
}

article#life ul#sm li:nth-child(9) /*Wattpad*/
{
	background-position: -521px 0;
}
article#life ul#sm li:nth-child(9) a /*Wattpad*/
{
	width: 85px;
}

article#life ul#sm li:nth-child(6) /*Etsy*/
{
	background-position: -377px 0;
}
article#life ul#sm li:nth-child(1) /*Email*/
{
	background-position: -449px 0;
}

/* Print styles!
-------------------------------------------------------------------------------*/
@media print {



}


/* Media queries!
-------------------------------------------------------------------------------*/
@media screen and (min-width: 590px) {
nav{
	height:52px;
margin-bottom:47px;
}

nav ol {
    position:relative;
    padding-left: 40%;
}

nav li.logo {
    position:absolute;
    left:0;
	width:40%;
transition: left 1s;
-webkit-transition: left 1s; /* Safari */
}


nav div#nblogo{
	background: url(/_/img/logo-bg-tablet.png) no-repeat scroll center 0 transparent;  
	padding-top: 7px;
	height:95px;
	}


[data-icon]:before {
	font-family: 'x';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	color:#ce2d23;
	font-size:85px;
transition: font-size 1s;
-webkit-transition: font-size 1s; /* Safari */
}

nav li {
	width:25%;
}


nav a, nav a:link, nav a:visited{
	font: 1.3em/2.5em 'ChantelliAntiquaRegular',georgia, sarif;

} 	

	h1, h2{
	font: 1.7em/1.4em 'ExistenceLight',Arial, Helvetica, sans-serif;
	}
	
	
/*article p.text{
	font: 1.3em/1.3em Arial, Helvetica, sans-serif;
}*/

article p {
  padding: 0 6.875% 10px 10.875%;
}

article#home{
	float:right;
	width:70%;
}
#homeimg{
	float:left;
	width:30%;
	overflow:hidden;
}

div#homeimg img{
	width:200%;
	max-width:none;
	margin-left:-50%;
}

a.random{
	float:left;
	width:43.333334%;
}
a.search{
	float:right;
	width:43.333334%;
	margin-top:0;
}


article#home{
	float:right;
	width:70%;
}


article#art, article#web{

	float:right;
	width:70%;
}
#artimg, #webimg{
	float:left;
	width:30%;
	overflow:hidden;
}

div#artimg img, div#webimg img{
	width:100%;
	max-width:none;
	margin-left:0;
}

ul#artworks li{
width:48%;
margin:1%;
overflow:hidden;
float:left;
height:150px;
}
ul#artworks li img {
  margin-top: 0;
  max-width: none;
  width: 100%;
}
ul#artworks li img.top1 {
  margin-top: -5%;
}
ul#artworks li img.top2 {
  margin-top: -10%;
}
ul#artworks li img.top3 {
  margin-top: -25%;
}
ul#artworks li img.top4 {
  margin-top: -35%;
}
ul#artworks li img.top5 {
  margin-top: -55%;
}
}
@media screen and (min-width: 775px) {
	
nav li {
	width:15%;
}
article#home{
	float:right;
	width:50%;
}	


#homeimg{
	float:left;
	width:50%;
	overflow:hidden;
}

div#homeimg img{
	width:200%;
	max-width:none;
}

/*
h1, h2{
	font: 1.7em/1.4em 'ExistenceLight',Arial, Helvetica, sans-serif;
	}
	
	
article p.text{
	font: 1.5em/1.5em Arial, Helvetica, sans-serif;
}*/



article#art, article#web{

	float:right;
	width:50%;
}
#artimg, #webimg{
	float:left;
	width:50%;
	overflow:hidden;
}



ul#artworks li{
width:18%;
margin:1%;
overflow:hidden;
float:left;
height:100px;
}
/*ul#artworks li img {
  margin-top: 0;
  max-width: none;
  width: 100%;
}*/
}

@media screen and (min-width: 1024px) {

div#homeimg img{
	width:125%;
	max-width:none;
	margin-left:-15%;
}

}