html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

@font-face { 
font-family: 'SillySet'; 
src: url('fonts/SillySet.eot');
src: url('fonts/SillySet.ttf'); 
}

@font-face { 
font-family:'GreatVibes'; 
src: url('fonts/GreatVibes-Regular.eot');
src: url('fonts/GreatVibes-Regular.ttf'); 
}

@font-face { 
font-family:'AlexBrush'; 
src: url('fonts/AlexBrush-Regular.eot');
src: url('fonts/AlexBrush-Regular.ttf'); 
}

@font-face { 
font-family:'Tribal Garamond'; 
src: url('fonts/Tribal Garamond.eot');
src: url('fonts/Tribal Garamond.ttf'); 
}

@font-face { 
font-family:'SketchTools'; 
src: url('fonts/SketchTools.eot');
src: url('fonts/SketchTools.ttf'); 
}

@font-face { 
font-family:'Express'; 
src: url('fonts/Express.eot');
src: url('fonts/Express.ttf'); 
}

BODY{
background-color:#000000;
color:#eeaaee;
font-weight:400;
}

a , a:link, a:visited, a:hover, a:active{color:#ffbbff; font-weight:900; text-decoration:none;}

#container{
position:relative;
height:800px;
width:100%;
margin-left: auto;
margin-right: auto;
}

#cr{
position:relative;
height:30px;
width:780px;
top:20px;
margin-left: auto;
margin-right: auto;
text-align:center;
}

#content{
position:relative;
height:100%;
width:780px;
top:2%;
margin:0 auto;
}

#bg1{
position:absolute;
height:70%;
width:100%;
top:0%;
left:0px;
background:#f00000;
}

#bg2{
position:absolute;
height:30%;
width:100%;
top:70%;
left:0%;
background:#ffffff;

}

#bg img{
height:100%;
width:100%;
}

#menu{
position:absolute;
height:3%;
width:60%;
left:5%;
opacity:0.9;
display:inline-block;
}

#blurb{
position:absolute;
height:20%;
width:60%;
top:5%;
left:10%;
opacity:0.9;
font-family:'Express';
font-size:20px;
font-weight:400;
color:#aaeeee;
}

#blurb h1{font-family:'SillySet'; display: inline; font-size:140%;}
#blurb h2{font-family:'Times New Roman'; display: inline; font-size:140%;}
.b1{position:relative; left:5%; font-family:'AlexBrush'; font-size:240%; letter-spacing: 0px;}
.b2{position:relative; left:15%; }
.b3{position:relative; left:25%; }
.b4{position:relative; left:15%; }
.b5{position:relative; left:5%; top:5%; font-family:'SketchTools'; font-size:170%;}

#display{
position:absolute;
width:60%;
height:40%;
top:32%;
left:5%;
background:#220022;
opacity:0.8;
overflow:auto;
}

#display div{
margin:2%;
}

.kittens {
display: inline;
width:45%;
height:35%;
}

.kittens img{
width:35%;
height:40%;
}

#thumb {
width:25%;
height:25%;
position:absolute;
background:#220022;
opacity:0.8;
left:70%;

background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.t1{ top:30%; visibility:hidden; }
.t2{ top:7%; visibility:visible; }

#thumb img{
height:83.5%;
width:83.5%:
}

#layouts{
width:25%;
height:40%;
position:absolute;
background:#220022;
opacity:0.8;
top:32%;
left:70%
}

#menu div{
//position: absolute;
width:18%;
height:100%;
text-align:center;
display:inline-block;
}

#menu5 {visibility:hidden;}

.m1{
border:2px solid;
border-color:#aaeeee;
}



#layouts div
{
display: inline-block;
position: absolute;
width:45%;
height:25%;
}

#layouts div img{
height:94%;
width:94%;
z-index:10;
}

.l1 img{
border:2px solid;
border-color:#aaeeee;
}

.l2 img{
border:2px solid;
border-color:#eeaaee;
}

.l3 {
visibility:hidden;
}

#layouts1 {
top:5%;
left:0%;
}
#layouts2 {
top:5%;
left:55%;
}
#layouts3 {
top:38.33%;
left:0%;
}
#layouts4 {
top:38.33%;
left:55%;
}
#layouts5 {
top:71.67%;
left:0%;
}
#layouts6 {
top:71.67%;
left:55%;
}

#lists{
width:780px;
height:200px;
position:relative;
left:0%;
margin-left: auto;
margin-right: auto;
}

.listli{
display:inline-block;
width:24%;
height:100%;
font-size:90%;
}

.listli h1{
font-weight:900;
font-size:125%;
position:relative;
left:15%;
text-decoration:underline;
}

.port {
width: 100%;
position:relative;
}

.portl {
position:relative;
top:10px;
left:10px;
width:25%;
}

.portl img{
width:100px;
height:100px;
}

.portr{
position:relative;
top:-122px;
left:30%;
width:60%;
height:100%;
}

@media (min-width: 700px) {
	#bg1{
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f33434), to(#2F2727));  /* Safari 4-5, Chrome 1-9 */ 
	background: -webkit-linear-gradient(top, #2F2727, #f33434); /* Safari 5.1, Chrome 10+ */ 
	background: -moz-linear-gradient(top, #2F2727, #f33434);  /* Firefox 3.6+ */ 
	background: -ms-linear-gradient(top, #2F2727, #f33434);  /* IE 10 */ 
	background: -o-linear-gradient(top, #2F2727, #f33434); /* Opera 11.10+ */ 

	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#2F2727', endColorstr='#f33434'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#2F2727', endColorstr='#f33434')"; /* IE8 */
	}

	#bg2{
	height:30%;
	background-image:url('images/sunset.svg');
	background-repeat:no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}
}

@media (max-width: 700px) {
	#bg1{
	height:100%;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f33434), to(#2F2727));  /* Safari 4-5, Chrome 1-9 */ 
	background: -webkit-linear-gradient(top, #2F2727, #f33434); /* Safari 5.1, Chrome 10+ */ 
	background: -moz-linear-gradient(top, #2F2727, #f33434);  /* Firefox 3.6+ */ 
	background: -ms-linear-gradient(top, #2F2727, #f33434);  /* IE 10 */ 
	background: -o-linear-gradient(top, #2F2727, #f33434); /* Opera 11.10+ */ 

	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#2F2727', endColorstr='#f33434'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#2F2727', endColorstr='#f33434')"; /* IE8 */
	}

	#bg2{
	visibility:hidden;
	}
	#content{
	position:relative;
	height:100%;
	width:100%;
	top:2%;
	margin:0 auto;
	}
	
	#menu{
	width:90%;
	left:5%;
	//height:10%;
	}
	#menu div{
	position: auto;
	width:20%;
	height:25px;
	text-align:center;
	font-size:16px;
	}
	
	#blurb{
	font-size:100%;
	}
	
	#display{
	position:absolute;
	width:90%;
	height:44%;
	top:30%;
	left:5%;
	}

	#layouts{
	width:90%;
	height:20%;
	top:76%;
	left:5%
	}
	
	#layouts div
	{
	display: inline-block;
	position: static;
	width:30%;
	height:45%;
	}
	
	#lists{
	width:80%;
	height:600px;
	}
	
	.listli{
	display:inline-block;
	width:100%;
	height:24%;
	font-size:90%;
	}
	
	#cr{
	width:100%;
	}
}

@media (max-width: 380px) {

	#blurb{
	font-size:90%;
	}
}

@media (max-width: 320px) {

	#blurb{
	height:20%;
	width:90%;
	top:15%;
	left:5%;
	font-size:90%;
	}
	
	#display{
	position:absolute;
	width:90%;
	height:38%;
	top:36%;
	left:5%;
	}

	#layouts{
	width:90%;
	height:20%;
	top:76%;
	left:5%
	}
	
	#menu{
	width:90%;
	left:5%;
	height:10%;
	}
	#menu div{
	position: static;
	width:100%;
	height:25px;
	text-align:center;
	font-size:18px;
	}
}

@media (max-width: 240px) {
	#blurb{
	height:20%;
	width:90%;
	top:15%;
	left:5%;
	font-size:90%;
	}
}