/* CSS Bram.info */

html
	{ 
	background: transparent;
	}

html, body, div,
h1, h2, h3, h4, h5, h6, p, img,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table,tbody, tfoot, thead, tr, th, td 
	{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	font-family: Helvetica, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:14px;
	line-height:20px;
	color: #c1c1c1;
	}
	
body 
	{
	line-height: 1;
	background: #000 url(img/galaxy.jpg) repeat-x top;
	}
	
ol, ul 
	{
	list-style: none;
	}
	
	
:focus 
	{
	outline: 0;
	}


table {
	border-collapse: collapse;
	border-spacing: 0;
	}

a
	{
	color: #000;
	text-decoration: none;
	font-weight: bold;
	}

a:hover
	{
	color: #ed1373;
	}

#menu a
	{
	text-transform: uppercase;
	font-size: 1.1em;
	}


input,textarea
	{
	border: none;
	padding: 5px;
	float: left;
	font-style: italic;
	font-family:"Myriad Pro", "Myriad Pro Cond", "Myriad Pro Light";
	font-size: 14px;
	color: #414141 !important;
	resize: none;
	}

fieldset
	{
	border: none;
	}

form
	{
	margin: 0;
	padding: 0;
	}

input.button
	{
	width:100px !important;
	display: block;
	cursor: pointer;
	}

label{
display: none;
}

/* Layout
----------------------------------------------------------- */

#wrapper
	{ 
	width:100%; 
	height:100%; 
	position:absolute; 
	bottom:0; 
	left:0; 
	overflow:hidden;
	min-height: 600px; 
	}


#mask		
	{ 
	width:500%; 
	height:100%; 
	}


.box		
	{ 
	width:20%; 
	height:100%; 
	float:left;
	position: relative;
	}
	

.content	
	{ 
	bottom:0;
	height:75%;
	left:50%;
	margin-left:-480px;
	position:absolute;
	width:960px;
	}
		
				
.inner		
	{
	width:900px; 
	height:100%;
	min-height: 500px;
	position:absolute;
	bottom: 0;
	}



/* Header
----------------------------------------------------------- */

#menu				
	{ 
	position:absolute; 
	top:0px; 
	z-index:10; 
	left: 50%;
	overflow: hidden;
	display: block;
	margin: 0 0 0 -450px;
	padding: 0;
	width:950px;
	}
	
	
#menu	li{
	padding: 0;
	margin: 0;
	}

#menu li.hider
    {
	padding-top:28px;
	width:350px;
	color: #666;
	visibility: hidden;
    }
	
#menu a	
	{ 
	color: #CCC; 
	text-decoration:none; 
	display: block;
	padding:30px 10px 7px 10px;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	}
	
					
#menu a:hover
	{
	color:#1593bd;
	text-decoration:none;
	}
	

#menu a.selected
	{ 
	background:url(img/menu.png) no-repeat 0 bottom;
	color:#FFF;
	}
	
#menu a.home{
	width:90px;
	}

#menu a.portfolio{
	width:87px;
	background-position: -119px bottom;
	}

#menu a.about{
	width:90px;
	background-position: -229px bottom;
	}
			
#menu a.network{
	width:100px;
	background-position: -350px bottom;
	}

#menu a.contact{
	width:100px;
	background-position: right bottom;
	}		
					
#menu li			
	{
	float:left;
	}


/* Landscape CSS
----------------------------------------------------------- */


.brampie					
	{ 
	width:100%; 
	height:238px; 
	overflow:hidden; 
	position: absolute; 
	bottom: 0;  
	z-index: 5; 
	}


#rockylandscape		
	{ 
	width:3000px; 
	height:100%; 
	background: url(img/landscape.png) repeat-x 25px bottom;
	}



/* Road CSS
----------------------------------------------------------- */


#bram2					
	{ 
	position:absolute; 
	bottom:50px; 
	height: 231px;
	}


.brampie-big				
	{ 
	width:4000px; 
	height:100%; 
	background: url(img/road.png) repeat-x bottom;
	}


.brampie_a
	{
	width:100%; 
	height:95%; 
	overflow:hidden; 
	position: absolute; 
	z-index: 3;
	}



/* Furthest landscape  CSS
----------------------------------------------------------- */

#bram3
	{
	position: absolute; 
	bottom: 20px;
	z-index: 2;
	height: 216px;
	}


#bram3 .brampie-big
	{
	background: url(img/landscapefar.png) repeat-x bottom; 
	height:85%;
	}
	
	
	
/* Logo  CSS
----------------------------------------------------------- */

#bram0
	{
	position: absolute; 
	bottom: 600px;
	right: 50px;
	z-index: -2;
	}


#bram0 .brampie-big
	{
	background:  url(img/logo.png) no-repeat 40px bottom;
	height:68%;
	z-index: 16;
	}
#logo
	{
	z-index:-2;
	background: url(img/logo.png) no-repeat;
	position:absolute;
	top:7px;
	left:-12px;
	width:350px;
	height:125px;
	}
#icons
	{
	z-index:15;
	background:no-repeat;
	position:absolute;
	top:140px;
	left:24px;
	width:300px;
	height:25px;
	visibility: hidden;
	
	}


/* Trees  CSS
----------------------------------------------------------- */

#bram4
	{
	position: absolute; 
	bottom: 150px;
	z-index: 1;
	height: 264px;
	}


#bram4 .brampie-big
	{
	background: url(img/trees.png) repeat-x 20px bottom;
	height:100%;
	}

/* Spaceships CSS
----------------------------------------------------------- */

#bram7
	{
	position: absolute; 
	bottom: 0;
	z-index: 1;
	}


#bram7 .brampie-big
	{
	background: url(img/spaceships.png) repeat-x 240px 90px;
	height:68%;
	}
	
	

/* Stars on top CSS
----------------------------------------------------------- */

#bram5
	{
	position: absolute; 
	bottom: auto;
	z-index: 1; 
	top:0;
	height: 86px;
	}


#bram5 .brampie-big
	{
	background: url(img/topstars.png) repeat-x top left; 
	height:100%;
	}

/* Planets  CSS
----------------------------------------------------------- */

#bram6
	{
	position: absolute; 
	bottom: auto;
	z-index: 0; 
	top:0;
	}


#bram6 .brampie-big
	{
	background: url(img/planets.png) repeat-x 280px 100px; 
	height:100%;
	}



/* Parked spaceship CSS
----------------------------------------------------------- */

#bram8
	{
	position: absolute; 
	bottom: auto;
	z-index: -1; 
	bottom:100px;
	height: 360px;
	}


#bram8 .brampie-big
	{
	background: url(img/parkedspaceship.png) no-repeat 130px 60%; 
	height:100%;
	}
	
/* Avatars
----------------------------------------------------------- */

.avatar
	{
	width:800px;
	height: 500px;
	z-index: 2;
	position: absolute;
	bottom: 65px;
	text-indent: -999px;
	right: -100px;
	background: transparent url(img/meteorite.png) no-repeat bottom right;
	overflow: hidden;
	}


.avatar.bigalien
	{
	background-image:url(img/bigalien.png);
	width:442px;
	bottom: -50px;
	}

.avatar.greenie
	{
	background-image:url(img/greenie.png);
	z-index: 4;
	right: 64px;
	bottom: 35px;
	width:234px;
	}

.avatar.lightning
	{
	background-image:url(img/lightning.png);
	width:303px;
	z-index: 3;
	bottom: -17px;
	right: -120px;
	}
	
	
.avatar.astronaut
	{
	background-image:url(img/astronaut.png);
	width:303px;
	z-index: 3;
	bottom: -20px;
	right: 0px;
	}


#box1 .content .inner
	{
	z-index: 3;
	right: 0;
	bottom:110px;
	width:480px; 
	}


#box2 .content .inner, #box3 .content .inner
	{
	right: -3%;
	width:900px; 
	bottom: 30px;
	}
	
#box4 .content .inner, #box5 .content .inner{
	bottom:80px;
	}


#box2 .content .inner .paper
	{
	z-index: 2;
	background-position: 920px top;
	width:930px;
	left: auto;
	right:245px;
	bottom:0;
	border-radius:15px;
	padding-right:10px;
	padding-left:35px;
	letter-spacing:5px;
	}
	
	
#box2 .content .inner.cont,  #box2 .content .inner .paper.cont{
right: 0;
width:1004px;
}


#box3 .content .inner .paper
	{
	z-index: 1;
	background-position: 520px top;
	bottom:0px;
	border-radius:15px;
	padding-right:15px;
	padding-left:15px;
	}
	
#box4 .content .inner .paper
	{
	z-index: 1;
	bottom:-80px;
	background-position: 320px top;
	left:240px;
	border-radius:15px;
	}
#box4 .content .inner .paper a
	{
	opacity:0.7;
	}
#box4 .content .inner .paper a:hover
	{
	opacity:1.0;
	}
	
#box5 .content .inner .paper
	{
	z-index: 3;
	bottom:-80px;
	background-position: 120px top;
	border-radius:15px;
	}


.box .content .inner .paper
	{
	background: transparent url(img/bgfile.png) repeat-x top left;
	height:610px;
	position: relative;
	left: 0;
	width: 555px; 
	bottom: 0;
	z-index: 1;
	opacity:.9;
	overflow: hidden;
	}
	
/* Titles
----------------------------------------------------------- */

.box .content .inner .paper h1
	{
	width:293px;
	overflow: hidden;
	height: 44px;
	background: transparent url(img/titles.png) no-repeat 0 0;
	text-indent: -999px;
	margin-top: 30px;
	margin-left: 250px;
	}

#box2 .content .inner .paper h1
	{
	background-position: 25px 0;
	margin-left:-25px;
	margin-bottom:15px;
	}

#box3 .content .inner .paper h1
	{
	background-position: 60px -45px;
	position:absolute;
	right:390px;
	}

#box4 .content .inner .paper h1
	{
	background-position: 0px -95px;
	position:absolute;
	right:275px;
	}

#box5 .content .inner .paper h1
	{
	background-position: 0px -155px;
	position:absolute;
	right:280px;
	}
	
	
/* Portfolio
----------------------------------------------------------- */
	

div.portfolio_list
	{
	width:502px;
	overflow: hidden;
	margin: 10px auto 0 auto;
	height: 280px;
	}

div.portfolio_list h2
	{
	color: #414141;
	padding-bottom: 9px;
	font-size: 18px;
	display: block !important;
	font-family: Arial, "Trebuchet MS", "Lucida Grande";
	}

div.portfolio_list .project
	{
	padding: 0 0 20px;
	float: left;
	background: transparent url(img/portfolio_bg.png) no-repeat center 23px;
	margin: 0 15px;
	width:220px;
	
	}

div.portfolio_list .project p{
padding: 15px 0 0 0;
overflow: hidden;
line-height: 16px;
}

div.portfolio_list .project.alt{
margin-right: 0;
}

div.portfolio_list .project a
	{
	display: block;
	clear: both;
	font-size: 11px;
	text-align: center;
	}


div.portfolio_list .project a img
	{
	border: 3px solid #414141;
	opacity:.85;
	width:204px;
	height: 160px;
	display: block;
	margin: 0 auto;
	}
	

div.portfolio_list .project a:hover img,
div.portfolio_list .project a img:hover 
	{
	opacity:1;
	border-color:#767f68;
	}

.grouplayout {
	border: 1px solid #BBB;
	padding: 3px;
	margin: 10px 20px 10px 0;
	vertical-align: top;
	border-radius:2px;
}
	
	
/* Easy Slider */

	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
		
		
	#slider, #slider li{ 
		/* 
			define width and height of container element and list item (slide)
			list items must be the same size as the slider area
		*/ 
		overflow:hidden; 
		}
		
		#slider{
		width:100%
		}
		
		
		#slider li{
		width:502px;
		}
		
		a.prev, a.next{
		top:35px;
		position: absolute;
		right: 125px;
		background: transparent url(img/prev_next.png) no-repeat 0 0;
		width:82px;
		height:31px;
		overflow: hidden;
		text-indent: -999px;
		display: block;
		cursor: pointer;
		}
		
		a.prev:active{
		background-position: 0 -35px;
		}
		
		a.next{
		right: 40px;
		background-position: -85px 0 ;
		}
		
		a.next:active{
		background-position: -85px -35px ;
		}

	ul.slide li{
	float: left;
	}	
/* // Easy Slider */

/* About Me
----------------------------------------------------------- */	

div.aboutme img
	{
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	display: block;
	}

div.aboutme
	{
	padding: 10px 20px;
	}
	
div.aboutme p
	{
	padding: 20px 170px 0 0;
	text-align: left;
	color:#414141;
	font-size:1.3em;
	}

div.aboutme .firstabout
	{
	padding-top: 65px;
	}

	
div.aboutme p a
	{
	color:#1593bd;
	}
	

/* Contact Form
----------------------------------------------------------- */

#contact_form
	{
	width:500px;
	margin: 0 28px;
	clear: both;
	height: 200px;
	padding-top: 20px;
	position: relative;
	}
	
	#contact_form *{
	overflow: hidden;
	}
	
	#contact_form ul{
	float: left;
	width:200px;
	margin: 0;
	padding: 0;
	}

#contact_form ul.comment_area li{
padding: 0 0 5px 0;
}
	
#contact_form ul.comment_area{
width:300px;
}
	
	
#contact_form input#name{
background:url(img/name.png) no-repeat 0 -6px;
}

#contact_form input#email{
background:url(img/email.png) no-repeat 0 -6px;
}

#contact_form input#phone{
background:url(img/phone.png) no-repeat 0 -6px;
}


#contact_form input{
padding: 10px 10px 10px 30px;
width:205px !important;
overflow: hidden;
}

#contact_form ul, #contact_form li
	{
	list-style: none;
	}

#contact_form li
	{
	clear: both;
	position: relative;
	overflow: hidden;
	padding: 0 0 10px 0;
	}


#contact_form input.button
	{
	float: right;
	margin-right: 10px;
	background: url(img/send_btn.png) !important;
	color: #FFF;
	display: block;
	width:84px !important;
	height: 30px;
	overflow: hidden;
	text-indent: -999px;
	line-height: 0;
	padding: 0;
	font-size: 0;
	}

#contact_form input.button:hover{
	background-position: 0 -32px !important;
}

#contact_form input.button:focus{
	background-position: 0 -64px !important;
}

#contact_form li.comments label, #contact_form li.comments textarea
	{
	clear: both;
	}

#contact_form li .error
	{
	position: absolute;
	top:0;
	right: 10px;
	background: #bf1b1b;
	width: 48px;
	color: #FFF;
	text-align: right;
	font-size: 12px;
	padding: 0 5px;
	}

#contact_form li label
	{
	float: left;
	width: 70px;
	}
	
 #contact_form textarea
 	{
	background:transparent url(img/comment_bg.png) no-repeat scroll 0 0;
	float:right;
	height:101px;
	overflow:auto;
	padding:20px;
	width:250px;
 	}
 
 div#message{
 margin: 30 auto;
 width:500px;
 text-align: center;
 }
 
  div#message h2{
  padding: 0 0 10px 0;
  }
 .contactstyle {
	margin-top: 16px;
	color:#333;
 }
 .lazy li {
	font-size: 1.4em;
 }
 .lazy a {
	color: #1593bd !important; 
 }
 .contentpic {
	position: absolute;
	top: 120px;
	right:40px; 
 }