html { background-color:#000; }

html, body {
	/* Height and width fallback for older browsers. */
	height: 100%;
	width: 100%;

	/* Set the height to match that of the viewport. */
	height: 100vh;

	/* Set the width to match that of the viewport. */
	width: 100vw;

	/* Remove any browser-default margins. */
	margin: 0;
}

body {
	font-size: 0.75em;

	font-family: 'Quicksand', sans-serif;
	color: #eceff1;
	line-height: 1.5; 
	width:100%;
	overflow:hidden;
	position:relative;
	background-image:url('/_images/webbg.jpg');
	background-position:center bottom;
	background-repeat:no-repeat;

}

/*
new body
body {
	font-size: 0.75em;

	font-family: 'Quicksand', sans-serif;
	color: #eceff1;
	line-height: 1.5; 
	width:100%;
	overflow:hidden;
	position:relative;
	background-image:url('/_images/webbg2.jpg');
	background-position:center top;
	background-repeat:no-repeat;
	background-size: auto 100%;

}
*/

canvas {
	position:absolute;
	bottom:0px;
    left: 0px;
	overflow:hidden;
	height:80%;
	width:100%;
	min-width:1200px;
	opacity: 0.3;
	z-index:3;
}

#frontimage { position:relative; z-index:2; width:1050px; height:423px; overflow:hidden; }
#frontimage img { position:relative; z-index:2; }

h1 { font-size:2.5em; margin:15px 0 40px 0; color:#B0201C; }
h3 { margin-top:25px; clear:both; }

.prefog { position:absolute; bottom:0; left:0; width:100%; height:40%; overflow:hidden; z-index:0; }
.prefog img { width:120%; height:100%; opacity:0.8; margin-left:-10%; }

.wrapper { width:1050px; margin:0 auto; height:100%; height: 100vh; z-index:999; position:relative;}


			.contentwrapper {
				background-image:url('/_images/25.png');
				padding:25px;
			}

			.content { 
				width:100%; 
				margin:0 auto; 
				height:57%;
				height:57vh;
				min-height:30vh; 
				overflow-x:hidden; 
				overflow-y:auto; 
				color:#fff;
				padding:5px;
				line-height:160%;
				text-align:justify;
			}
			.contentpadding { /*display:none;*/ padding:5px 25px 5px 0; }


.menuwrapper { position:relative; clear:both; height:17%; height:17vh; width:100%; min-height:95px; }
.menu { position:absolute; left:0; bottom:70px; width:100%; text-align:center;  }

ul.mainmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.mainmenu li {
    float: left;
}

ul.mainmenu li a {
    display: block;
    margin:0 20px;
	color:#B0201C;
	text-decoration:none;
	font-size:18pt;
	font-weight:700;
}


ul.mainmenu li a:hover {
	color:#dd2c29;
}


#extrasmenu { margin-left:10px; }

ul.extrasmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.extrasmenu li {
    float: left;
}

ul.extrasmenu li a {
    display: block;
    margin:0 10px;
	color:#B0201C;
	text-decoration:none;
	font-size:13pt;
	font-weight:600;
}

ul.extrasmenu li a:hover {
	color:#dd2c29;
}

ul.extrasmenu li a.active {
	color:#EE9795;
}


.sharing { height:50px; clear:both; margin:-10px -12px 0 0; }
.addthis_sharing_toolbox {
	float:right;
}

.image200 { float:right;width:200px;margin:0 0 15px 40px;border:1px solid black; }
.image300 { float:right;width:300px;margin:0 0 15px 40px;border:1px solid black; }

.character {     }
.bio { font-size:0.9em; font-style: italic; }

.at-follow-label { color:#000; font-weight:bold; }

			/* Let's get this party started */
			::-webkit-scrollbar {
				width: 8px;
			}
			 
			/* Track */
			::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
				-webkit-border-radius: 8px;
				border-radius: 8px;
			}
			 
			/* Handle */
			::-webkit-scrollbar-thumb {
				-webkit-border-radius: 8px;
				border-radius: 8px;
				background: rgba(200,0,0,0.8); 
				-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
			}
			::-webkit-scrollbar-thumb:window-inactive {
				background: rgba(127,127,127,0.4); 
			}



			@media (max-width:1030px){
				.wrapper { width:90%; }
			
			}


.copyright {
	text-align:center;
	font-size:9pt;
	color:#1F1F1F;
	font-family:verdana;
	margin-top:5px;
}
.copyright a { text-decoration:none; color:#3B3B3B; }
.copyright a:hover { color:#A25E5B; }


@media screen and (min-width: 500px) {
  /* line 32, /Users/miguelperez/Sites/csstricks/source/stylesheets/layout.css.scss */
  body {
    font-size: 1em; } }
/* line 38, /Users/miguelperez/Sites/csstricks/source/stylesheets/layout.css.scss */
a {
  color: #4472B9;
  text-decoration: none;
  transition: color 0.15s ease-in; }
  /* line 42, /Users/miguelperez/Sites/csstricks/source/stylesheets/layout.css.scss */
  a:hover {
    color: #3D67A6; }
  /* line 45, /Users/miguelperez/Sites/csstricks/source/stylesheets/layout.css.scss */
  a:active, a:focus {
    color: #222; }

/* line 54, /Users/miguelperez/Sites/csstricks/source/stylesheets/layout.css.scss */
code {
  font-weight: bold; }



@media screen and (max-width: 768px) {

	/* TABLETS */



}

@media screen and (max-width: 640px) { 
	/* PHONES */

	body { overflow:auto; background:none; }
	canvas { display:none; }
	.wrapper { height:auto; width:100%;  }
	.content { height:auto; padding-bottom:50px;}
	.prefog { position:fixed }
	.image200 { float:none; width:100%; margin:0; }
	.image300 { float:none; width:100%; margin:0; }
	.sharing { display:none; }
	.menuwrapper { height:50px; min-height:initial; }
	.menu { bottom:0; }
	ul.mainmenu li a { font-size:12pt; }
	.contentpadding { padding:0; }
}