/* CSS styles for web standards browsers */

/* import CSS for compliant browsers */
/* ------------------------------------------------------- */
@import url(reset.css);
@import url(typography.css);


/* overrule basic.css styles */
html {
background: #f3e6d6;
background: url(../images/bedge_grunge.png); 
}

body {	
margin: 0;
padding: 0;
padding-top: 20px;
background: fixed url(../images/transparent_gradient.png) repeat-x; 
font: normal 100%; }

img { 
max-width: 100%; }

.clearboth {
clear:both; }

#wrapper {
background: #faf6ed url(../images/debut_light.png);
margin: 0 auto;
padding: 0;
overflow: hidden;
width: 90%;
max-width: 1115px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
margin-bottom: 20px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5); }

#inner-wrapper {
position: relative;
z-index: 99;
width: 90%;
margin: 0 auto; }


a.button {
    display: block;
    float: left;
    position: relative;
	padding: .5em 2em;
    margin: 0 10px 18px 0;
    border: 1px solid #a2411e;
    text-decoration: none;
    font-weight: bold;
    line-height: 25px;
    text-align: center;
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .2em;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
    border-radius: 5px;
  }

  a.button:before,
  a.button:after {
    content: '';
    position: absolute;
    left: -1px;
    bottom: -1px;
    
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
    border-radius: 5px;
  }

  a.button:before { 

    bottom: -4px;
    border-top: 0;
    
    -webkit-border-radius: 0 0 5px 5px; 
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    
    -webkit-box-shadow: 0 1px 1px 0px #bfbfbf;
    -moz-box-shadow: 0 1px 1px 0px #bfbfbf;
    box-shadow: 0 1px 1px 0px #bfbfbf;
  }
  
  .button span {
  font-size: 2em;}
  /* GRAY */
  a.gray,
  a.gray:hover,
  a.gray:visited {
    color: #fff;
    border-bottom: 4px solid #a2411e;
    text-shadow: 0px -1px 0px #4f1804;
    
    background: #D0633C;
    background: -webkit-gradient(linear, left top, left bottom, from(#E06A41), to(#D0633C));
    background: -moz-linear-gradient(top,  #E06A41,  #D0633C);
    
    box-shadow: inset 0 0 0 1px #e29072;
  }

  .gray:before,
  .gray:after {
    
  }

  a.gray:hover {
    background: #D0633C;
    background: -webkit-gradient(linear, left top, left bottom, from(#D0633C), to(#E06A41));
    background: -moz-linear-gradient(top,  #D0633C,  #E06A41);
  }

  /* ACTIVE STATE */
  a.button:active {
    border: none;
    bottom: -4px;
    margin-bottom: 22px;
    
    -webkit-box-shadow: 0 1px 1px #fff;
    -moz-box-shadow:  0 1px 1px #fff;
    box-shadow:  1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);
  }

  a.button:active:before,
  a.button:active:after {
    border: none; 
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

#top_butterfly {
background: url(../images/topbfly.png) no-repeat;
width: 154px;
height: 125px;
margin: 0 auto;
margin-top: 5px; }
	
#navigation {
text-align: center;
margin-bottom: 50px;
margin-top: 50px;
text-transform: uppercase;
font-size: .9em;
font-family: "museo-sans-1","museo-sans-2",sans-serif; }

#navigation ul {
margin: 0 auto;
display: inline-block;
line-height: 1em; }

#navigation select {
display: none; }

#navigation ul li {
display: inline;
display: inline-block;
font-weight: bold; }
   
#navigation ul li a {
display: block;
float: left;
color: #3C3E44;
padding: 7px 15px 7px 15px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-right: 10px;
text-decoration: none;
font-weight: bold;
transition: background .25s linear;
-webkit-transition: background .25s linear;
-moz-transition: background .25s linear; }

#navigation ul li a:hover {
color: #ffffff;
background: #E06A41;
text-shadow: none;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
transition: background .25s linear;
-webkit-transition: background .25s linear;
-moz-transition: background .25s linear;
/*border-bottom: 1px solid #ffffff;*/ }

#navigation ul li a.active {
color: #ffffff;
background: #E06A41;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
/*border-bottom: 1px solid #ffffff;*/ }

.thick_line {
	border: 10px solid #f2c6a0;
	font-size: 0;
	margin-top: 30px;
	margin-bottom: 30px;
	opacity: 0.4;
}

.bevel_line {
height: 2px;
background: url(../images/footer_bevel.gif) repeat-x;
font-size: 0;
margin-bottom: 30px;
margin-top: 30px; }

.bevel_line hr {
display: none; }

.thick_line hr {
display: none; }


ul.boxy {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
list-style: none;
margin: 0;
padding: 0; }

.masking_tape {
background: url(../images/masking_tape.png) no-repeat;
position: absolute;
margin-top: -30px;
left: 1.2em;
width: 22px;
height: 28px;}

.masking_tape_2 {
background: url(../images/masking_tape.png) no-repeat;
position: absolute;
right: 1.2em;
margin-top: -30px;
width: 22px;
height: 28px;}

ul.boxy li {
text-align: center;
position: relative;
display: inline-block;
vertical-align: top;
width: 26.8%;
padding: 2%;
border: 1px solid #efefef;
margin: 0 3% 5% 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }


ul.boxy li:before,
ul.boxy li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }

ul.boxy li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }

ul.boxy li:nth-child(3n+3) {
margin-right: 0!important; }

ul.boxy li img {
width: 100%;
max-width: 100%; } 

ul.boxy li a img {
background: none !important; } 

ul.boxy p {
margin-bottom: 0; } 





.col1, .col2, .col3 {
width: 30%;
float: left;
margin-right: 5%;
margin-bottom: 4em; }

.col3 {
margin-right: 0;
margin-bottom: 50px; }

.colinv {
	width: 100%;
	float: left;
	margin-right: 0;
	margin-bottom: 25px;
}

.col1 ul li img {
margin-right: 5px; }

.span2 {
width: 624px;
margin-right: 0; }

.box {
background: url(../images/box.png) no-repeat;
width: 292px;
height: 171px; }

#footer-wrapper {
width: 100%;
background: #252622;
height: 400px;
float: left;
margin-top: 30px;
padding-top: 30px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px; }

#footer {
width: 90%;
margin: 0 auto;
color: #FFFFFF;
font-size: .93em; }

ul#social_links li {
	margin-bottom: 7px;
	background-position: left center;
	color: #686a61;
}


/* iPhone screen landscape */
@media (max-width:480px) {
	#wrapper {
		width: 95%; }
	h1 {
		width: 100%;
		font-size: 3.2em;
		margin-bottom: 1em; }
	
	#latest_illustration {
		width: 100%;
		position: relative;
		margin-top: 0; }
		
	.col1, .col2, .col3 {
		width: 100%;
		position: relative;
		margin-right: 0; }
		
	#navigation {
		height: auto;
		width: 100%;
		margin-top: .7em;
		margin-bottom: 1em;
		font-size: 2em; }

	#navigation ul li {
		display: block;
		width: 100%; }
	
	#navigation ul li a {
		display: block;
		width: 90%;
		float: none;
		margin-right: 0; }
		
	ul#showcase {
		width: 100%;
		overflow: auto;
		margin-bottom: 3em; }
		
	ul#showcase li {
		display: inline-block;
		width: 100%;
		text-align: center; }
		
	#footer-wrapper {
		height: 100%; }
		
	#footer-wrapper .col1, .col2, .col3 {
		margin-bottom: .5em; } 
		
	.post {
		width: 100%;}
	
	#aside {
		width: 100%; }
		

	#navigation ul     { display: none; }
  	#navigation select { display: inline-block; }
  	
  	ul.boxy li {
	width: 95%;
	margin: 0 0 10% 0; }

}

/* iPhone screen portrait */
@media screen and (max-width: 320px) { 

	#wrapper {
		width: 97%; }
	h1 {
		width: 100%;
		font-size: 3.2em;
		margin-bottom: 1em; }
	
	#latest_illustration {
		width: 100%;
		position: relative;
		margin-top: 0; }
		
	.col1, .col2, .col3 {
		width: 100%;
		position: relative;
		margin-right: 0; }
		
	#navigation {
		height: auto;
		width: 100%;
		margin-top: .7em;
		margin-bottom: 1em;
		font-size: 2em; }

	#navigation ul li {
		display: block;
		width: 100%; }
	
	#navigation ul li a {
		display: block;
		width: 90%;
		float: none;
		margin-right: 0; }
		
	ul#showcase {
		width: 100%;
		overflow: auto;
		margin-bottom: 3em; }
		
	ul#showcase li {
		display: inline-block;
		width: 100%;
		text-align: center; }
		
	#footer-wrapper {
		height: 100%; }
		
	#footer-wrapper .col1, .col2, .col3 {
		margin-bottom: .5em; }
	
	.post {
		width: 100%;}
	
	#aside {
		width: 100%; }
	
	
	#navigation ul     { display: none; }
  	#navigation select { display: inline-block; }
  	
  	ul.boxy li {
	width: 95%;
	margin: 0 0 10% 0; }
	
	#portfolio_description {
	float: none;
	width: 90%; }
	
	#porfolio_example_container {
	float: none;
	width: 100%; }

	.portfolio_example {
	width: 100%; }
	
	body#contact h1 {
	float:none;
	text-align: center;
	width:100%; }

}

@media (max-width:680px) {

	ul.boxy li {
	width: 95%;
	margin: 0 0 10% 0; 
	
	#portfolio_description {
	float: none;
	width: 90%; }
	

	
}

@media (max-width:823px) {

	.col1, .col2, .col3 {
		width: 100%;
		position: relative;
		margin-right: 0; }
		
	#footer-wrapper {
		height: 100%; }
		
	#footer-wrapper .col1, .col2, .col3 {
		margin-bottom: .5em; }
	
	.post {
		width: 100%;}
		
	#portfolio_description {
	float: none;
	width: 90%; }
		
		
		

}

@media (max-width:923px) {
	

	
	
	

}