/* 	= styles.css
	
	@Author:		Michael Schieben, http://twoantennas.com
	
	@description:	Standard stylesheet for modern browsers
	
	@media:			Screen	
	
	@browsers:	Mozilla Firefox, 
							Apple Safari,

					
	@fixes:			-
							-

	@hacks:			-
							-

	@colors:		black = #000;
							white = #FFF;
							beige = #FC9; (scrabbleblock)
							light beige = #E4DCD0; (notebook paper)

--------------------------------------------------------------------- */

span {
	/*text-transform: uppercase;*/
}

#kontakt span {
	text-transform: none;
}

/* = Basics
--------- --------- --------- --------- --------- --------- --------- */
body {
	font: 12px/1.4em Verdana, Arial, sans-serif;
	color: #000;
	background-color: #222;
	margin: 0;
	padding: 0;
}

a {
	color: #000;
}

a:hover {
	color: #000;
	border-bottom: 1px solid #000;
}

a img {
	border: none;
}

div.imgnext a:hover,
div.imgprevious a:hover,
div.imagethumb a:hover {
	border: none;
}

div#all {
	width: 769px;
	height: 602px;
	margin: 0 auto;
	background: #000 URL(gfx/allbg.jpg) no-repeat left top;
	border: 5px solid #666;
}

div#all h1,
div#all h2,
div#all h3 {
	display: none;
	padding: 0;
}

div#writespace h1,
div#writespace h2,
div#writespace h3 {
	display: block;
	font-size: 12px;
	line-height: 1.4em;
}

div#playground {
	width: 769px;
	height: 602px;
	margin: 0;
	position: relative;
}

/* = Top-Navigation 
--------- --------- --------- --------- --------- --------- --------- */
div#textmenu {
	width: 769px;
	height: 18px;
	margin: 40px auto 0 auto;
}

div#textmenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

div#textmenu ul li {
	display: inline;
	margin-left: 5px;
}

div#textmenu a {
	font-size: 10px;
	color: #999;
	text-decoration: none;
}

div#textmenu a:hover {
	color: #FFF;
}

/* = Navigation (Scrabble Grid)
--------- --------- --------- --------- --------- --------- --------- */

ul#mainmenu {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}

ul#mainmenu li {
	display: block;
	position: absolute;
	background-position: left top;
	background-repeat: no-repeat;
	background-color: #FC9;
}

ul#mainmenu li a {
	display: block;
	text-indent: -2000px;
	text-decoration: none;
	background-color: transparent;
}

ul#mainmenu li a span {
	visibility:		hidden;
}

li#main_illustration,
li#main_illustration a {
	width:			40px;
	height:			480px;
	left:			205px;
	top:			41px;
	background-image: URL(gfx/illustration.jpg);
}


li#main_frauhuber,
li#main_frauhuber a {
	width:			405px;
	height:			40px;
	left:			165px;
	top:			280px;
	background-image: URL(gfx/frauhuber.jpg);
}

li#main_rauminszenierung,
li#main_rauminszenierung a {
	width:			648px;
	height:			42px;
	left:			43px;
	top:			402px;
	background-image: URL(gfx/rauminszenierung.jpg);
}

li#main_kontakt,
li#main_kontakt a {
	width:			41px;
	height:			278px;
	left:			609px;
	top:			324px;
	background-image: URL(gfx/kontakt.jpg);
}


/* = Content Areas (Notebook)
--------- --------- --------- --------- --------- --------- --------- */
div#notebook {
	position:			absolute;
}

/* = Illustration
--------- --------- --------- --------- --------- --------- --------- */
body.Illustration div#notebook {
	width: 490px;
	height: 478px;
	left: 241px;
	top: 42px;
	background: #E4DCD0 URL(gfx/illustration-bg.jpg) repeat-y top left;
	overflow: hidden;
}

body.Illustration div#image {
	width: 368px;
	height: 405px;
	margin: 53px 0 0 82px;
	position: relative;
	overflow: hidden;
}

body.Illustration div#image img {
	width: 328px;
	height: 345px;
	margin: 0 0 0 20px;
	display: block;
}

body.Illustration div#image p#description {
	width: 315px;
	height: 20px;
	margin: 42px 0 0 25px;
	padding: 0;
	line-height: 20px;
	color: #666;
	text-align: center;
}

body.Illustration div#image div.imgprevious {
	position: absolute;
	bottom: 2px;
	left: 0;
	width: 20px;
	height: 12px;
	background: transparent URL(gfx/rauminszenierung-prev.gif) no-repeat top left;
}

body.Illustration div#image div.imgnext {
	position: absolute;
	bottom: 2px;
	right: 0;
	width: 20px;
	height: 12px;
	background: transparent URL(gfx/rauminszenierung-next.gif) no-repeat top left;
}

body.Illustration div#image div.imgprevious a,
body.Illustration div#image div.imgnext a {
	display: block;
	width: 20px;
	height: 12px;
}

body.Illustration div#image div.imgprevious a {
	background: transparent URL(gfx/rauminszenierung-prev.gif) no-repeat top left;
}

body.Illustration div#image div.imgnext a {
	background: transparent URL(gfx/rauminszenierung-next.gif) no-repeat top left;
}

body.Illustration div#image div.imgprevious a span,
body.Illustration div#image div.imgnext a span {
	display: none;
}


/* = Frau Huber
--------- --------- --------- --------- --------- --------- --------- */

body#frauhuber div#notebook {
	width: 401px;
	height: 282px;
	left: 164px;
	top: 320px;
	background: #E4DCD0 URL(gfx/frauhuber-bg.jpg) repeat-x top left;
}

body#frauhuber div#notebook div#writespace {
	width: 315px;
	height: 160px;
	margin: 80px 0 0 44px;
	overflow: auto;
}

body#frauhuber p,
body#frauhuber h3 {
	margin:				0;
}

body#frauhuber p.introduction {
	margin-top:		-0.2em;
}

body#frauhuber p.last {
	padding-bottom:	2em;
}

body#frauhuber h3 {
	display: block;
	margin:				1.3em 0 0 0;
}

body#frauhuber p {
	margin:				0.2em 0 0.8em 0;
}

body#frauhuber div#writespace h1 {
	display: block;
	font-weight:		900;
}


/* = Rauminszenierung
--------- --------- --------- --------- --------- --------- --------- */
body.Rauminszenierung div#notebook {
	width: 646px;
	height: 362px;
	left: 44px;
	top: 42px;
	background: #E4DCD0 URL(gfx/rauminszenierung-bg.jpg) repeat-x top left;
	padding: 0;
}

body.Rauminszenierung div#overview {
	width: 554px;
	height: 217px;
	margin: 58px 0 0 60px;4
	overflow: hidden;
}

body.Rauminszenierung div#overview div.imagethumb {
	float: left;
	width: 91px;
	height: 91px;
	margin: 0 18px 40px 0;
}

body.Rauminszenierung div#image {
	width: 524px;
	height: 250px;
	margin: 50px 0 0 60px;
	position: relative;
	overflow: hidden;
}

body.Rauminszenierung div#image img {
	width: 524px;
	height: 217px;
}

body.Rauminszenierung div#image p#description {
	width: 472px;
	height: 20px;
	margin: 5px 0 0 25px;
	padding: 0;
	line-height: 20px;
	color: #666;
	text-align: center;
}

body.Rauminszenierung div#image div.imgprevious {
	position: absolute;
	bottom: 9px;
	left: 0;
	width: 20px;
	height: 12px;
	background: transparent URL(gfx/rauminszenierung-prev.gif) no-repeat top left;
}

body.Rauminszenierung div#image div.imgnext {
	position: absolute;
	bottom: 9px;
	right: 0;
	width: 20px;
	height: 12px;
	background: transparent URL(gfx/rauminszenierung-next.gif) no-repeat top left;
}

body.Rauminszenierung div#image div.imgprevious a,
body.Rauminszenierung div#image div.imgnext a {
	display: block;
	width: 20px;
	height: 12px;
}

body.Rauminszenierung div#image div.imgprevious a span,
body.Rauminszenierung div#image div.imgnext a span {
	display: none;
}

/* = Kontakt
--------- --------- --------- --------- --------- --------- --------- */
body#kontakt div#notebook {
	margin: 0;
	width: 364px;
	height: 276px;
	left: 246px;
	top: 325px;
	background: #E4DCD0 URL(gfx/kontakt-bg.jpg) repeat-y top left;
}

body#kontakt div#writespace {
	padding: 30px 0 0 60px;
	height: 246px;
	overflow: auto;
/*	background: #f00; */
}



/* = Credits
--------- --------- --------- --------- --------- --------- --------- */
div#credit {
	width: 769px;
	height: 18px;
	margin: 0 auto 40px auto;
	font-size: 10px;
	color: #000;
	text-align: right;
}

div#credit p {
	margin: 0;
}

div#credit a {
	color: #000;
	text-decoration: none;
}

div#credit a:hover {
	color: #FFF;
	text-decoration: none;
	border: none;
}