@import url('reset.css');

body { font: 62.5%/1.3em 'Lucida Grande', 'Lucida sans unicode', arial, sans-serif; color: #6d6e71; background-color: #FFF; width: 100%; background: transparent url('../images/bodybg.png') center top no-repeat; }

/* .. layout box */
#box { width: 1250px; margin: 0 auto; height: 620px; position: relative; }

	.black { background: transparent url('../images/box-black.png') left bottom repeat-y; }
	.aqua { background: transparent url('../images/box-aqua.png') left bottom repeat-y; }
	.red { background: transparent url('../images/box-red.png') left bottom repeat-y; }
	
	.box-bottom { width: 1250px; height: 94px; position: absolute; bottom: 0; z-index: 1; }
		.b-red { background: transparent url('../images/box-bottom-red.png') left bottom no-repeat; }
		.b-black { background: transparent url('../images/box-bottom-black.png') left bottom no-repeat; }
		.b-aqua { background: transparent url('../images/box-bottom-aqua.png') left bottom no-repeat; }
		
/* .. text things */
.skip-intro { position: absolute; bottom: 140px; left: 135px; color: white; font-size: 13px; text-transform: uppercase; z-index: 2; }
	.skip-intro a { color: #FFF; }
	.skip-intro a:hover { border-bottom: 1px dotted #FFF; }
a.skype-intro { position: absolute; right: 12px; bottom: 5px; height: 20px; width: 95px; }
a.email-intro { position: absolute; right: 175px; bottom: 5px; height: 20px; width: 130px; }

#content-title, #contact-title, #gallery-title { color: #949494; position: absolute; font-weight: bold; font-family: 'Myriad', 'Myriad Pro', Helvetica, Arial, sans-serif; height:100% }
#content-title { left: 322px; top: 295px; font-size: 24px; }
#contact-title { left: 435px; top: 335px; font-size: 24px; }
#gallery-title { right: 410px; top: 325px; font-size: 30px; line-height: 100%; text-align: right; }
	.text-red { color: #ed1c24; }
	.text-black { color: #111; }
#content { position: absolute; left: 316px; top: 340px; font-size: 14px; line-height: 130%; z-index: 4; height: 210px; overflow: hidden; width: 770px; }
	.content-indent { padding-left: 100px; width: 770px; }

#contact { position: absolute; left: 460px; top: 385px; font-size: 14px; line-height: 100%; z-index: 4; height: 210px; overflow: hidden; width: 770px; }
	.contact-indent { padding-left: 100px; width: 770px; }
	#contact a { color: #666; }
	#contact a:hover { color: #333; }
	
#sidebar { position: absolute; bottom: 150px; right: 1030px; color: white; font-size: 11px; text-transform: uppercase; text-align: right; }
	#sidebar a { color: white; }
	#sidebar a:hover { color: #DDD; }
	.sidebar-hidden a { display: block; padding-top: 0px; color: #FFF; }
	.sidebar-hidden { position: absolute; 0; color: white; font-size: 11px; text-transform: uppercase; text-align: right; bottom: 150px; left: 30px; line-height: 170%; width: 190px; }
	.sidebar-hidden a.sel { color: #000; }
	
a#mycarousel-prev { position: absolute; top: 150px; left: 185px; font-size: 20px; color: white; }
a#mycarousel-next { position: absolute; top: 150px; left: 210px; font-size: 20px; color: white; }
a#mycarousel-prev:hover, a#mycarousel-next:hover { color: #444; }

a.text-link { color: #666; display: block; padding-bottom: 2px; }
a.text-link:hover { color: #222; }

/* .. menu */
#menu { width: 1250px; margin: 0 auto; height: 90px; position: absolute; top: 200px; left: 0; overflow: hidden; font-family: 'Myriad', 'Myriad Pro', Helvetica, Arial, sans-serif; }
#menu ul { position: relative; left: 50%; float: left; }
#menu ul li { position: relative; right: 50%; display: inline; float: left; }
#menu ul li a { display: block; float: left; padding: 11px 20px; color: #AAA; text-transform: uppercase; font-size: 11px; }
#menu ul li a:hover, #menu ul li a.sel { color: #EEE; }
	
/* .. other elements */
.intro-animation { position: absolute; right: 120px; top: 90px; z-index: 3; width: 626px; height: 390px; }
	#intro-2, #intro-3 { display: none; }
.intro-lang { position: absolute; bottom: 120px; left: 28px; z-index: 2; background: transparent url('../images/intro-lang.jpg') left top no-repeat; width: 191px; height: 100px; }
.intro-logo { position: absolute; right: 108px; bottom: 156px; z-index: 3; background: transparent url('../images/intro-logo.jpg') left top no-repeat; width: 753px; height: 184px; }
a.lang-de { position: absolute; width: 87px; height: 87px; left: 5px; top: 5px; }
a.lang-en { position: absolute; width: 87px; height: 87px; left: 97px; top: 5px; }

.top-picture { width: 250px; height: 200px; position: absolute; left: 0; top: 0; }
#slideshow-wrap { position: absolute; left: 250px; width: 1000px; height: 200px; overflow: hidden; }
	#slideshow { width: 10000px; overflow: hidden; }
	
#client { width: 870px; position: absolute; top: 430px; left: 316px; z-index: 5; }
#client-table { margin: 0; padding-left: 30px; }
#client-table tr td.left { font-size: 10px; color: #222222; padding: 0 0 1px 0; line-height: 180%; }
#client-table tr td.right { font-size: 10px; color: #6d6e71; padding: 0 0 1px 0; line-height: 180%; }

#gallery-main { position: absolute; top: 280px; right: 50px; z-index: 6; }
a.making-of-gallery { position: absolute; z-index: 7; }

.cleaner { clear: both; }