/* CSS Document */
/* -------------------------------------- Globals ------------------------------------- */

* {
	padding: 0;
	margin: 0;
	border: 0;
}

html, body { background-color: #272727; height: 100%; }

a img { border: none }


#wrap {
	background-color: #272727;
	min-width: 860px;
	width: 100% !important;
	text-align: left;
	height: auto !important;
	margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
}


#footer  {
	clear: both;
	height: 30px;
	text-align: left;
	padding-left: 570px;
	padding-top: 60px;
}

#footer_static  {
	clear: both;
	height: 30px;
	text-align: left;
	padding-left: 570px;
	padding-top: 100px;
}

a {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #ffffff;
	text-decoration: none;
}

a:hover { text-decoration: underline; }

a.link {
	font-family: Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #808080;
	text-decoration: none;
}

a.link:hover { 	text-decoration: underline; }

a.link_cc { position:relative; left: 10px; top: 5px; }


/* -------------------------------------- Header ------------------------------------- */
#header {
	width: 100%;
	float: left;
	background-color:#272727;
	background-image: url(images/top_right.png);
	background-repeat: repeat-x;
}

a#top_left {
	width: 350px;
	height: 60px;
	float: left;
	background-image: url(images/button_top_left.png);
	background-repeat: no-repeat;
	text-decoration: none;
}

a#top_left:hover { background-image: url(images/button_top_left_hover.png); }

a.video {
	width: 185px;
	height: 60px;
	float: left;
	background-image: url(images/button_video.png);
	background-repeat: no-repeat;
	text-decoration: none;
}

a.design {
	width: 110px;
	height: 60px;
	float: left;
	background-image: url(images/button_design.png);
	background-repeat: no-repeat;
	text-decoration: none;
}

a.web {
	width: 126px;
	height: 60px;
	float: left;
	background-image: url(images/button_web.png);
	background-repeat: no-repeat;
	text-decoration: none;
}

a.video:hover { background-image: url(images/button_video_hover.png); background-repeat: no-repeat; text-decoration: none; }
a.design:hover { background-image: url(images/button_design_hover.png); background-repeat: no-repeat; text-decoration: none; }
a.web:hover { background-image: url(images/button_web_hover.png); background-repeat: no-repeat; text-decoration: none; }

a#video_active { background-image: url(images/button_video_hover.png); }
a#design_active { background-image: url(images/button_design_hover.png); }
a#web_active { background-image: url(images/button_web_hover.png); }

.line_background {
	clear: both;
	width: 100%;
	font-size: 5px;
	background-color: #1f1f1f;
}

.line {
	height: 5px;
	width: 100%;
	background-position: left;
	background-repeat: no-repeat;
}

.line_0 { background-image: url(images/line_color.jpg); }
.line_1 { background-image: url(images/line_orange.jpg); }
.line_2 { background-image: url(images/line_green.jpg); }
.line_3 { background-image: url(images/line_blue.jpg); }

.background {
	height: 651px;
	width: 100%;
	background-position: top left;
	background-repeat: no-repeat;
}

.background_0 { background-image: url(images/background_color.jpg); }
.background_1 { background-image: url(images/background_orange.jpg); }
.background_2 { background-image: url(images/background_green.jpg); }
.background_3 { background-image: url(images/background_blue.jpg); }


/* --------------------------- Home ------------------------ */
#welcome {
	behavior: url(js/iepngfix.htc);
	background-image: url(images/welcome.png);
	background-repeat: no-repeat;
	height: 248px;
	width: 428px;
	position: relative;
	top: 100px;
	left: 320px;
}

#quick {
	position: relative;
	top: 170px;
	left: 275px;
	width: 572px;
}

.quickies {
	position: absolute;
	height: 48px;
	width: 186px;
	background-repeat: no-repeat;
	text-decoration: none;
	cursor: pointer;
}

a.about { background-image: url(images/home_about.png); background-repeat: no-repeat; }
a.contact {	background-image: url(images/home_contact.png);	left: 193px; background-repeat: no-repeat; }
a.latest { behavior: url(js/iepngfix.htc); background-image: url(images/home_latest.png); left: 386px; background-repeat: no-repeat; }

a.about:hover { background-image: url(images/home_about_hover.png); text-decoration: none; }
a.contact:hover { background-image: url(images/home_contact_hover.png); text-decoration: none; }
a.latest:hover { text-decoration: none; cursor: default; }

#content_home {
	margin-top: 225px;
	height: 216px;
}

/* --------------------------- Submenu (Projectlist)------------------------ */
#content_top {
	padding-top: 100px;
	height: 217px;
}

.content {
	margin: 0;
	height: 217px;
}

.project {
	height: 200px;
	width: 186px;
	position: relative;
}

.project_1 { left: 275px; }
.project_2 { margin-top: -200px;  left: 468px; }
.project_3 { margin-top: -200px; left: 661px; }

.corner_top_right {
	behavior: url(js/iepngfix.htc);
	width: 186px;
	height: 25px;
	background-image: url(images/corner_top_right.png);
	background-repeat: no-repeat; 
	z-index: 2;
}

.corner_top_left {
	behavior: url(js/iepngfix.htc);
	width: 186px;
	height: 25px;
	background-image: url(images/corner_top_left.png);
	background-repeat: no-repeat; 
	z-index: 2;
}

.corner_bottom_right {
	behavior: url(js/iepngfix.htc);
	width: 186px;
	height: 25px;
	background-image: url(images/corner_bottom_right.png);
	background-repeat: no-repeat; 
	position: relative;
	top: 160px;
	clear: both;
}

.corner_bottom_left {
	behavior: url(js/iepngfix.htc);
	width: 186px;
	height: 25px;
	background-image: url(images/corner_bottom_left.png);
	background-repeat: no-repeat; 
	position: relative;
	top: 160px;
	clear: both;
}

.title {
	position: absolute;
	top: 15px;
	margin-left: 13px;
	padding: 4px 8px 4px 7px;
	font: 11px Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
	z-index: 5;
}

.title_green { background-color: #7fbe2d; }
.title_orange { background-color: #ee6500; }
.title_blue { background-color: #1595dd; }

a.cover, a.cover_mirror {
	background-color: #2d2d2d;
	height: 140px;
	position: absolute;
	top: 25px;
	padding: 20px 13px 0 13px;
}

a.cover:hover { 
	background-image: url(images/img_small_gradient_hover.png);
	background-repeat: repeat;
}

a.cover_mirror:hover { 
	background-image: url(images/img_small_gradient_hover_mirror.png);
	background-repeat: repeat;
}

.tags {
	position: absolute;
	margin-left: 12px;
	top: 159px;
	width: 160px;
}

a.tagLink {
	background-color: #353535;
	margin-left: 1px;
	margin-bottom: 1px;
	padding: 2px 5px 2px 6px;
	font-family: Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #808080;
	text-decoration: none;
	float: left;
}

a.tagLink:hover {
	background-color: #2d2d2d;
	color: #3e3e3e;
	text-decoration: none;
}


/* --------------------------- Project ------------------------ */
#proj_wrap {
	width: 572px;
	margin-left: 275px;
}

#proj_title {
	height: 32px;
	text-align: right;
	padding-top: 68px;
}

#proj_gallery {
	background-color: #2d2d2d;
	padding: 4px 4px 0px 4px;
}

.video_stream {
	text-align: center;
	padding-left: 69px;
	padding-right: 70px;
	padding-top: 10px;
	padding-bottom: 20px;
	background-color: #cccccc;
}

.proj_headers {
	padding-right: 30px;
	position: relative;
	top: -8px;
	text-align: right;
}

.proj_corner_top_right { behavior: url(js/iepngfix.htc); background-image:url(images/proj_corner_top_right.png); background-repeat: no-repeat; height: 25px; margin-top: 7px; }
.proj_corner_top_left { behavior: url(js/iepngfix.htc); background-image:url(images/proj_corner_top_left.png); background-repeat: no-repeat; height: 25px; margin-top: 7px; }
.proj_corner_bottom_right { behavior: url(js/iepngfix.htc); background-image:url(images/proj_corner_bottom_right.png); background-repeat: no-repeat; height: 25px; }
.proj_corner_bottom_left { behavior: url(js/iepngfix.htc); background-image:url(images/proj_corner_bottom_left.png); background-repeat: no-repeat; height: 25px; }

#description {
	background-color: #2d2d2d;
	margin-top: -22px;
	padding: 35px 20px 10px 20px;
	font-family: Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #ffffff;
}

#description_links {
	background-color: #2d2d2d;
	margin-top: -22px;
	padding: 45px 20px 0px 20px;
	font-family: Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #ffffff;
}

#link_area {
	background-color: #2d2d2d;
	width: 532px;
}

.links {
	background-color: #2d2d2d;
	width: 88px;
	position: relative;
	float: left;
}

.clearer {
	clear: both;
	height: 20px;
}

.clearer_0 {
	clear: both;
	font-size: 0px;
	height: 0px;
}

.icon {
	text-align: center;
	cursor: pointer;
}

.icon_text {
	margin-top: 5px;
	text-align: center;
}


/* --------------------------- Static sites ------------------------ */

#about_me {
	behavior: url(js/iepngfix.htc);
	background-image: url(images/aboutme_header.png);
	background-repeat: no-repeat;
	position: relative;
	height: 119px;
	width: 597px;
	position: absolute;
	top: 165px;
	left: 320px;
}

#contact {
	behavior: url(js/iepngfix.htc);
	background-image: url(images/contact_header.png);
	background-repeat: no-repeat;
	position: relative;
	height: 119px;
	width: 597px;
	position: absolute;
	top: 165px;
	left: 320px;
}

#static_wrap {
	width: 572px;
	margin-left: 275px;
	padding-top: 290px;
}

.static_description {
	background-color: #2d2d2d;
	margin-top: -22px;
	padding: 40px 20px 0px 20px;
	font-family: Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #ffffff;
}

.static_left {
	float: left;
	text-align: right;
	width: 35%;
}

.static_right {
	float: right;
	width: 55%;
	padding-left: 5%;
	padding-right: 2%;
}

.static_right_skills {
	float: right;
	width: 45%;
	padding-left: 5%;
	padding-right: 12%;
}

a.skill_link { text-decoration: none; }
a.skill_link:hover { text-decoration: none; }

.text { 
	font: 13px Helvetica, sans-serif;
	color: #FFFFFF;
	padding: 2px 5px 2px 5px;
	line-height: 23px;
}

.text_bold { font-weight: bold; }

.text_detail { 
	font: 13px Helvetica, sans-serif;
	color: #FFFFFF;
	line-height: 20px;
	padding-top: 2px;
}

.text_form { 
	font: 13px Helvetica, sans-serif;
	color: #000000;
	line-height: 18px;
	padding-top: 3px;
	padding-bottom: 0px;
	padding-left: 10px;
	border: 2px solid #2d2d2d;
	background-image: url(images/form_corner.png);
	background-repeat: no-repeat;
	background-color: #ebebeb;
}

#text_field {
	padding-right: 1px;
}

#red {
	background-color: #ee6500;
}

.text_orange { background-color: #ee6500; font-weight: bold; }
.text_green { background-color: #7fbe2d; font-weight: bold; }
.text_blue { background-color: #1595dd; font-weight: bold; }
.text_grey { background-color: #666666; font-weight: bold; }

input.text_grey:hover  { background-image:url(images/img_small_gradient_hover.png); background-repeat: repeat; background-color: #2d2d2d; }

.static_corner_top_right { behavior: url(js/iepngfix.htc); background-image:url(images/proj_corner_top_right.png); background-repeat: no-repeat; height: 25px; }
.static_corner_top_left { behavior: url(js/iepngfix.htc); background-image:url(images/proj_corner_top_left.png); background-repeat: no-repeat; height: 25px; }
.static_corner_bottom_right { behavior: url(js/iepngfix.htc); background-image:url(images/proj_corner_bottom_right.png); background-repeat: no-repeat; height: 25px; margin-bottom: 7px; }
.static_corner_bottom_left { behavior: url(js/iepngfix.htc); background-image:url(images/proj_corner_bottom_left.png); background-repeat: no-repeat; height: 25px; margin-bottom: 7px; }


#static_links {
	background-color: #2d2d2d;
	margin-top: -22px;
	padding: 45px 20px 0px 20px;
	font-family: Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #ffffff;
}

/*
#link_area {
	background-color: #2d2d2d;
	width: 532px;
}

.links {
	background-color: #2d2d2d;
	width: 88px;
	position: relative;
	float: left;
}


.icon {
	text-align: center;
}

.icon_text {
	margin-top: 5px;
	text-align: center;
}
*/

/* ------------------------------------------------------ SlideViewer ------------------------------------------ */
/*preload classes*/ 
.svw {
	width: 50px;
	height: 20px;
	background: #353535;
} 
.svw ul {
	position: relative;
	left: -999em;
} 

/*core classes*/ 
.stripViewer {  
	position: relative; 
	overflow: hidden;    
	margin: 0 0 1px 0; 
} 
.stripViewer ul { /* this is your UL of images */ 
	margin: 0; 
	padding: 0; 
	position: relative; 
	left: 0; 
	top: 0; 
	width: 1%; 
	list-style-type: none; 
} 
.stripViewer ul li {  
	float:left; 
} 
.stripTransmitter { 
	overflow: auto; 
	width: 1%; 
	background-color: #2d2d2d;
} 
.stripTransmitter ul { 
	margin: 0; 
	padding-top: 4px;
	position: relative; 
	list-style-type: none; 
} 
.stripTransmitter ul li { 
	width: 20px; 
	float:left; 
	margin: 0 10px 1px 0; 
} 
.stripTransmitter a { 
	font: bold 11px Verdana, Arial; 
	text-align: center; 
	line-height: 25px; 
	background-color: #343434; 
	color: #999999; 
	text-decoration: none; 
	padding: 7px 10px 7px 10px;
} 
.stripTransmitter a:hover, a.current { 
	background-color: #2d2d2d;
	color: #3e3e3e;
	text-decoration: none;
} 
 
/*tooltips formatting*/ 
#tooltip { 
	
} 
#tooltip h3 {  
	font: normal 10px Verdana;  
	margin: 0;  
	padding: 6px 2px;  
	border: 0; 
}