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

body {
	background: url(/resources/images/background.jpg) no-repeat top left;
	background-color: #4d6d96;
}

h1 {
	color: #111111;
	font-family: arial;
	font-weight: bold;
	font-size: 20px;
	margin: 0;
	margin-bottom: 2px;
}

h2 {
	padding-left: 6px;
	color: #111111;
	font-family: arial;
	font-weight: normal;
	font-size: 9px;
	margin: 0;
	margin-bottom: 5px;
}


img#bg {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

img {
	border: 0;
}

#container {
	z-index:1;
}

.content {
    position: relative;
}

.logo {
	margin-left: 25px;
	margin-top: 55px;
}

div.clear {
	clear: both;
}

a.readmore {
	font-family: 	arial;
	font-weight: 	bold;
	font-size: 		14px;
	margin-left: 	4px;
	padding-left:	8px;
	background: 	url(../../resources/images/arrow_blue.gif) no-repeat 0 4px;
	color: 			#354b66;	
	position: 		absolute;
	text-decoration: none;
	top: 463px;
}

a.readmore:hover {
	background: url(../../resources/images/arrow.gif) no-repeat 0 4px;
	color: #fff;
}

.horizontalContent {
	margin-top: 25px;
	margin-left: 25px;
}

.vr {
	background-color: #354b66;
	width: 1px;
	margin-right: 5px;
	margin-left: 5px;
	height: 400px;
	float: left;
}

.secnet-left {
	width:	24px;
	height: 389px;
	float: 	left;
	padding-right: 5px;
}

.menu {
	float: left;
	width: 220px;
	margin-left: 10px;
	margin-right: 5px;
}

.menu ul, li { 
	list-style-type: none;  
	margin:0;
	padding:0;
	float: left;
}

.menu li {
	display: block;
}

.menu ul li a {
	display: block;
	height: 400px;
	float: left;
}

/* Contact me link */
.menu ul li a.contactme {
	width: 34px;
	background: url(../../resources/images/menu.gif) no-repeat top left;
}

.menu ul li a.contactme:hover {
	background: url(../../resources/images/menu.gif) no-repeat -225px 0;
}

.menu ul li a.contactmeActive {
	width: 34px;
	background: url(../../resources/images/menu.gif) no-repeat -450px 0;
}
/* End contact me link */

/* Playground link */
.menu ul li a.playground {
	width: 45px;
	background: url(../../resources/images/menu.gif) no-repeat -34px 0;
}

.menu ul li a.playground:hover {
	background: url(../../resources/images/menu.gif) no-repeat -260px 0;
}

.menu ul li a.playgroundActive {
	width: 45px;
	background: url(../../resources/images/menu.gif) no-repeat -486px 0;
}
/* End of playground link */

/* Projects link */
.menu ul li a.portfolio {
	width: 46px;
	background: url(../../resources/images/menu.gif) no-repeat -81px 0;
}

.menu ul li a.portfolio:hover {
	background: url(../../resources/images/menu.gif) no-repeat -305px 0;
}

.menu ul li a.portfolioActive {
	width: 46px;
	background: url(../../resources/images/menu.gif) no-repeat -531px 0;
}
/* End projects link */

/* Curriculum vitae link */
.menu ul li a.cv {
	width: 46px;
	background: url(../../resources/images/menu.gif) no-repeat -127px 0;
}

.menu ul li a.cv:hover {
	background: url(../../resources/images/menu.gif) no-repeat -351px 0;
}

.menu ul li a.cvActive {
	width: 46px;
	background: url(../../resources/images/menu.gif) no-repeat -577px 0;
}
/* End Curriculum vitae link */

/* Information link */
.menu ul li a.information {
	width: 46px;
	background: url(../../resources/images/menu.gif) no-repeat -175px 0;
}

.menu ul li a.information:hover {
	background: url(../../resources/images/menu.gif) no-repeat -400px 0;
}

.menu ul li a.informationActive {
	width: 46px;
	background: url(../../resources/images/menu.gif) no-repeat -625px 0;
}
/* End Information link */

/* Intro box */
div.intro {
	width: 210px;
	height: 400px;
	margin-left: 5px;
	margin-right: 5px;
	float: left;
}


div.intro .text {
	color: white;
	font-family: arial;
	font-weight: normal;
	font-size: 11px;
	line-height: 13px;
}

div.intro .text p {
	margin-bottom: 13px;
}

div.intro .text p a {
	color: #354b66;
	margin-bottom: 13px;
	text-decoration: none;
}

.intro .text p a:hover {
	color: #fff;
}
/* End of intro box */

/* Portfolio box */
div.portfolio {
	width: 210px;
	height: 400px;
	margin-left: 5px;
	margin-right: 5px;
	float: left;
}

div.portfolio2cols {
	width: 140px;
	height: 400px;
	margin-left: 5px;
	margin-right: 5px;
	float: left;
}

div.portfolio .thumbnails img {
	float: left;
	margin: 6px;
	height: 56px;
	width: 58px;	
}

div.portfolio .thumbnails img:hover {
	border: 2px solid #fefefe;
	height: 52px;
	width: 54px;		
}


div.portfolio2cols .thumbnailBox {
	position: 	relative;
	width: 		140px;
	height: 	345px;
	overflow: 	hidden;
}

div.portfolio2cols .thumbnails img:hover {
	border: 2px solid #fefefe;
	height: 52px;
	width: 54px;		
}

div.portfolio2cols .thumbnails img.active {
	border: 2px solid #fefefe;
	height: 52px;
	width: 54px;		
}


div.portfolio2cols .thumbnails {
	position: relative;
	top: 0px;
	margin: 0;
}

div.portfolio2cols .downbutton {
	float: 			left;
	height: 		11px;
	width: 			60px;
	margin-top:		5px;
	margin-left:	5px;
	background: 	url(../../resources/images/arrows.gif) no-repeat 0 -22px;
}

div.portfolio2cols .downbutton:hover {
	background: 	url(../../resources/images/arrows.gif) no-repeat 0 -33px;
}

div.portfolio2cols .upbutton {
	float: 			left;
	height: 		11px;
	width: 			60px;
	margin-top:		5px;
	margin-left:	10px;
	background: 	url(../../resources/images/arrows.gif) no-repeat 0 0;
}

div.portfolio2cols .upbutton:hover {
	background: 	url(../../resources/images/arrows.gif) no-repeat 0 -11px;
}

div.portfolio2cols .thumbnails img {
	float: left;
	border: 0;
	margin: 6px;
	height: 56px;
	width: 58px;
}

div.portfolioDetails {
	width: 204px;
	height: 400px;
	margin-left: 5px;
	margin-right: 5px;
	float: left;
}


div.portfolioDetails .thumbnailsBig img {
	margin: 4px;
}

div.portfolioDetails div.textBox {
	border: 1px solid #354b66;
	background-color: #6385b0;
	height: 157px;
	width: 198px;
	overflow: hidden;
	position: relative; /* fix to 'IE7 10000px padding-bottom spill over footer' problem */
	margin-left: 2px;
}

div.portfolioDetails div.textBox div.detailsTextBox {
	position: relative;
	padding: 0;
	padding-left: 5px;
	margin: 0;
	width: 193px;
	top: 0px;	
	
}

div.portfolioDetails .downbutton {
	float: 			left;
	height: 		11px;
	width: 			60px;
	margin-top:		16px;
	margin-left:	0px;
	background: 	url(../../resources/images/arrows.gif) no-repeat 0 -22px;
}

div.portfolioDetails .downbutton:hover {
	background: 	url(../../resources/images/arrows.gif) no-repeat 0 -33px;
}

div.portfolioDetails .upbutton {
	float: 			left;
	height: 		11px;
	width: 			60px;
	margin-top:		16px;
	margin-left:	10px;
	background: 	url(../../resources/images/arrows.gif) no-repeat 0 0;
}

div.portfolioDetails .upbutton:hover {
	background: 	url(../../resources/images/arrows.gif) no-repeat 0 -11px;
}

div.portfolioDetails p {
	color: #fefefe;
	font-family: arial;
	font-weight: normal;
	font-size: 11px;
	line-height: 13px;
	margin-top: 5px;
}

div.portfolioDetails p strong {
	font-weight: bold;
}

div.portfolioDetails p p {
	margin-top: 5px;
}

/* End of portfolio box */

/* Certificates box */
div.certificates {
	width: 204px;
	height: 400px;
	margin-left: 5px;
	margin-right: 5px;
	float: left;
}

div.certificates .thumbnailsBig img {
	margin: 4px;
}

div.certificates .thumbnailsSmall img {
	float: left;
	margin: 5px;
	height: 56px;
	width: 58px;
	
}

/* End of certificates box */

/* CV Downloads box */
div.cvDownloads {
	width: 204px;
	height: 400px;
	margin-left: 5px;
	margin-right: 5px;
	float: left;
}

div.cvDownloads img {
	float: left;
}

div.cvDownloads p {
	clear: both;
	height: 100px;
	color: #fefefe;
	font-family: arial;
	font-weight: normal;
	font-size: 12px;
	line-height: 14px;	
}

div.cvDownloads p img {
	margin: 8px;
	margin-top: 12px;
	float: left;
}

div.cvDownloads h3 {

	float: left;
	padding-left: 6px;
	padding-bottom: 5px;
	margin-top: 5px;
	
	color: #fefefe;
	font-family: arial;
	font-weight: bold;
	font-size: 16px;
	line-height: 14px;
}


/* End of CV Downloads box */

/* Certificates box */
div.allCertificates {
	width: 408px;
	height: 400px;
	margin-left: 5px;
	margin-right: 5px;
	float: left;
}

div.allCertificates div.certificatesContainer A IMG {
	width:	88px;
	height:	56px;
	margin: 5px;
}


/* End of Certificates */

/* Playground Snippets */
div.playgroundSnippets {
	width: 204px;
	height: 400px;
	margin-left: 5px;
	margin-right: 5px;
	float: left;
}

div.playgroundSnippets div.snippetItem {
	margin-top: 15px;
}

div.playgroundSnippets img {
	float: left;
	margin-top: 0px;
	margin-right: 3px;
	margin-bottom: 15px;
	height: 35px;
	width: 50px;
	border: 2px solid white;
}


div.playgroundSnippets div.snippetDescription {
	font-family: arial;
	font-size: 12px;
	color: #354b66;
	font-weight: bold;
}

div.playgroundSnippets div.snippetItem div.snippetDescription p {
	color: #fefefe;
	font-weight: normal;
	margin-top: 4px;
	margin-bottom: 4px;
}

div.playgroundSnippets div.snippetItem div.snippetDescription a {
	color: #354b66;
	text-decoration: none;
	font-weight: bold;
}

div.playgroundSnippets div.snippetItem div.snippetDescription a:hover {
	color: #efefef;
}

div.playgroundSnippets span.js {
	font-family: arial;
	font-size: 10px;
	color: #dd9509;
	font-weight: bold;
}

div.playgroundSnippets span.css {
	font-family: arial;
	font-size: 10px;
	color: #029e02;
	font-weight: bold;
}



/* End of Snippetsbox */


/* Playground Projects */
div.playgroundProjects {
	width: 204px;
	height: 400px;
	margin-left: 5px;
	margin-right: 5px;
	float: left;
}

div.playgroundProjects img {
	width: 200px;
	height: 50px;
	margin-top: 8px;
}

div.playgroundProjects p {
	font-family: arial;
	font-size: 12px;
	color: #fefefe;
	font-weight: normal;
	margin-top: 5px;	
}

div.playgroundProjects p a {
	color: #354b66;
	margin-bottom: 13px;
	text-decoration: none;
}

div.playgroundProjects p a:hover {
	color: #fff;
}

/* End of Playground Projects */


div.endDiv {
	float: left;
	width:	58px;
	height: 400px;
	background: url(../../resources/images/bullseye.gif) no-repeat top left;;
}


.footer {
	clear: both;
	float: left;
	height: 150px;
	width: 100%;
	background: url(../../resources/images/footerbackground.gif);
	position: absolute;
	top: 575px;
	padding-left: 57px;
	padding-top: 15px;
}

.footer .footerlogo {
	float: left;
}

.footer .licence {
	float: left;
	margin-left: 20px;
}

.footer .licence .licenceText,.licenceLink{
	float: left;
	margin-left: 20px;
}

.footer .licence .licenceText {
	color: #4d6d96;
	font-family: arial;
	font-weight: normal;
	font-size: 12px;
	padding-top: 1px;
}

.footer .licence .licenceText a {
	color: #cecece;
	text-decoration: none;
}