@charset "utf-8";
body,
html {
	margin:0;
	padding:0;
	color:#000;
	background-color: #1b1b1b;
	font-family: Arial, Helvetica, sans-serif;
}
div {
	display: block;
}
#topPage {
	background-image:url(images/topbackground.png);
	background-repeat:repeat-x;
	background-attachment:scroll;
	background-color:#F1F1F1;
}
#topWrap {
	display: block;
	width: 1000px;
	margin: 0 auto;
}
#header {
	width: 100%;
	height: 114px;
}
#headerLogo {
	width: 300px;
	padding: 0;
}
#headerNav {
	width: 700px;
	margin-left: 300px;
	margin-top: -115px;
}
#navMenu{
	display: inline;
	margin: 0;
	padding: 0px;
	position: relative;
}
#navMenu li{
	float: left;
	display: inline;
}
a.navHome, a.navHome_a{
	display:block;
	float:left;
	width:143px;
	height:54px;
	background: url("images/navhome.png");
	background-repeat:no-repeat;
}
a.navHome:hover{
	background: url("images/navhome.png") 0 108px;
}
a.navHome_a{
	background: url("images/navhome.png") 0 54px;
}
a.navAbout, a.navAbout_a{
	display:block;
	float:left;
	width:136px;
	height:54px;
	background: url("images/navabout.png");
	background-repeat:no-repeat;
}
a.navAbout:hover{
	background: url("images/navabout.png") 0 108px;
}
a.navAbout_a{
	background: url("images/navabout.png") 0 54px;
}
a.navPortfolio, a.navPortfolio_a{
	display:block;
	float:left;
	width:137px;
	height:54px;
	background: url("images/navportfolio.png");
	background-repeat:no-repeat;
}
a.navPortfolio:hover{
	background: url("images/navportfolio.png") 0 108px;
}
a.navPortfolio_a{
	background: url("images/navportfolio.png") 0 54px;
}
a.navBlog, a.navBlog_a{
	display:block;
	float:left;
	width:135px;
	height:54px;
	background: url("images/navBlog.png");
	background-repeat:no-repeat;
}
a.navBlog:hover{
	background: url("images/navBlog.png") 0 108px;
}
a.navBlog_a{
	background: url("images/navBlog.png") 0 54px;
}

a.navContact, a.navContact_a{
	display:block;
	float:left;
	width:144px;
	height:54px;
	background: url("images/navContact.png");
	background-repeat:no-repeat;
}
a.navContact:hover{
	background: url("images/navContact.png") 0 108px;
}
a.navContact_a{
	background: url("images/navContact.png") 0 54px;
}
#contentWrap {
	height: 415px;
	padding-left: 50px;
	padding-right: 50px;
}
#mainContent {
	float: left;
}
#mainContentText {
	width: 500px;
	float: left;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.largerText {
	font-size: 20px;
	font-style: italic;
}
#mainContentExampleWrap {
	text-align: left;
	margin-top:20px;
}
#mainContentImagesWrap {
	margin-left: 20px;
}
#mainContentImages {
	display: inline;
	margin: 0;
	padding: 0px;
	position: relative;
}
#mainContentImages li{
	float: left;
	display: inline;
}
a.smallShowcase1 {
	display:block;
	width:115px;
	height:115px;
	background-image:url(images/smallshowgalleria.png);
	background-repeat:no-repeat;
}
a.smallShowcase2 {
	display:block;
	width:115px;
	height:115px;
	background-image:url(images/smallshowcaseairport.png);
	background-repeat:no-repeat;
}
a.smallShowcase3 {
	display:block;
	width:115px;
	height:115px;
	background-image:url(images/smallshowedu.png);
	background-repeat:no-repeat;
}
a.smallShowcase4 {
	display:block;
	width:115px;
	height:115px;
	background-image:url(images/smallshowcaseterrain.png);
	background-repeat:no-repeat;
}
#sideContentWrap {
	margin-top: -30px;
	margin-left: 50px;
	width: 350px;
	float: left;
}
#sideContentImage{
	display: inline;
	margin: 0;
	padding: 0px;
	position: relative;
}
#sideContentImage li{
	float: left;
	display: block;
}
a.showcaseImage {
	display:block;
	width:350px;
	height:350px;
	background-image:url(images/showcase.png);
	background-repeat:no-repeat;
}
a.showcaseCaption {
	display: block;
	background-image:url(images/showcasecaption.png);
	background-repeat:no-repeat;
	width: 350px;
	height: 50px;
	text-align:center;
	line-height: 50px;
	color:#000;
}
a.showcaseCaption:hover{
	color: #4b9af6;
}
a.standardLink {
	color:#000;
}
a.standardLink:hover{
	color: #4b9af6;
}
#splitter {
	clear: both;
	width: auto;
	height: 50px;
	background-image:url(images/splitterbackground.png);
	background-repeat:repeat-x;
	background-attachment:scroll;
	background-color:#F1F1F1;
}
#bottomWrap {
	display: block;
	width: 1000px;
	margin: 0 auto;
	padding-left: 40px;
}
#bottomCol {
	width: 300px;
	margin: 0 5px;
	float: left;
	text-align: center;
}
#copyrightWrap {
	clear: both;
	width: auto;
	height: 50px;
	text-align: right;
	padding-top: 10px;
}
#aboutMeBox {
	border: 1px solid #ccc;
	background: #FFF;
	width: 98%;
	font-size: small;
	padding: 0 1% 1% 1%;
}
.darkGrey {
	font-size: smaller;
	color: #333;
}
.lightGrey {
	font-size: smaller;
	color:#999;
}
.footerText {
	color: #CCC;
	font-size:12px;
}
.footerLinkItem { 
	float: right;
	background-image: url(images/bullet.png);
	background-repeat: no-repeat;
	padding-left: 18px;
	height: 15px;
	font-style: italic;
}
#blogContainer{margin-top:42px;margin-bottom:17px;padding: 0 10px;} /*Blog container*/
#aboutMeContainer{margin-top:45px;margin-bottom:17px;padding: 0 10px;} /*About Me container*/
#juitterContainer{margin-top:40px;text-align:left;margin-bottom:17px;padding: 0 10px;} /*Juitter container*/

#juitterContainer .twittList{margin:0;padding:0;} /* UL that will contain the list of tweets */

/* Bellow the list of tweets "<li>" */

#juitterContainer .twittLI{list-style:none;margin:0;padding:5px 0;border-bottom:solid 2px #333333;clear:both;height:55px;} 
#juitterContainer .twittList SPAN.time{color:#777;font-size:0.9em}
#juitterContainer .twittList A{color:#c0c0c0;font-style:italic;} /*Links inside the tweets list */

#portfolioBox {
	float: left;
	width: 284px;
	margin: 20px 7px 0 7px;
	padding: 0;
	background: #CCC;
	border: solid 1px #000;
	font-size: 12px;
}
#portfolioInnerBox {
	background: #FFF;
	padding: 2px 2px;
}
.portfolioLinkItem { 
	background-image: url(images/blackbullet.png);
	background-repeat: no-repeat;
	padding-left: 18px;
	margin-top: 2px;
	height: 15px;
	font-style: italic;
}
.portfolioGamesCategoryItem { 
	background-image: url(images/Gamesbullet.png);
	background-repeat: no-repeat;
	padding-left: 18px;
	margin-top: 2px;
	height: 15px;
}
.portfolioMobileCategoryItem { 
	background-image: url(images/Mobilebullet.png);
	background-repeat: no-repeat;
	padding-left: 18px;
	margin-top: 2px;
	height: 15px;
}
.portfolioApplicationCategoryItem { 
	background-image: url(images/Otherbullet.png);
	background-repeat: no-repeat;
	padding-left: 18px;
	margin-top: 2px;
	height: 15px;
}
.portfolioWorkCategoryItem { 
	background-image: url(images/Workbullet.png);
	background-repeat: no-repeat;
	padding-left: 18px;
	margin-top: 2px;
	height: 15px;
}
.portfolioTechItem { 
	background-image: url(images/techbullet.png);
	background-repeat: no-repeat;
	padding-left: 18px;
	margin: 2px 0;
	height: 15px;
}
#portfolioBreak {
	clear: both;
}
#portfolioFilterWrap {
	width: 881px;
	margin: 20px auto 0 auto;
	border: 1px solid #333;
	height: 20px;
    font-size: 14px;
	line-height: 20px;
}
#portfolioFilterStart {
	float: left;
	background-image: url(images/filterbg.png);
	background-repeat: no-repeat;
	height: 20px;
	font-style: italic;
	padding-left: 15px;
	width: 75px;
}
#portfolioFilterItem {
	float: left;
	height: 20px;
	width: 70px;
	text-align:center;
	border-right: 1px solid #333;
}
#portfolioFilterItemShort {
	float: left;
	height: 20px;
	width: 60px;
	text-align:center;
	border-right: 1px solid #333;
}
#portfolioFilterItemSelected {
	float: left;
	height: 20px;
	width: 70px;
	text-align:center;
	border-right: 1px solid #333;
	background-color: #CCC;
}
#portfolioFilterItemShortSelected {
	float: left;
	height: 20px;
	width: 60px;
	text-align:center;
	border-right: 1px solid #333;
	background-color: #CCC;
}
#projectBoxScreenshots { 
	margin: 2% 1% 2% 1%; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
	border: 1px solid #000000;
	background: #FFF;
	padding: 0 0px;
	min-width: 550px;
	min-height: 144px;
	text-align: center;
	vertical-align: middle;
} 
#downloadBox {
	border: 1px solid #000;
	margin: 0;
	background: #FFF;
	width: 90%;
	min-height: 100px;
}
#sourceBox {
	border: 1px solid #000;
	margin: 0;
	background: #FFF;
	width: 90%;
	min-height: 100px;
}
#descripBox {
	border: 1px solid #000;
	margin: 0;
	background: #FFF;
	width: 65%;
	min-height: 222px;
	font-size: small;
}
#reqBox {
	border: 1px solid #000;
	margin: 20px  0 0 0;
	background: #FFF;
	width: 95%;
	min-height: 100px;
}
.blackBorderRezieWidthScreenshots {
	margin: 5px 0 5px 0;
	border: 1px solid #000;
	max-width:300px;
	max-height: 225px;
	width: 32%;
	vertical-align: middle;
}
.blackBorderRezieWidthScreenshotsMiddle {
	margin: 5px 4px 5px 4px;
	border: 1px solid #000;
	max-width: 300px;
	max-height: 225px;
	width: 32%;
	vertical-align: middle;
}
.smallText {
	font-size: small;
	color: #F60;
	font-weight: bold;
}
.tinyFont {
	font-size: 10px;
}
.tinyFontOrange {
	font-size: x-small;
	color: #F60;
}

button.btn {
  color:#333;
  font: bold;
  background-color:#999;
  border:1px solid;
  border-color: #000;
  margin-top:4px;
}