/*
 CSS-File for www.juern.de/portfolio
 author: Jürn-Christian Hocke
 Date: 2010-01-02
 version: 1.0

*/
@charset "utf-8";
/* CSS Document */

body						{ background-color: #FFF; font-family:Georgia, "Times New Roman", Times, serif; color:#999; margin:0px; padding:0px; }

/* STRUCTURE */

#header						{ z-index:1200; text-align:right;position:fixed; top:0px;	margin: 0 0 0 50px; padding: 50px 15px 0 0; height:100%;  background-color: #FFF; -moz-opacity:0.9;filter:alpha(opacity=90);opacity:0.9;}
#content					{ padding: 30px 0 0 0;}
#intro_header				{ text-align:right;position:fixed; top:0px;	margin: 0 0 0 50px; padding: 50px 15px 0 0; height:75px;  background-color: #FFF; -moz-opacity:0.9;filter:alpha(opacity=90);opacity:0.9; overflow:hidden;}
#intro_header:hover			{ height:500px; }

/* text-styling */
h1							{ padding: 0 0 0 15px; font-weight: 100; font-size: 1.2em; letter-spacing: 1px; font-variant:small-caps; color:#333; }
h2							{ padding: 0 0 0 15px; font-weight: 100; font-size: 0.6em; letter-spacing: 0.2px; margin: -13px 0 0 0; }

ul#mainmenu					{ list-style-type: none; padding:0; margin:100px 0 0 0; }
ul#mainmenu li				{ padding: 0; margin:0; line-height:1.5em;}
ul#mainmenu li + li.galerie		{ padding: 0; margin-top:-10px; line-height:1.4em;}

ul#mainmenu li a:link		{ color: #999; font-size: 0.7em; text-decoration:none; display:inline-block; width: 220px; margin-right: -3px; border-bottom: 1px dotted #FFF; }
ul#mainmenu li a:visited	{ color: #999; font-size: 0.7em; text-decoration:none; display:inline-block; width: 220px; margin-right: -3px; border-bottom: 1px dotted #FFF; }
ul#mainmenu li a:active		{ color: #999; font-size: 0.7em; text-decoration:none; display:inline-block; width: 220px; margin-right: -3px; border-bottom: 1px dotted #FFF; }
ul#mainmenu li a:hover		{ color: #333; font-size: 0.7em; text-decoration:none; display:inline-block; width: 220px; margin-right: -3px; border-bottom: 1px dotted #FFF; }

ul#mainmenu li a.navpos:link			{ color: #333; text-decoration: none; }
ul#mainmenu li a.navpos:visited			{ color: #333; text-decoration: none; }
ul#mainmenu li a.navpos:active			{ color: #333; text-decoration: none; }
ul#mainmenu li a.navpos:hover			{ color: #333; text-decoration: none; }

#homelink	{ position:absolute; top:490px; right:18px; display:none;}

#homelink a:link			{ color: #999; font-size: 0.7em; text-decoration:none; display:inline-block; width: 220px; margin-right: -3px; border-bottom: 1px dotted #FFF; }
#homelink a:visited		{ color: #999; font-size: 0.7em; text-decoration:none; display:inline-block; width: 220px; margin-right: -3px; border-bottom: 1px dotted #FFF; }
#homelink a:active		{ color: #999; font-size: 0.7em; text-decoration:none; display:inline-block; width: 220px; margin-right: -3px; border-bottom: 1px dotted #FFF; }
#homelink a:hover		{ color: #333; font-size: 0.7em; text-decoration:none; display:inline-block; width: 220px; margin-right: -3px; border-bottom: 1px dotted #FFF; }

/* INDEX - LANDINGPAGE */


.intro					    { width:50px; height:488px; background-color: #FFF;   -moz-opacity:1.0;filter:alpha(opacity=100);opacity:1.0; overflow:hidden;}
.intro:hover				{ width:200px; height:488px; background-color: #FFF;   -moz-opacity:1.0;filter:alpha(opacity=100);opacity:1.0; overflow:hidden;}

.intro_foto		 			{ width:50px; height:488px; background-color: #FFF;   -moz-opacity:1.0;filter:alpha(opacity=100);opacity:1.0; overflow:hidden; background:url('../img/intro/teaser_01.jpg') left 500px no-repeat; }
.intro_foto:hover			{ width:200px; height:488px; background-color: #FFF;   -moz-opacity:1.0;filter:alpha(opacity=100);opacity:1.0; overflow:hidden; background:url('../img/intro/teaser_01.jpg') left top no-repeat; }

.intro_retusche				{ width:50px; height:488px; background-color: #FFF;   -moz-opacity:1.0;filter:alpha(opacity=100);opacity:1.0; overflow:hidden; background:url('../img/intro/teaser_02.jpg') left 500px no-repeat; }
.intro_retusche:hover		{ width:200px; height:488px; background-color: #FFF;   -moz-opacity:1.0;filter:alpha(opacity=100);opacity:1.0; overflow:hidden; background:url('../img/intro/teaser_02.jpg') left top no-repeat; }

.intro_konzept				{ width:50px; height:488px; background-color: #FFF;   -moz-opacity:1.0;filter:alpha(opacity=100);opacity:1.0; overflow:hidden; background:url('../img/intro/teaser_04.jpg') left 500px no-repeat;  }
.intro_konzept:hover		{ width:200px; height:488px; background-color: #FF;   -moz-opacity:1.0;filter:alpha(opacity=100);opacity:1.0; overflow:hidden; background:url('../img/intro/teaser_04.jpg') left top no-repeat; }

.intro_design				{ width:50px; height:488px; background-color: #FFF;   -moz-opacity:1.0;filter:alpha(opacity=100);opacity:1.0; overflow:hidden; background:url('../img/intro/teaser_03.jpg') left 500px no-repeat;  }
.intro_design:hover			{ width:200px; height:488px; background-color: #FFF;   -moz-opacity:1.0;filter:alpha(opacity=100);opacity:1.0; overflow:hidden; background:url('../img/intro/teaser_03.jpg') left top no-repeat; }

.intro > .intro_info	    { display:inline-block; width:50px; height:488px; background-color:#FFF; color: #333; font-size:0.7em;  -moz-opacity:0.47;filter:alpha(opacity=47);opacity:0.47; overflow:hidden; }
.intro:hover > .intro_info	{ display:inline-block; width:50px; height:488px; background-color:#FFF; color: #333; font-size:0.7em;  -moz-opacity:0.47;filter:alpha(opacity=47);opacity:0.47; overflow:hidden; }





/* CONTACT */

.contact					{ padding: 0px 0 0 90px; }
.contact h3					{ font-weight: 100; font-size: 1.2em; letter-spacing: 1px; font-variant:small-caps; margin: 33px 0 115px 0; color:	#666; }
.contact h4					{ font-weight: 100; font-size: 1.1em; color:#333; font-variant:small-caps; }
.contact p					{ font-size: 0.7em;  color: #666;}
.contact h4 .subtitle		{ font-size: 0.8em; color:#666;}

/* DISCLAIMER */
.disclaimer					{ padding: 147px 0 0 0px; width: 410px;}
.disclaimer h4				{ font-weight: 100; font-size: 1.1em; color:#333; font-variant:small-caps;}
.disclaimer h5				{ font-weight: 100; font-size: 0.6em; color:#666; margin-bottom: -4px;  }
.disclaimer p				{ font-size: 0.6em; padding-bottom: 5px; color: #666;}


.disclaimer_row2			{ padding: 147px 0 0 30px; width: 410px;}
.disclaimer_row2 h4			{ font-weight: 100; font-size: 1.1em; color:#333; font-variant:small-caps;}
.disclaimer_row2 h5			{ font-weight: 100; font-size: 0.6em; color:#666; margin-bottom: -4px;  }
.disclaimer_row2 p			{ font-size: 0.6em; padding-bottom: 5px; color: #666;}

/* BIOGRAPHY &SKILLS */

.biography					{ padding: 147px 0 0 0px; width: 210px;}
.biography h4				{ font-weight: 100; font-size: 1.1em; color:#333; font-variant:small-caps;}
.biography h5				{ font-weight: 100; font-size: 0.8em; color:#666; margin-bottom: -4px;  }
.biography p				{ font-size: 0.7em; padding-bottom: 5px; color: #666;}

.biography_2				{ padding: 147px 0 0 30px; width: 210px;}
.biography_2 h4				{ font-weight: 100; font-size: 1.1em; color:#333; font-variant:small-caps;}
.biography_2 h5				{ font-weight: 100; font-size: 0.8em; color:#666; margin-bottom: -4px;  }
.biography_2 p				{ font-size: 0.7em; padding-bottom: 5px; color: #666;}

.biography_3				{ padding: 147px 0 0 30px; width: 100px;}


.skilllist					{ margin: 0px; padding: 0px; font-size: 0.7em;}

.skilllist dd				{ padding-bottom: 5px; margin: -14px 0 0 10px;}


/* PORTFOLIO */
div.img						{
								height: 500px;
								margin-top: 0px;
								background-position: top;								}

div.chgimg 					{
								height: 500px;
								margin-top: 0px;
								background-position: top;
							}


.infolayer a:link			{ color: #000; text-decoration: none; }
.infolayer a:visited		{ color: #000; text-decoration: none; }
.infolayer a:active			{ color: #000; text-decoration: none; }
.infolayer a:hover			{ color: #666; text-decoration: none; }

div.chgimg:hover 			{
								height: 500px;
								margin-top: 0px;
								background-position: bottom;
							}

.imgload				{ background: url(../img/loading.gif) center center no-repeat;}

td.imgload > a {								cursor:url(../img/magnify_cursor.gif), crosshair;}


/* MMD */
.project				{ padding: 35px 10px 0px 20px; margin: 0 0 0 1px; height: 465px;}
.project h4				{ margin:0px; padding:0px; color:#333; font-size:1.1em; font-weight: 100; font-variant:small-caps;}
.project p				{ font-size: 0.7em; line-height: 1.5em; color: #888; width: 230px; /*float:left; */}
.project p.teaser		{ color:#666; }

.project_teaser_text	{ float:left; width:290px; }
.project_text			{ float:left; width:250px; }

.project_teaser_text p.technology		{ background-color:#EFEFEF; margin:-5px;padding:5px; border: 0px solid #CCC ; width:250px;}

.project_text ul		{ font-size: 0.7em; color:#888; list-style-type:circle; padding: 0 0 0 15px; margin:0;}
.project_text ul li		{ line-height: 1.5em; } /* padding: 0.5em 0 0.5em 0;}*/


/* .project_more p			{ font-size: 0.7em; line-height: 1.5em; color: #888; width: 230px; margin-right: 20px;}*/

.odd					{ background-color: #FFF; border-left: 1px solid #CCC; }
.odd:hover				{ background-color: #FAFAFA; }

.even					{ background-color: #FFF; border-left: 1px solid #CCC; }
.even:hover				{ background-color: #FAFAFA; }


.project_galerie		{ float:left; }
.galerie_400			{ width:400px; float:left; margin-right: 20px; }
.galerie_300			{ width:300px; float:left; margin-right: 20px; }
.galerie_200			{ width:200px; float:left; margin-right: 20px; }
.galerie_100			{ width:100px; float:left; margin-right: 20px; }

.project_galerie ul		{ list-style-type:none; margin:15px 0 0 0; padding:0; }
.project_galerie ul li		{ float:left; padding:1px; width:98px; height:98px; -moz-opacity:0.9;filter:alpha(opacity=90);opacity:0.9;}
.project_galerie ul li:hover	{ padding:0; border:1px solid #333;				-moz-opacity:1.0;filter:alpha(opacity=100);opacity:1.0;}




a:link					{ color: #666; text-decoration: none; }
a:visited				{ color: #666; text-decoration: none; }
a:active				{ color: #666; text-decoration: none; }
a:hover					{ color: #333; text-decoration: none; }

h1 a:link				{ color: #333; text-decoration: none; }
h1 a:visited			{ color: #333; text-decoration: none; }
h1 a:active				{ color: #333; text-decoration: none; }
h1 a:hover				{ color: #666; text-decoration: none; }


/* styling der "scroller-Divs" - falls JS deaktiviert ist*/
#scroller_left			{ position: absolute; display: none; }
#scroller_right			{ position: absolute; display: none; }

#scroller_left:hover	{  background: url(../img/scrollbar_left.png) center center no-repeat;  -moz-opacity:0.7;filter:alpha(opacity=70);opacity:0.7; }
#scroller_right:hover	{  background: url(../img/scrollbar_right.png) center center no-repeat; -moz-opacity:0.7;filter:alpha(opacity=70);opacity:0.7; }



/* INFO_BARS */
.subbar					{ position:absolute; margin-top: -10px; height:10px; width:100%; background: url(../img/subbar_off.png) center top no-repeat; -moz-opacity:1.0;filter:alpha(opacity=100);opacity:1.0; overflow:hidden; }
.subbar:hover			{  padding-top:10px; margin-top: -10px;              width:100%; background: url(../img/subbar_on.png) center bottom no-repeat; -moz-opacity:0.8;filter:alpha(opacity=80);opacity:0.8; overflow:hidden;}

.subbar .infolayer				{ display:none; margin-top: -10px; padding:20px 10px 0px 10px; font-size: 0.6em; word-spacing: 0.2em; }
.subbar:hover .infolayer		{ display:block; background-color: #FFF; color: #333;}



.info50:hover			{ height: 50px; z-index:999; }
.info50 .infolayer	    { height: 30px; }

.info75:hover			{ height: 75px; z-index:999; }
.info75 .infolayer	    { height: 55px; }

.info100:hover			{ height: 100px; z-index:999;}
.info100 .infolayer	    { height: 80px; }

.info125:hover			{ height: 125px; z-index:999; }
.info125 .infolayer	    { height: 105px; }

.info150:hover			{ height: 150px; z-index:999; }
.info150 .infolayer	    { height: 130px; }

.info175:hover			{ height: 175px; z-index:999; }
.info175 .infolayer	    { height: 155px; }

.info200:hover			{ height: 200px; z-index:999; }
.info200 .infolayer	    { height: 180px; }

.info225:hover			{ height: 225px; z-index:999; }
.info225 .infolayer	    { height: 205px; }

.info250:hover			{ height: 250px; z-index:999; }
.info250 .infolayer	    { height: 230px; }

.info275:hover			{ height: 275px; z-index:999; }
.info275 .infolayer	    { height: 255px; }

.info300:hover			{ height: 300px; z-index:999; }
.info300 .infolayer	    { height: 280px; }

.info325:hover			{ height: 325px; z-index:999; }
.info325 .infolayer	    { height: 305px; }

.info350:hover			{ height: 350px; z-index:999; }
.info350 .infolayer	    { height: 330px; }

.info375:hover			{ height: 375px; z-index:999; }
.info375 .infolayer	    { height: 355px; }

.info400:hover			{ height: 400px; z-index:999; }
.info400 .infolayer	    { height: 380px; }

.info425:hover			{ height: 425px; z-index:999; }
.info425 .infolayer	    { height: 405px; }

.info450:hover			{ height: 450px; z-index:999; }
.info450 .infolayer	    { height: 430px; }


.magnifier			{display:none; padding-left:15px; padding-top:5px; width:60px; height: 17px; font-size:0.7em; background: url(../img/magnify.gif) left center no-repeat; -moz-opacity:0.8;filter:alpha(opacity=80);opacity:0.8; position:absolute; top:530px;}
.magnifier:hover			{-moz-opacity:1.0;filter:alpha(opacity=100);opacity:1.0;}