@import url("_basic.css");

* { outline:none; } 

html,body	{ margin:0; padding:0; height: 100%; width:100%; }

body { 	
	font-family:calibri,trebuchet ms,arial;	
	color:#3b3b3b;	font-size:12px;
	background:#fff url(/images/bg_body.gif) top left; 
}

h1			{ font-size:22px; color:#1a1a1a; margin-top:0; } 
h2			{ font-size:13px; font-weight:normal; font-style:italic; }
a			{ text-decoration:none; color:#00aeef; cursor:pointer;}
a:hover		{ color:#1a1a1a }

#bodyWrapper		{  min-height: 100%; height: auto !important; height: 100%; margin-bottom:-150px; }
#bodyWrapper .spacer { height:150px; }

#headerWrapper 	{ width:100%; height:450px; background:#262626 url(/images/bg_footer.jpg) no-repeat center top;  }
#headerContent	{ width:1000px; position:absolute; top:0; left:50%; margin-left:-500px; z-index:10; padding-top:30px; }


#footerWrapper	{ height:120px; padding-top:30px; width:100%; background:#262626 url(/images/bg_footer.jpg) no-repeat center top; font-size:11px; }
#footerWrapper *	{ color:silver; }



/**
 * menu
 */
#menuBox {
 list-style:none; display:block; float:right;
 -moz-box-shadow:0px 0px 15px #000; -webkit-box-shadow:0px 0px 15px #000;
 -moz-border-radius:5px; -webkit-border-radius:5px;
 background:none; 
 padding:5px 15px; margin:30px 0 0 0;
}
#menuBox li			{ float:left; }
#menuBox li a		{ display:block; font-size:16px; color:#fff; padding:5px 15px 10px;  }
#menuBox li a.active,
#menuBox li a:hover	{ color:#00aeef; }


/**
 * carousel
 */
#carouselBox		{ width:700px; margin:0 auto;  }
#carouselBox ul	{ list-style:none; }
#featureCarousel{ height: 280px; width:960px; position:relative; margin:0 auto;margin-top:30px;font-size:12px; }
#featureCarousel .image 						{ border:0; background:000; }
#featureCarousel .feature 					{ 
	position:absolute;top:-1000px;left:-1000px;
	cursor:pointer; background:#000; 
	-webkit-box-shadow:0px 0px 5px #000; box-shadow:0px 0px 5px #000;
}
#featureCarousel .feature:hover { -webkit-box-shadow:0px 0px 5px #00aeef; }
#featureCarousel .feature .caption 		{  position:absolute; bottom:0px; left:0px; background-color:black; width:100%; }
#featureCarousel .feature .caption p 	{ margin:0; padding:5px; font-weight:bold; font-size:12px; color:white; }
#featureCarousel .blipsContainer { display:none !important; }

#carouselNavigator	{ 
	clear:both; width:730px; height:40px; padding:0 15px;
	background:url(/images/bg_carousel.gif) repeat-x center top; 
	-webkit-border-radius:5px; -moz-border-radius:5px;
	z-index:9999; position:relative;
	margin:0 auto; margin-top:100px; color:#fff;
}
#carouselNavigator>* { float:left; height:40px; line-height:40px; }
#carouselNavigator .carouselAlt		{ width:680px; text-align:center; margin:0; }
#carouselNavigator .carouselNext 	{ width:20px; height:40px; background:url(/images/sprite_arrows.png) 20px top; cursor:pointer; }
#carouselNavigator .carouselNext:hover { background-position:20px bottom; }
#carouselNavigator .carouselPrev 	{ width:20px; height:40px; background:url(/images/sprite_arrows.png) 0px top;cursor:pointer;  }
#carouselNavigator .carouselPrev:hover { background-position:0px bottom; }

#btnViewProject	{ position:absolute; top:0; left:50%; width:203px; height:73px; background:url(/images/btn_view_project.png) no-repeat top left; }

/**
 * content
 */
#contentWrapper	{ width:1000px; margin:150px auto 30px; min-height:100px; }
.box		{ float:left; width:286px; margin-right:30px; padding-right:30px; border-right:1px solid silver; min-height:225px; }
.box h3	{ font-size:18px;  }
.box ul	{ padding:0; margin:0; list-style:none; }
.box ul li { background:url(/images/bullit.png) no-repeat left top; padding-left:20px; line-height:20px; margin-bottom:5px; }
.box ul a { color:#3b3b3b; }
.box ul a:hover { color:#00aeef; }

#boxPrograms			{ border-left:1px solid silver; width:274px; }
#boxPrograms h3		{ margin-left:15px; }
#boxPrograms>div 	{
	border-left:5px solid #0180aa; 
	height:30px; line-height:30px; 
	color:#fff;	background:#7addfd url(/images/bg_skills.jpg) repeat-y;
	border-bottom-right-radius:8px; border-top-right-radius:8px;
	-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px; 	
	margin-bottom:5px; padding-left:15px;
}

#boxProjects { margin:0; }

#form							{ background:#3a3a3a; position:absolute; z-index:10; padding:15px; height:140px; display:none; color:#fff; min-width:260px;  }
#form textarea		{ width:260px; height:55px; margin-bottom:10px; }
#form input				{ width:120px; margin-bottom:10px; }

#boxImages				{ left: 50%;margin-left: -350px;position: absolute;top: 150px;width: 700px;z-index: 20; }
#boxImages img 		{ border:5px solid white; }

#pageContent			{ margin-top:-50px; } 
#pageContent h2		{ font-size:18px; }

#addComment				{ padding:30px; display:block; clear:both; margin:15px 0 1px; background:#f0f0f0; }
#addComment input[type=text] 	{ width:350px; }
#addComment textarea					{ width:718px; height:60px; }

#reactionlist							{ list-style:none; margin:0; padding:0; }
#reactionlist li 					{ display:block; width:100%; margin-bottom:1px; }
#reactionlist li p.title 	{ 
	display:block; border-left:5px solid #0180aa; 
	color:#fff;	background:#7addfd url(/images/bg_skills.jpg) repeat-y;
	padding:5px 15px; margin:0; 
}
#reactionlist li p.txt		{ display:block; margin:0; padding:15px; background:#f0f0f0; font-style:italic; }

#portfolioBox			{ width:1000px;z-index: 20; list-style:none; padding:0; margin:-400px auto 0; }
#portfolioBox li	{ float:left; display:block; width:490px; margin:5px 5px 0 0; cursor:pointer; }
#portfolioBox li h2		{ position:absolute; font-size:0;}
#portfolioBox li .img	{ padding:0; height:175px;width:480px;border:5px solid white;background:#fff; overflow:hidden; }
#portfolioBox li:hover .img { border-color:black; }
#portfolioBox li .txt {
	background:url(/images/bg_black_lines.png);color:#fff;
	width:490px; height:0px; 
	display:none; 
	position:absolute; z-index:15;
	margin:0; overflow:hidden;
}
#portfolioBox li .txt p { padding:15px; margin:0; font-style:italic; }

/* 
 * form 
 */
input							{ background:#fff; border:1px solid silver; padding:5px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:grey; margin-right:2px; }
textarea					{ border:1px solid silver; background:#fff; color: grey; padding:5px; font-size:11px; font-family:Arial, Helvetica, sans-serif; }
textarea:focus,
input:focus				{ border:1px solid #00aeef; }

#form input				{ width:123px; }

#contactformBox 	{ height: 335px;background: white;padding: 30px; }
#contactformBox label { width:150px; display:inline-block; height:25px; } 
#contactformBox input[type=text] 	{ width:450px;  }
#contactformBox textarea					{ width:601px; height:167px; }

.error-input,
.error						{ border:1px solid #C40000; background:#FFB3B3; color:#c40000; }

#errorDiv					{ display:inline-block; color:#c40000;  }

/**
 * main styles
 */
.blue		{ color:#00aeef }
.white		{ color:#fff; }
.black		{ color:#3b3b3b; }

.button		{ 
	display:block; height:25px; 
	color:#fff; line-height:25px;  text-align:center; 
	background:url(/images/bg_button.gif) repeat-x left -1px;
	padding:0 15px; cursor:pointer; 
	border:1px solid transparent; 
}
.button.fb 			{ background:url(/images/bg_button.gif) repeat-x left -28px; } 
.button.tw 			{ background:url(/images/bg_button.gif) repeat-x left -55px; color:#3b3b3b !important;}
.button.gr 			{ background:url(/images/bg_button.gif) repeat-x left -82px; color:#3b3b3b !important;}
.button:hover,
.button:active { border:1px solid #00aeef; color:#fff; }