/* @override http://mmott.com/styles.css */

/* stylesheet for portfolio maarten ottens */


html {
		height: 100%;
}

body {
	height: 100%;
	width: 100%;
	padding: 0;
	font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
	color: white;
	background: #d1d1d1 url(images/back1.jpg) repeat left center;
	overflow: hidden;
	margin: 0;
}

img {
	border-style: none;
}


h1 {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	font-weight: normal;
	font-style: normal;
}
/* @group main menu */
#main_wrap {
	width: 56%;
	top: 29%;
	position: absolute;
	z-index: 1;
	left: 22%;
	height: 0px;
}
#main {
	width: 450px;
	text-align: center;
	z-index: 7;
	background: url(images/loading.gif) no-repeat -500px -500px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

#mmott_title {
	font-size: 1em;
	padding-bottom: 5px;
	width: 250px;
	margin: auto;
}
html>/**/body h1 span.mmott_repl {
	width: 54px; 
	height: 12px; 
	overflow: hidden;
	display: inline-block;
}
html>/**/body h1 span.mmott_repl span {
	background: url(images/mmott_h1.png) no-repeat 0 0; 
	width: 54px; 
	height: 12px;
	display: block;
}

html>/**/body p span.mmott_repl {
	width: 42px; 
	height: 9px; 
	overflow: hidden;
	display: inline-block;
}
html>/**/body p span.mmott_repl span {
	background: url(images/mmott_p.png) no-repeat 0 0; 
	width: 42px;
	height: 9px;
	display: block;
}
#version {
	display: inline;
	margin-left: 5px;
	position: relative;
}
#version_link{
	color: white;
	text-decoration: none;
}
#version_link:hover {
	color: #ff7c00;
	text-decoration: underline;
}
#version_more {
	display: none;
	position: absolute;
	bottom: 20px;
	/* for IE */
	filter:alpha(opacity=90);
	/* CSS3 standard */
	opacity: 0.9;
	z-index: 1;
	left: -125px;
}
#version_main {
	background-color: #ff7c00;
	width: 180px;
	padding: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	text-align: left;
}
#version_bottom {
	background: url(images/triangledown.png) no-repeat 135px bottom;
	width: 180px;
	height: 17px;
}

.close_version {
	float: right;
	margin-left: 2px;
	font-size: 0.8em;
}
.close_main {
	float: right;
	margin-left: 2px;
}

.menu {
	clear:both;
	float:left;
	overflow:hidden;
	width:100%;
}
.menu ul {
	list-style-type:none;
	margin:0 auto;
	width: 200px;
	padding: 0;
}
.menu li{
	float:left;
	position:relative;
	list-style-type: none;
	padding: 0;
}

.menu li.open_close_portfolio {
	width: 29%;
}
.menu li.open_close_clients {
	width: 24%;
}
.menu li.open_close_about {
	width: 22%;
}
.menu li.open_close_contact {
	width: 25%;
}
li.big a.open_close_portfolio  {
	padding-top: 50px;
	position: absolute;
}
.body {
	display: none;
	/* for IE */
	filter:alpha(opacity=90);
	/* CSS3 standard */
	opacity: 0.9;
	margin-top: 18px;
}
.body #body_top {
	background: url(images/triangle.png) no-repeat 40% bottom;
	width: 200px;
	height: 26px;
	margin: auto;
}
.body .body_main {
	text-align: left;
	width: 90%;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	display: inline-block;
	background-color: #2b2b2b;
	padding: 4% 5%;
}

.body .body_main p {
	margin: 0 0 7px;
}

.body .body_main p, .body .body_main li {
	padding: 0;
	font-variant: normal;
	font-style: normal;
	line-height: 1.5em;
	font-size: 1.2em;
	text-shadow: black 0 1px 1px;
}
.body .body_main a {
	color: #ff7c00;
}
.body_text {
	display: none;
}
.body_text ul {
	padding-left: 24px;
	list-style-type: square;
}
.body_text h1 {
	margin: 0 0 5px;
	padding: 0 0 5px;
	font-size: 1.5em;
}

.right {
	float: right;
}
.body_text .right {
	margin-top: 5px;
	margin-left: 5px;
}
#body_back {
	position: absolute;
	top: 60px;
	display: block;
	z-index: -1;
	color: #2b2b2b;
	padding: 3%;
	font: italic 1.5em/1.5 Georgia, "Times New Roman", Times, serif;
	left: 0px;
	text-shadow: silver 0 0 8px;
	width: 94%;
}
#author_quote {
	text-align: right;
	font-weight: normal;
	font-style: normal;
	font-size: .9em;
	margin-top: 5px;
}

/* @end */
/* @group portfolio */

ul#portfolio li a.list {
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
}
ul#portfolio{
	height: 100%;
	margin: auto;
	padding: 0;
	width: 0%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
}

#portfolio li.big {
	height: 90%;
	width: 24px;
	left: 0;
	float: left;
	list-style-type: none;
/*	display: inline-block; */
	overflow: hidden;
}

#portfolio li.rainbow {
	height: 100%;
	width: 0%;
	left: 0;
	float: left;
	list-style-type: none;
/*	display: inline-block; */
	overflow: auto;
}

#portfolio div.content {
	padding: 0 0 25px;
	margin: 25px 15px;
}

#portfolio div.content p {
}

#portfolio h1 {
	padding-bottom: 10px;
	margin: 10px 15px 0;
	font-size: 24px;
}
#portfolio h2 {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	margin: 0 15px;
	padding: 2px 0 0px;
	font-family: Gill Sans, Verdana;
	font-size: 11px;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
}

#portfolio li.rainbow img {
	background: white url(images/loading.gif) no-repeat center center;
	margin: 15px;
	display: inline-block;
	vertical-align: top;
	border: 8px solid gray;
}
#portfolio li.rainbow img.photo {
	border: 8px solid white;
}
/* #portfolio img.sites, #portfolio img.design {
	border: 8px solid gray;
}
*/
#portfolio div.comment {
	width: 240px;
	margin: 15px;
	display: inline-block;
	font-size: 1.2em;
	line-height: 1.5em;
}

/* @group colors */
#c01, #c02, #c03, #c04, #c09, #c10, #c11, #c12, #c13, #c14, #c15, #c16, #c17, #c18, #c19, #c22, #c23, #c24, #c25, #c26, #c27, #c28, #c01 a, #c02 a, #c03 a, #c04 a, #c09 a, #c10 a, #c11 a, #c12 a, #c13 a, #c14 a, #c15 a, #c16 a, #c17 a, #c18 a, #c19 a, #c22 a, #c23 a, #c24 a, #c25 a, #c26 a, #c27 a, #c28 a { color: white; }
#c01 { background-color: #42210b; }
#c02 { background-color: #603813; }
#c03 { background-color: #754C24; }
#c04 { background-color: #8C6239; }
#c05 { background-color: #A67C52; }
#c06 { background-color: #C69C6D; }
#c07 { background-color: #C7B299; color: black; }
#c08 { background-color: #998675; }
#c09 { background-color: #736357; }
#c10 { background-color: #534741; }
#c11 { background-color: #1B1464; }
#c12 { background-color: #2E3192; }
#c13 { background-color: #0071BC; }
#c14 { background-color: #29ABE2; }
#c15 { background-color: #00A99D; }
#c16 { background-color: #006837; }
#c17 { background-color: #009245; }
#c18 { background-color: #39B54A; }
#c19 { background-color: #8cc63f; }
#c20 { background-color: #FCEE21; color: black; }
#c21 { background-color: #FBB03B; color: black; }
#c22 { background-color: #F7931E; }
#c23 { background-color: #F15A24; }
#c24 { background-color: #ED1C24; }
#c25 { background-color: #C1272D; }
#c26 { background-color: #9E005D; }
#c27 { background-color: #93278F; }
#c28 { background-color: #662D91; }
/* @end */

/* @end */

#activate_settings {
	height: 30px;
	position: relative;
	z-index: 1;
	width: 400px;
	margin: auto;
}
#settings {
	position: relative;
	top: 0;
	margin: 0 auto;
	width: 122px;
	display: none;
	z-index: 2;
	padding: 8px;
}

#settings a {
	color: #ff7c00;
}
#settings_back {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	background-color: black;
	top: 0;
	left: 0;
	z-index: -1;
	/* for IE */
	filter:alpha(opacity=50);
	/* CSS3 standard */
	opacity: 0.5;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}

#settings p {
	float: left;
	margin-bottom: 7px;
}

#settings img {
	border: 3px solid silver;
	margin-left: 2px;
}

/* @group blog */

.blog {
	height: 100%;
	float: right;
	/* for IE */
	filter:alpha(opacity=90);
	/* CSS3 standard */
	opacity: 0.9;
	display: none;
	position: relative;
}
#blog_wrap {
	height: 100%;
	position: absolute;
	top: 0;
	right:0;
	width: 0;
	display: block;
	float: right;
	z-index: 15;
	margin: 0;
	padding: 0;
}
#blog_content {
	overflow: auto;
	padding: 50px 6% 6%;
	height: 88%;
}
#blog_archive {
	width: 80px;
	background: #92bacb url(images/gin3.gif) no-repeat 0 50px;
}
#blog_archive:hover {
	width: 80px;
	background: #92bacb url(images/gin3.gif) no-repeat -80px 50px;
}

#blog_shorts {
	width: 40%;
	background-color: #333;
}

#blog_posts {
	width: 55%;
	background-color: black;
	padding: 20px;
}

#blog_close {
	height: 90%;
	width: 24px;
	left: 0;
	list-style-type: none;
/*	display: inline-block; */
	overflow: hidden;
	display: block;
}

#blog_close a#close_blog  {
	padding-top: 50px;
	position: absolute;
}

/* @end */