@charset "utf-8";

/* -------------------------------------
    Filename: style-dianflex.css
    Title : Primary CSS file for paondore.com. index page
    Author : Liana G.
    Version: 02.02.2009
    License: Copyright 2009, Paon Dorè, All Rights Reserved. 
    Feel free to read and learn from this, but please don't steal.
    Description : This base style sheet provides basic styling for
    XHTML elements for the personal web site of Dianflex Corporation. 

    --------------------------------------- */
	
	/*General Rules*/
    
	a {outline: none; text-decoration: none;}
	
	ul, ol { margin: 0; padding: 0;}
	
	li {list-style-type:none;}
	
	dl { margin: 0; padding: 0;}
	
	form { padding: 0px; margin: 0px;}
	
	
   
/*end*/
	
body {
	font: 62.5% "Trebuchet MS", Helvetica, Arial, sans-serif;
	background-color: #27190c;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #915126;
	}

#container { 
	width: 100%;  /* this will create a container 80% of the browser width */
	background-color: #27190c;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	position: relative;
	} 

/**************** Header *****************/
#header-wrap {
   width: 100%;
   height: 130px;
   background: #382c00 url(../images/bg-head.gif) repeat-x 0 0;
   }

#header-wrap #header { 
	background-color: transparent; 
	padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	margin: 0 auto;
	width: 800px;
	height: 130px;
	}
	 
#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	text-indent: -9999px;
    }
	
#header h1 span {
    background: url(../images/logo-pav-text.png) no-repeat 0 0;
	height: 119px;
	width: 330px;
	display: block;
	margin-top: -30px;
	}	

/************************ Navigation **************/
#site-nav {
    position: absolute;
    top: 0px;
	height: 80px;
	right: 0;
	margin-right: 165px;
    width: 444px;
	padding-top: 56px;
	}
	
#site-nav ul li {
    float: left;
	width: auto;/*floated elements need to have a width declared*/
    display: inline;
    height: 100%;
	}

#site-nav ul li a {
    display: inline-block;
	padding: 12px 30px 10px 30px;
	height: 100%;
	color: #f9dc74;
    font-size: 1.3em;
	text-decoration:none;
	background: transparent url(../images/nav2.png) no-repeat;
	text-indent: -9999px;
	width: 70px;
	}
	
#site-nav ul li a:hover {
    color: #886600;
	}
	
#site-nav ul li a.home {
    background-position:   60px 3px;
	width: 50px;
	}	
	
#site-nav ul li a.presentazione {
    background-position:   -48px 3px;
	}
	
#site-nav ul li a.galleria {
    background-position:   -180px 3px;
	width: 10px;
	}
		
#site-nav ul li a.contattateci {
    background-position:   -250px 3px;
	width: 30px;
	}
		
/*--- modified on 21/03/10 (deleted OFFERTE section) ---*/	
/*#site-nav ul li a.offerte {
    background-position:   -340px 3px;

	}*/
	
#site-nav ul li a.home:hover {
    background-position:   60px -30px;
    }		

#site-nav ul li a.presentazione:hover {
    background-position:   -48px -30px;
    }
	
#site-nav ul li a.galleria:hover {
    background-position:   -180px -30px;
    }
	
	
#site-nav ul li a.contattateci:hover {
    background-position:   -250px -30px;
	}
	
/*--- modified on 21/03/10 (deleted OFFERTE section) ---*/		
/*#site-nav ul li a.offerte:hover {
    background-position:   -340px -30px;
	}	*/
	
#site-nav ul li#activelink a.home {
    background-position:   60px -60px;
	}
 
#site-nav ul li#activelink a.presentazione {
    background-position:   -46px -60px;
	}  
	
#site-nav ul li#activelink a.galleria {
    background-position: -178px -60px;
	width: 10px;
	}	
	

#site-nav ul li#activelink a.contattateci {
    background-position:   -250px -60px;
	}
	
/*--- modified on 21/03/10 (deleted OFFERTE section) ---*/		
/*#site-nav ul li#activelink a.offerte {
    background-position:   -340px -60px;
	}  	*/  	 			

/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created with the right margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this right margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/

/************************ Content ************/
#mainContent-wrap {
   width: 100%;
   background: #FEEB97 url(../images/bg-container.gif) repeat 0 0;
   border-top: 3px solid #F0C942;
   border-bottom: 3px solid #F0C942;
   }
   

#mainContent.home, #mainContent {
    width: 800px;
	margin: 0 auto; /* the left margin should mirror the margin on the header and footer for proper alignment. */
	margin-bottom: 50px;
	background: transparent url(../images/foliage.png) no-repeat bottom right;
	padding-bottom: 35px;
	} 
	
/*--- RISTORANTE-CAMERE ---*/	
#mainContent.home  h2 {
   text-indent: -9999px;
    }

#mainContent.home h2 a span.ristorante  {
    display: block;
    width: 759px;
	height:633px;
	background:transparent url(../images/frame-ristorante2.png) no-repeat 0 0;
	margin:50px auto auto auto;
	}
	
#mainContent.home h2 a:hover span.ristorante  {
    background-image: url(../images/frame-ristorante2-hover.png);
	cursor: pointer;
    }
	
	/*--- modified on 21/03/10 (deleted CAMERE section) ---*/	
/*#mainContent.home h2 a span.camere {
    display: block;
    width: 422px;
	height:380px;
	background:transparent url(../images/frame-camere.png) no-repeat 0 0;
	float: right; 
	right:0;
	margin-right: -50px;
	margin-top: -410px;
	}
	
#mainContent.home h2 a:hover span.camere  {
    background-image: url(../images/frame-camere-hover.png);
	cursor: pointer;
    }*/

#mainContent {
    margin-bottom: -50px;
	background: transparent url(../images/foliage-right.png) no-repeat 220px 0;
	}

#mainContent h1 {
    font-size: 3em;
	font-family: "Baskerville Old Face",Georgia,"Times New Roman",Times,serif;
    font-weight: bold;
	padding-top: 30px;
	}

/* Tips for sidebar1:
1. since we are working in percentages, it's best not to use padding on the sidebar. It will be added to the width for standards compliant browsers creating an unknown actual width. 
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColLiqRtHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/

/********************** Second **************/
#bottombar-wrap {
    width: 100%;
	height: auto;
	background: transparent url(../images/bg2.jpg) repeat-x 0 0;
	border-top: 4px solid  #8A6800;
	margin-bottom: 50px;
	position: relative;
    }

#bottombar {
	width: 800px; 
	margin: 0 auto;
	background: transparent url(../images/bg-bottombar2.gif) no-repeat left bottom;
	padding-bottom: 166px;
	height: auto;
	position:relative;
	margin-bottom: 150px;
    }

/*--- ACCOGLIENZA-PASSIONE_CUCINA ---*/	
#bottombar #bottombar1 {
    width: 210px;
	height: 150px;
	background:transparent url(../images/text-accoglienza.png) no-repeat 0 0;
	margin-top: 60px;
	margin-left: 30px;
	}
	
#bottombar #bottombar2 {
    width: 210px;
	height: 150px;
	background:transparent url(../images/text-passione.png) no-repeat 0 0;
	margin-top: -150px;
	margin-left: 320px;
	float: left;
	}
	
#bottombar #bottombar3 {
    width: 210px;
	height: 200px;
	background:transparent url(../images/text-cucina.png) no-repeat 0 0;
	margin-top: -150px;
	margin-right: -20px;
	float: right;
	}	
		
#bottombar #bottombar1 p, #bottombar #bottombar2 p, #bottombar #bottombar3 p {
	margin: 70px 0 0 10px;
	color:#cdbe7a;
	font-size: 1.1em;
	max-width: 400px;
	}

#bottombar #bottombar1 p {
    padding-top: 70px;
	margin-bottom: 28px;
	} 
	
#bottombar #bottombar3 p {
    padding-right: 30px;
	}
	  

#bottombar h4 {
   /* font-size: 1.4em;
	font-family:"Baskerville Old Face","Times New Roman",Times,serif;
	text-align:right;*/
	margin-right: 15px;
	padding-right: 80px;
	text-indent: -9999px;
	}
	
#bottombar1 h4 a span {
   background: transparent url(../images/text-bott1.png) no-repeat 100px 0;
    }
	
#bottombar1 h4 a:hover span {
    background-image: url(../images/text-bott1-hover.png);
	}	

#bottombar2 h4 a span {
   background: transparent url(../images/text-bott2.png) no-repeat 42px 10px;
   }
   
#bottombar2 h4 a:hover span {
    background-image: url(../images/text-bott2-hover.png);
	}					

#bottombar3 h4 a span {
   background: transparent url(../images/text-bott3.png) no-repeat 73px -2px;
	}
	
#bottombar3 h4 a:hover span {
    background-image: url(../images/text-bott3-hover.png);
	}
		
/*--- HEADERS ---*/
#bottombar span {
    display: block;
	width: 414px;
	height: 130px;
	background: transparent url(../images/header-chisiamo.png) no-repeat 0 0;
	margin-bottom: 50px;
	}
	
#bottombar span.ristorante {
    background: transparent url(../images/header-ristorante.png) no-repeat 0 0;
    }
	
#bottombar span.storia {
    background: transparent url(../images/header-storia.png) no-repeat 0 0;
    }	
	
#bottombar span.riconoscimenti {
    background: transparent url(../images/header-riconoscimenti.png) no-repeat 0 0;
    }	
	
#bottombar span.ricette {
    background: transparent url(../images/header-ricette.png) no-repeat 0 0;
    }			

#bottombar span.camere {
    background: transparent url(../images/header-camere.png) no-repeat 0 0;
    }
	
#bottombar span.galleria {
    background: transparent url(../images/header-galleria.png) no-repeat 0 0;
    }	
#bottombar span.contatti {
    background-image: none;
	margin-top: -130px;
    }	

/*--- IMAGES ---*/		
#bottombar #img {
    position: absolute;
	right: 0;
    top: -80px;
    width: 391px;
	height: 522px;
	background: transparent url(../images/img1.png) no-repeat 0 0;
	}	
	
#bottombar #img.img2 {
    background: transparent url(../images/img2.png) no-repeat 0 0;
	}
		
#bottombar #img.img3 {
    background: transparent url(../images/img3.png) no-repeat 0 0;
	}
	
#bottombar #img.img4 {
    background: transparent url(../images/img4.png) no-repeat 0 0;
	}
	
#bottombar #img.img5 {
    background: transparent url(../images/img5.png) no-repeat 0 0;
	}	
	
#bottombar #img.img6 {
    background: transparent url(../images/img6.png) no-repeat 0 0;
	}

#bottombar #img.img7 {
    background: transparent url(../images/img7.png) no-repeat 0 0;
	}

/*--- CONTATTI page ---*/	
#bottombar #img.imgcontatti {
    width: 345px;
    height: 389px;
    background: transparent url(../images/bg-contact.png) no-repeat 0 0;
    top: 2px;
	right: 45px;
	border-bottom: 2px solid #000;
	}
	
#bottombar #img.imgcontatti  h3{
    position: absolute;
    margin-top: -40px;
	margin-left: -1px;
	padding: 6px 0 6px 30px;
	color: #e1cf81;
	background-color: #593c0f;
	width: 315px;
	font-size: 1.4em;
    font-variant: small-caps;
    font-weight: normal;
    border: 1px solid #e1cf81 ;
    }	
	
#bottombar #img.imgcontatti  h5 {
    margin-top: 60px;
	margin-bottom: 2px;
	font-size: 1.2em;
	}	
	
#bottombar #img.imgcontatti a span.map {
    background-image: url(../images/map.gif);
	width: 318px;
	height: 169px;
	
   
	}	

#bottombar #img.imgcontatti a:hover span.map {
background-image: url(../images/map-hover.gif) ;
    
	}	

#bottombar #img.imgcontatti address  {
  margin-top: 180px;
  margin-bottom: 30px;
  font-size: 1.2em;
  font-family:Georgia, "Times New Roman", Times, serif;
  } 

#bottombar #img.imgcontatti address span, #bottombar #img.imgcontatti address a {
   font-style: normal;
   margin-left: 30px;
   margin-bottom: 10px;
   color: #98803F;
   background-image: none;
   width: auto;
   height: auto;
  
   }
   
#bottombar #img.imgcontatti address a {
   line-height: 5;
   }  
   
#bottombar #img.imgcontatti address a:hover {
   color: #d8a858;
   }      
   
#bottombar  p {
    margin-bottom: 0;
	font-size: 1.1em;
	max-width: 400px;
	color:#cdbe7a;
	}

		
#bottombar h2 {
    font-size: 1.2em;
	color: #946d36;
	border-top: 1px solid #080602;
	width: 400px;
	padding-top: 15px;
	margin-top: 30px;
	}	
	
#bottombar h3 {
	margin-top: 30px;
	font-size: 1.5em;
    }


/*--- HOME page STORIA-RICONOSCIMENTI-RICETTE ---*/	
#bottombar ol {
    padding-top: 30px;
	padding-bottom: 30px;
	background: transparent url(../images/divider.png) no-repeat 150px 0px;
	}	

#bottombar ol li {
    font-size: 1.1em;
	max-width: 350px;
	background: transparent url(../images/dot.png) no-repeat 0 3px;
	padding-left: 15px;
	margin-bottom: 5px;
	}
		

/*--- SUBMENU ---*/   	
#submenu  { 
    border-bottom: 1px solid #4d351e; 
    padding: 3px 0px; 
	width: 700px;
	height: 30px;
	}
	 	
#submenu  li { 
    float: left;
	width:auto;/*floated elements need to have a width declared*/
	margin-right: 2px; 
	padding: 7px 0px; 
	font: 1.2em Cambria, Times, "Times New Roman", Georgia, serif;
	}
	
#submenu li a { 
    font-weight: bold; 
	text-decoration: none; 
	color: #d4a34f; 
	padding: 7px; 
	}

#submenu li a:hover { 
    color: #fff; 
	}

#submenu li#activelink a { 
    color: #fff3d1; 
	}

/*--- GALLERY ---*/
#gallery {
    margin: 80px 0 20px 0;
	position:absolute;
	right: 60px;
	top: 320px;
	}
	
#gallery h2 {
    background: transparent url(../images/h2-photo-gallery.png) no-repeat 0 0;
	display:block;
	width: 270px;
	height: 50px;
	text-indent: -9999px;
	margin-bottom: -10px;
	border-top: none;
    }

#gallery ul {
    width: 291px;
    height: 134px;
    background: transparent url(../images/photo-bg.jpg) no-repeat 0 0;
    padding: 17px 17px 0 17px;
    }

#gallery li {
    float:left;
	width: auto;/*floated elements need to have a width declared*/
	margin:0 13px 0 0;
    }

#gallery li a img  {
    border: 4px solid #5e5127;
	display:block;
	margin:0 0 13px 0;
    }

#gallery li a:hover img  {
    border-color: #837236;
    }
	
#gallery li:last-child {
    margin: 0;
    }	
	
#gallery p a {
    width: 92px;
    height: 22px;
    background: transparent url(../images/btn-photos.jpg) no-repeat 0 0;
    font-family: "Lucida Sans Unicode","Trebuchet MS",serif;
    font-size: 9px;
    color: #a1914c;
    display: block;
    float: left;
    padding: 3px 0 0 5px;
	margin-top: -70px;
    }	

#gallery p a:hover {
    color: #BBAC71;	
    }
	
/* slides styling */
#photo {
    width: 484px;
	margin-top: 60px;
	position: relative;
	left: 0;
	top: 0;
    }
#photo ul {
    width: 484px;
    height: 292px;
	background-color: #1a1007;
    /*background: transparent url(../images/photo-bg2.jpg) no-repeat 0 0;*/
    padding: 17px 6px 0 17px;
    }

#photo ul li {
    float:left;
	width: auto;/*floated elements need to have a width declared*/
	margin:0 13px 0 0;
    }

#photo li a img  {
    border: 4px solid #5e5127;
	display:block;
	margin:0 0 13px 0;
	width: 100px;
	height: 75px;
    }

#photo ul li a:hover {
    white-space:normal; 
	position:relative;
	}

#photo ul li a:hover img {
    /*position:absolute; 
	left:-50px; top:-32px; 
	width:200px; 
	height:150px; */
	border-color: #DEE8BB;
	background-image: none;
    }

#photo p, #photo img {
    margin-bottom: 30px;
    }

/*--- TITLES ---*/
#titles {
    width: 300px;
	height:405px;
	display: block;
	position:absolute;
	right: 0px;
	top: 280px;
	background: transparent url(../images/titles.png) no-repeat 0 0;
    }
	
/*--- TEXT ---*/
 #text {
	width: 100%;
	height: 40px;
	margin-top: 50px;
	}
	
#text span.text {
    text-indent: -9999px;
    width: 280px;
	height: 40px;
	margin: 0 auto;
	display: block;
	background: transparent url(../images/paondore2.png) no-repeat center 0;
}	
		
	
/************************ Footer ****************/
#footer { 
	/* this padding matches the left alignment of the elements in the divs that appear above it. */
	background-color: #1a1007;
	border-top: 1px solid #3E2F00;
	border-bottom: 1px solid #3E2F00;
	width: 100%;
    height: 4.4em;
	} 

#footer ul {
    width: 820px;
    margin: 15px auto;
	padding-left: 150px;
	}

#footer ul li {
	float: left;
	width:auto;
	background: transparent url(../images/circle.png) no-repeat 0 3px;
	padding-left: 5px;
	}
	
#footer ul li a {
    display: block;
	font-size: 1.1em;
	padding: 0 20px 0 8px;
	color: #915126;
	
	}	
	
#footer ul li a:hover {
    color: #CF7D47;
	}
	
 #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	text-align:center;
}

#credits   {
    color: #c1b393;
	width: 100%;
    text-align: center;
    padding-top: 7px;
    padding-bottom: 4px;
}

/***********************- FORM Information - ***************/
#bottombar form {
	height: 460px;
	width: 390px;
	margin-top: 20px;
	font-family: Arial, Helvetica, sans-serif;
	/*background-color: #5A4525;
	border: 1px solid #605428;*/
	padding-left: 10px;
}

#bottombar textarea {
    width: 350px;
	}

#bottombar textarea, #bottombar input {
	background-color: #40351A;
	border: 1px solid #1F1C0A;
	margin: 5px 0;
	padding-top: 10px;
	
}

#bottombar label {
	font-size: 1.1em;
	color: #cbbd8b;
}

#bottombar #contactsubmit {
	float: left;
	width: auto;
	height: 25px;
	padding: 0px 0 2px 0;
	color: #726732;
}

#bottombar form h4 {
   color: #a4913e;
   }
   
#bottombar form h4  em, #bottombar form em, #bottombar #messages p em {
   color: #ff0000;
   }
 

/*--------color form:hover, focus --------------*/
#bottombar textarea:hover, #bottombar input[type="text"]:hover, #bottombar select:hover, #bottombar input[type="submit"]:hover {
	background-color: #DCCEAB ;
	border-color: #CEB786;
}

#bottombar textarea:focus, #bottombar input[type="text"]:focus, #bottombar select:focus, #bottombar input[type="submit"]:focus {
	background-color: #EDE6D3;
	border-color: #CEB786;
	outline: 2px solid #BFA664;
}

/*---contactform messages---*/
#bottombar #messages {
    background-color: #40351A;
	padding: 5px 10px 5px 10px;
    position: absolute;
	right: 113px;
    top: 418px;
	}
	
#bottombar #messages h3 {
    color: #cbbd8b;
	margin-top: 0;
    }
		

#bottombar #messages p.cf-error, #bottombar #messages p.cf-warning  { 
    color:#ff0000; 
    padding: 0 0 5px 0; 
    margin: 0 0 5px 0; 
    font-size: 11px;
    }

#bottombar #messages p.cf-success { 
    color:#fff; 
    padding: 7px 0; 
    margin: 7px 0; 
    }

/****************************************************** - End FORM - ***********************************************/


/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	width: auto;/*floated elements need to have a width declared*/
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	width: auto;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }

/*#bottombar-wrap #bottombar img {
	border: 1px solid #9D8440;
	margin: 30px 0 0 10px;
    }
*/