@charset "utf-8";
/* CSS Document */
/*12 avril 2010*/

body, html {
	color: #878787;
	font-family: "Avenir LT Std 45 Book",calibri,helvetica,arial;
	min-height: 695px;
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 15px;
	text-decoration: none;
	color: #a5a7a9;
}
a, a img{
	text-decoration: none;
	border:none;
	color: #878787;
}
/**********************************************************************************************************************/
/**************************Menu déroulant******************************************************************************/
ul li   /*disposition du premier niveau du menu déroulant*/
{
	display: block;
	float:left;
	width: 132px;
}
ul.dropdown{
	height:50px;
	padding:0;
}
ul li ul li  /*disposition du deuxieme niveau du menu déroulant*/
{
	
	float: none;
	position: relative;
	top: 5px;
/*	left: -40px;*/
	background-color:#FFFFFF;
}


ul li a, ul li ul li a, ul li span		/*enléve le style des lien et modifie le style des span dans le menu*/
{
	text-decoration: none;
	color: #a5a7a9;
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 15px;
}

ul li a:hover, ul li ul li a:hover, ul li span:hover, a:hover	/*définition de la couleur du texte sur passage*/
{
	color: #147dad;
	cursor: pointer;
}

ul li#contact	/*placement de l'onglet contact sur la droite du site*/
{
	text-align: right;
}
ul li.active a,ul li.active ul li.active a{
	font-weight:bold;
	color: #147dad;
}
ul li.active ul li a{
	font-weight:normal;
	color: #a5a7a9;
}
ul#biography
{
/*	float: left;
	position: absolute;
	left: -76%;
	top: 230%;*/
}

#menu	/*défini la position du menu déroulant*/
{
	position: relative;
	float: right;
	right: 0px;
	z-index: 60;
	padding-top:50px;
}
#menu ul,#menu ul li div{
/*	overflow: visible;*/
	overflow:hidden;
	z-index:50;
	position:relative;
}
.sousmenu > div{
	overflow:hidden;
	z-index:50;
}
.sousmenu {
	z-index:60;
}
div#biography	/*placement des lien de tous les clients*/
{
	float: left;
	top: -37px;
	width: 140px;
	left: 695px;
	position: absolute;
}

div#projects	/*placement des lien de tous les clients*/
{
	float: left;
	width: 140px;
	left: 432px;
	position: absolute;
}
#site{
	width: 1000px;
}

/**********************************************************************************************************************/
/**************************logo****************************************************************************************/
#logo	/*mise en page du texte VOGTHERR & VOGTHERR dans les pages interne du site*/
{
	
	float: left;
	font-family: "Avenir LT Std 35 Light",calibri, helvetica, arial;
	font-size: 35px;
	color: #5294be;
	position: relative;
	padding-top:40px;
	margin-left: -5px;
}
#logo_wrapper{
	height:33px;
	width:405px;
}
#image_logo	/*mise en page du texte VOGTHERR & VOGTHERR dans la page d'accueil*/
{
	position: relative;
	z-index: 1;
	top:-1px;
}

#intro	/*mise en place de l'animation de la page d'accueil*/
{
	z-index:2;
	position: relative;
	left: -145px;
	top: -52px;
}
#intro_wrapper{
	z-index:1;
	position:absolute;
}
/**********************************************************************************************************************/
/**************************le corps des pages**************************************************************************/
#corps	/*place le corps de la page en dessous du menu et du logo et empéche que le menu soit cacher par le corps*/
{
	z-index: 2;
	position: absolute;
	top: 80px;
	width: 1000px;
	min-height: 660px;
}

/**********************************************************************************************************************/
/**************************page d'accueil******************************************************************************/
#corps img#accueil	/*place l'image de la page d'accueil	elle n'est plus en place pour cause de modification*/
{
	position: absolute;
	top: 130px;
	right: 22%;
}

#corps span#slogan	/*place le texte de la page d'accueil	il n'est plus en place pour cause de modification*/
{
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 50px;
	text-align: center;
	color: #6d6f71;
	position: absolute;
	top: 82px;
	left: 2%;
}

/**********************************************************************************************************************/
/**************************page biography et contact*******************************************************************/
/*place les images des page biography et contact*/
div#corps div#prix
{
	position: absolute;
	top: 11px;
	width: 400px;
}

div#corps img#burkhard, div#corps img#henriette, div#corps img#karte
{
	position: relative;
	left: 0%;
	top: 10px;
	float: left;
}
div#corps img#karte {
	top:40px;
}
div#corps div#prix .petit
{
	position: relative;
	top: 460px;
	left: 0px;
	float: right;
	width: 40px;
	padding-left: 20px;
	
}

div#corps div#bio	/*placement du text dans la partie de biography */
{
	width: 465px;
	height: 420px;
	position: relative;
	left: 7%;
	top: 27px;
	float: left;
}
div#corps div#bio {
	top:40px;
}

div#corps img#up_bio	/*placement de l'image qui sert a faire monter le texte de biography	elle n'est plus en place pour cause de modification*/
{
	position:absolute;
	left: 55%;
	top: 10px;
}

div#corps img#down_bio	/*placement de l'image qui sert a faire descendre le texte de biography		elle n'est plus en place pour cause de modification*/
{
	position:absolute;
	left: 55%;
	top: 450px;
	
}

div#corps div#bio div#periode, div#corps div#bio div#bio1 /*mise en page du texte de biography*/
{
	color: #a5a7a9;
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 13px;
	height: 420px;
	float: left;
}

div#corps div#bio div#bio1
{
	width: 259px;
}

div#corps div#bio div#periode	/*place la zone pour les dates des biographie*/
{
	padding-left: 8px;	
	width: 198px;
}

div#corps div#bio div#bio2 a, div#corps div#bio div#bio1 a /*enléve le style des lien dans la page contact*/
{
	text-decoration: none;
	color: #a5a7a9;
}

div#corps div#bio div#bio1 table
{
	width: 535px;
}

div#corps div#bio div#bio1 table tr .first
{
	width: 90px;
}

div#corps div#bio div#bio1 table tr .second
{
	width: 160px;
}

div#corps div#bio div#bio1 table tr .contentFree
{
	width: 310px;
}

div#corps div#bio div#bio1 table tr .contentFree #adress, div#corps div#bio div#bio1 table tr .contentFree #message
{
	width: 318px;
}

div#corps div#bio div#bio1 table tr .adress
{
	width: 150px;
}
/**********************************************************************************************************************/
/**************************page client*********************************************************************************/
 div#client	/*placement des lien de tous les clients*/
{
	

	top: 70px;
	width: 140px;
	position: relative;
	z-index: 10;
}
#client ul{
	margin-left:0;
	padding-left:0;
}
 div#client a	/*suppression des style des liens*/
{
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 15px;
	text-decoration: none;
	color: #a5a7a9;
}

div#cadre_client	/*placement et application des propriétés utile pour faire défiler les images des pages client*/
{
	position: absolute;
	top: 40px;
	left: 23%;
	width: 560px;
	/*height: 400px;*/
	
	overflow: hidden;
}

div#cadre_client div#photo div	/*placement du contenu d'un article dans la page client*/
{
	/*width: 107px;*/
	height: 180px;
	float: left;
	margin-right: 20px;
	text-align: center;
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 12px;
	color: #a5a7a9;
}

div#cadre_client div#photo div a	/*applique le style que nous voulons pour les lien des images*/
{
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 12px;
	text-decoration: none;
	color: #a5a7a9;
}

div#cadre_client div#photo div img	/*mise en page d'une photo d'un article dans la page client*/
{
	
	height: 112px;
	margin-bottom: 10px;
	border: none;
}

div#corps div#description_client	/*placement du texte de la description d'un article*/
{
	position: absolute;
	top: 160px;
	left: 740px;
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 15px;
	color: #a5a7a9;
	float: left;
	width: 300px;
}

div#corps div#description_client span	/*placement du texte de la description d'un article*/
{
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 19px;
	/*font-weight: 600;*/
	color: #a5a7a9;
}

div#corps img#up_client	/*placement de l'image qui sert a faire monter les images des articles dans les pages cleints*/
{
	position:absolute;
	left: 45%;
	top: 30px;
}

div#corps img#down_client	/*placement de l'image qui sert a faire descendre les images des articles dans les pages cleints*/
{
	position:absolute;
	left: 45%;
	top: 470px;
}

/**********************************************************************************************************************/
/**************************page graphics*********************************************************************************/
div#cadre_project	/*placement et application des propriétés utile pour faire défiler les images des pages graphics*/
{
	position: absolute;
	top: 200px;
	left: 6.5%;
	width: 800px;
	height: 180px;
	overflow: hidden;
}

div#cadre_project div#photo
{
	width: 2000px;
}

div#cadre_project div#photo div	/*placement du contenu d'un article dans la page graphics*/
{
	height: 180px;
	float: left;
	
	text-align: center;
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 12px;
	color: #a5a7a9;
}

div#cadre_project div#photo div a
{
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 12px;
	text-decoration: none;
	color: #a5a7a9;
}

div#cadre_project div#photo div img	/*mise en page d'une photo d'un article dans la page graphics*/
{
	height: 112px;
	position: relative;
	top: 10px;
	margin-bottom: 10px;
	margin-right: 20px;
	margin-left: 20px;
	border: none;
}

div#cadre_project div#photo div img:hover	/*mise en page d'une photo d'un article dans la page graphics*/
{
	height: 132px;
	position: relative;
	margin-left: 10px;
	margin-right: 11px;
	top: 0px;
	margin-bottom: 10px;
}

div#corps img#left_project		/*placement de l'image qui sert a faire déplacer sur la gauche les images des articles dans la partie project*/
{
	position: absolute;
	left: 2%;
	top:230px;
}

div#corps img#right_project/*placement de l'image qui sert a faire déplacer sur la droite les images des articles dans la partie project*/
{
	position: absolute;
	left: 89%;
	top: 230px;
}

/**********************************************************************************************************************/
/**************************page article********************************************************************************/
div#corps img#article	/*ne sert plus*/
{
	position: relative;
	top: 50px;
	float: left;
}

div#corps div#contour
{
	position:relative;
	top: 25px;
}

div#corps div#image		/*placement de la div qui entoure les images des article donc id article0 et select0*/
{
	position: relative;
	/*top: 50px;*/
	left: -0px;
	float: left;
	
}

div.description	/*placement du texte de la description d'un article*/
{
	position: relative;
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 15px;
	color: #a5a7a9;
	float: right;
	width:340px;
	z-index:10;
}
div.description #client{
	top:0;
	width:100%;
}
.clients div.description{
	width: 350px;
}
div#corps div#description span, .description h3	/*placement du texte de la description d'un article*/
{
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 19px;
	/*font-weight: 600;*/
	color: #a5a7a9;
}

div#corps div#nb_image	/*positionne les images qui servent a selectionner l'image que l'on veut afficher*/
{
	position: absolute;
	top: 420px;
	left: 0px;
	
}

div#corps div#nb_image img	/*alligne les images les une a coter des autres*/
{
	float: left;
	
}

div#corps img#retour	/*place l'image qui sert a revenir en arrière dans les détail d'article*/
{
	position: absolute;
	top: -100px;
	height: 49px;
	width: 17px;
	border: none;	
}

/**********************************************************************************************************************/
/**************************page biography********************************************************************************/
div.container{
	width:100%;
	position: relative;
	padding-top:40px;
	overflow: visible;	
}
div.bio{
	font-size: 10px;
}
div.image {
	float:left;
	width:400px;
}
div.portrat_container{
	width:100%;
	position: relative;
	padding-top:200px;
}
div.portrat{
	float:left;
	position: relative;
	width:50%;
}
div.portrat div.subtitle{
	width:100%;
	text-align: center;
	padding-top: 35px;
	font-weight: bold;
}
div.portrat div.image{
	margin: 0 auto;
	width: 194px;
	float:none;
	
}
div.back{
	position:relative;
	width:20px;
	height:40px;
	left:660px;
	top:95px;
	z-index:20;
}
.clients div.back{
	left: 555px;
}
div.back a{
	width:20px;
	height:40px;
	display:block;
	background: url('pfeil_links.jpg') no-repeat center left;
}
div#footer
{
	width: 1000px;
	position:relative;
	/*top: 590px;*/
	/*left: 0px;*/
	z-index: 1;
}

/*  Furniture Overview  */
.container.overview, .container.projects, .container.clients{
	top:150px;
	overflow: hidden; ;
	width:1000px;
	position: relative;
}
.container.projects{
	top:0px;
}

.container.clients{
	width: 900px;
	float:right;
	top:0px;
}
.border{
	margin:0 18px;
	width:950px;
	position: relative;
	overflow: hidden;
}
#timeline{
	position:relative;
}
#time_left,#time_right{
	z-index:40;
	width:30px;
	position:absolute;
	height:85%;
	opacity:0.7;
	display:block;
}
#time_left{
	left:0;
	background: url("pfeil_links.jpg") no-repeat scroll left center transparent;
}
#time_right{
	right:0;
	background: url("pfeil_rechts.jpg") no-repeat scroll right center transparent;
}
a:hover#time_left,a:hover#time_right{
	opacity:1;
}
span.timeline{
	padding: 0 4px;
	background-color:#fff;
	position:relative;
}
.column{
	position:relative;
	float:left;
}
.cell{
	position: relative;
	padding: 5px 15px;
	background-position: center;
	float:left;
}
.cell a{
	display:block;
	font-family: "Avenir LT Std 45 Book", calibri, helvetica, arial;
	font-size: 12px;
	text-decoration: none;
	color: #a5a7a9;
}
.object_info{
	display:none;
	background-color:#efefef;
	opacity:0.9;
	z-index:1200;
	position: absolute;
	padding:5px;
}
.object_info.detail{
	width:300px;
}
.clients .cell, #cadre_client .cell{
	background-position: top center !important;
	padding-bottom:40px;
}
.clients .cell a,#cadre_client .cell a{
	display: block;
	text-align: center;
	position: absolute;
	padding-top: 90px;
	
}
#zeiger{
	margin:0 auto;
	position:relative;
	text-align:center;
	top:150px;
	width:200px;
	display: none;
}
.label{
	font-weight:bold;
	padding-right:3px;
}
.form_label{
	width:100px;
	text-align: right;
	float:left;
	padding-right:5px;	
}
.form_input{
	float:left;
}
.form_row{
	width:100%;
	float:left;
}
#loginform{
	position:relative;
	width:330px;
	height:100px;
	padding: 30px 5px;
	margin:0 auto;
	top: 100px;
	border: 1px solid;
}
#messages{
	min-height:20px;
	width:100%;
}
#siteMenu{
	position:fixed;
	top:0;
	right:0;
	background:#ffffff;
	opacity:0.95;
}
#siteMenu .menuItem{
	float:left;
	padding:2px 5px;
	border:1px dotted;
	margin: 2px 2px;
}
#editor{
	position:absolute;
	width:550px;
	padding:10px;
	margin:0 auto;
	border: 2px solid;
	background-color:#efefef;
	opacity:0.95;
	z-index:10000;
}
#editor.hidden{
	display:none;
}
#editor.visible{
	display:block;
}
video {
	background: #ffffff;
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    #site{
        width:960px;
    }
    #corps{
        width: 960px;
    }
    .container.overview,
    .container.projects,
    .container.clients{
        width: 860px;
    }
    ul li   /*disposition du premier niveau du menu déroulant*/
{
        display: block;
        float:left;
        width: 125px;
    }
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    #site{
        width:960px;
    }
    #corps{
        width: 960px;
    }
    .container.overview,
    .container.projects,
    .container.clients{
        width: 860px;
    }

}