/*

Thanks for looking in here   /   Danke für den Blick hier rein
Coding HTML and CSS takes    /
some training and I've spent /
countles hours doing so.     /
So, before just copying, you /   Bevor du diesen Code einfach kopierst
may ask. Thanks, Philippe    /   frage doch einfach erst mal nach. Danke! Philippe

General Styles

*/

html, body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background-color:#333333;
	margin: 0;
	padding: 0;
	color: #000000;
	text-align:center;
}

#container {
	position:absolute;
	width: 960px;              /* navigation: 200px; content: 720px; */
	height: 511px;              /* höhe header: 43px + 10px;    main: 405;    footer: 43px + 10px;    Total 583px; */
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -480px; /* Half the width of the DIV tag which is 50 pixels */
	margin-top:  -260px; /* Half the height of the DIV tag which is also 50 pixels */
}

#page { 
	width: 960px;
	height: 511px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}

a:link, a:visited, a:active {
	color:#cc2222;
	text-decoration:underline;
}

a:hover {
	color:#cc2222;
	text-decoration:underline;
}

/*   Header
------------------------------------------------*/


#header { 
	position: relative;
	margin:0 0 10px 0;
	padding:0;
	height:43px;
} 
#header h1 { /* Logo Farben: f9cccc, aa0000, 999999 */
	position: absolute;
	bottom: 0;
	left: 32px;
	margin: 0;
	font-size: 10px;
	height: 43px;
}
#header h1 a {
	display: block;
	width: 175px;
	height: 43px;
	background: transparent url("/img/philippe-wiget-hochzeitfoto.gif") no-repeat;
	text-indent: -700em;
	text-decoration: none;
}

#header #slogan {
	position: absolute;
	bottom: 0px;
	right:  2px;
	width: 400px;
	height: 14px;
	font-size:12px;
	line-height:14px;
	font-style:normal;
	color:#cccccc;
	text-align:right;
	margin:0;
	padding:0;
}


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

Main content part 

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


#main {
	width: 720px;
	height: 405px;
	float:right;
	margin: 0;
	padding: 0;
	border: 0;
	font-size:12px;
	color:#000000;
}
.sectionPortfolio #main {
	height: 439px;
}
#main_page {
	width: 720px;
	height: 405px;
	margin: 0;
	padding: 0px;
}

h2 {
	font-size:12px;
	font-weight:bold;
	line-height:16px;
	margin: 0;
	padding: 0 0 10px 0;
}
p {
	font-size:11px;
	font-weight:normal;
	line-height:15px;
	margin: 2px 0 4px 0;
	padding: 0;
}

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

Main content - specific content

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


.textbox_right {
	background-image:url(/img/transp_black_50.png);
/*	background-color:#666666;
	filter: alpha(opacity=50);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	-moz-opacity: 0.50;
	opacity:0.5;*/
	float:right;
	width: 350px;
	height: 390px;
	margin: 0px 80px;
	padding: 5px;
}

.textbox_left {
	background-image:url(/img/transp_black_50.png);
	float:left;
	width:400px;
	height: 390px;
	margin: 0px;
	padding: 5px;
}


/*  Kontakt Seite */
.kontakt {
	background-image:url("/bilder/ringe_01.jpg");
	background-position:top;
}
.textbox_kontakt {
	background-image:url(/img/transp_white_70.png);
	float:right;
	margin: 0px;
	margin-right: 0px;
	width: 250px;
	height: 355px;
	padding: 25px 5px 25px 25px;
	overflow:auto;
}

form {
	margin:0px;
	font-size:10px;
	}
input {
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
.input_contact {
	margin: 0 0 2px 0;
	font-size: 11px;
	color:#999999;
	padding: 1px;
	width: 200px;
	height: 15px;
	border: 1px solid #CCCCCC;
}
.input_message {
	margin: 0 0 2px 0;
	font-size: 11px;
	color:#999999;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding: 1px;
	width: 200px;
	height: 60px;
	border: 1px solid #CCCCCC;
}
.button_sendmail {
	margin: 0 0 2px 0;
	padding: 1px;
	font-size: 11px;
	font-weight:bold;
	color:#aa0000;
	background-color:#CCCCCC;
	width: 100px;
	height: 20px;
	border: 1px solid #666666;
}








/*------------------------------------------------
   Navigation
------------------------------------------------*/

#navigation { 
	position:relative;
	float: left;
	width: 207px;
	height: 355px;
	margin: 0px;
	padding: 25px 0 25px 33px;
	background-color:#ffffff;
}
#photophil_wed_logo {
	position:absolute;
	width:161px;
	height:49px;
	bottom:25px;
	left:33px;
	text-indent: -700em;
	text-decoration: none;
	background: transparent url("/img/photophil-R-weddings.png") no-repeat;
}

ul#nav  {
	list-style: none;
	margin:0; /* centered: auto*/
	padding:0;
	display:block;
}
#nav li.navD_top {
	padding: 0;
	margin: 0 0 0px 0;
}

ul#nav a.navD_top {
	display: block;
	height: 22px;
	font-size: 10px;
	text-indent: -700em;
	text-decoration: none;
}

ul.subnav  {
	list-style: none;
	margin:0 0 10px 10px; /* centered: auto*/
	padding:0;
	display:block;
}

ul.subnav li {
	font-size: 11px;
	font-weight:bold;
	line-height: 13px;
	padding: 0 0 3px 0;
	margin: 0;
	text-indent: 0em;
}
ul.subnav a:link, ul.subnav a:visited {
	color:#888888;
	text-decoration: none;
}
ul.subnav a:hover, ul.subnav a:active, ul.subnav a:link.current, ul.subnav a:visited.current {
	color:#dd4444;
	text-decoration: none;
}

/*ul.subnav a:link, ul.subnav a:visited {
}*/

/*  Navigation Roll-Overs und 
	Subnavigation (Un-)Sichtbarkeiten
	------------------------------------------*/

/*
    Kontakt           69px
*/

li a#navD_kontakt {
	background: transparent url("../img/navD_off_kontakt.png") no-repeat;
}
body.sectionKontakt li a#navD_kontakt {
	background: transparent url("../img/navD_over_kontakt.png") no-repeat;
}
li a#navD_kontakt:hover {
	background: transparent url("../img/navD_over_kontakt.png") no-repeat;
}
body.sectionKontakt ul.subnavPortfolio, 
body.sectionKontakt ul.subnavFotograf, 
body.sectionKontakt ul.subnavInfo, 
body.sectionKontakt ul.subnavBlog
	{ display:none; }


/*
    Blog           52px
*/

li#navD_blog a {
	background: transparent url("../img/navD_off_blog.png") no-repeat;
}
body.sectionBlog li#navD_blog a {
	background: transparent url("../img/navD_over_blog.png") no-repeat;
}
li#navD_blog:hover a {
	background: transparent url("../img/navD_over_blog.png") no-repeat;
}
body.sectionBlog ul.subnavPortfolio, 
body.sectionBlog ul.subnavFotograf, 
body.sectionBlog ul.subnavInfo, 
body.sectionBlog ul.subnavKontakt
	{ display:none; }


/*
    Info           47px
*/

li#navD_info a {
	background: transparent url("../img/navD_off_info.png") no-repeat;
}
body.sectionInfo li#navD_info a {
	background: transparent url("../img/navD_over_info.png") no-repeat;
}
li#navD_info:hover a {
	background: transparent url("../img/navD_over_info.png") no-repeat;
}
body.sectionInfo ul.subnavPortfolio, 
body.sectionInfo ul.subnavFotograf, 
body.sectionInfo ul.subnavBlog, 
body.sectionInfo ul.subnavKontakt
	{ display:none; }


/*
    fotograf           75px
*/

li#navD_fotograf a {
	background: transparent url("../img/navD_off_fotograf.png") no-repeat;
}
body.sectionFotograf li#navD_fotograf a {
	background: transparent url("../img/navD_over_fotograf.png") no-repeat;
}
li#navD_fotograf:hover a {
	background: transparent url("../img/navD_over_fotograf.png") no-repeat;
}
body.sectionFotograf ul.subnavPortfolio, 
body.sectionFotograf ul.subnavInfo, 
body.sectionFotograf ul.subnavBlog, 
body.sectionFotograf ul.subnavKontakt
	{ display:none; }


/*
    portfolio           77px
*/

li a#navD_portfolio {
	background: transparent url("../img/navD_off_portfolio.png") no-repeat;
}
body.sectionPortfolio li a#navD_portfolio {
	background: transparent url("../img/navD_over_portfolio.png") no-repeat;
}
li a#navD_portfolio:hover {
	background: transparent url("../img/navD_over_portfolio.png") no-repeat;
}
body.sectionPortfolio ul.subnavFotograf, 
body.sectionPortfolio ul.subnavInfo, 
body.sectionPortfolio ul.subnavBlog, 
body.sectionPortfolio ul.subnavKontakt
	{ display:none; }



li a#navD_home {
	background: transparent url("../img/navD_off_home.png") no-repeat;
}
body.sectionHome li a#navD_home {
	background: transparent url("../img/navD_over_home.png") no-repeat;
}
li a#navD_home:hover {
	background: transparent url("../img/navD_over_home.png") no-repeat;
}
body.sectionHome ul.subnavPortfolio, 
body.sectionHome ul.subnavFotograf, 
body.sectionHome ul.subnavInfo, 
body.sectionHome ul.subnavBlog, 
body.sectionHome ul.subnavKontakt
	{ display:none; }



/*   Footer
------------------------------------------------*/

#footer { 
	position:relative;
	clear: both;
	width: 960px;
	height: 43px;
	margin: 0;
	padding: 0;
}
#copy {
	position:absolute;
	top:10px;
	right:2px;
	text-align:left;
}
#copy a:link, #copy a:visited, #copy {
	font-size: 10px;
	color: #555555;
	text-decoration:none;
}

#lang {
	position:absolute;
	top:10px;
	left:32px;
	text-align:left;
}
#lang a:link, #lang a:visited, #lang {
	font-size: 10px;
	color: #999999;
	text-decoration:none;
}