/* @import url(http://fonts.googleapis.com/css?family=Cardo); */

/*
Style for "VilaMonteLuz.com" and all subsites, including the galleries.

--------------------- BASIC ---------------------

1. GLOBAL RESET
2. HTML-ELEMENTS
3. COMMON CLASSES


--------------------- HEADER HOME on startpage with SLIDESHOW ---------------------

4. HEADER					Startpage-header, height 600px, holding the 'navigation' and slideshow
5. HEADERTXT				Slideshow-Overlaytexts. Do NOT USE RELATIVE FONT-SIZES here!
6. CONTROLS					Button-Position
7. BUTTONS					Slideshow buttons


--------------------- HEADER SUBPAGE on subpages ---------------------

8. HEADER-SUBPAGE			Banner for subpages, holding the 'navigation'


--------------------- ALL! HEADERS navigation ---------------------

9. NAVIGATION				Top-banner, holding the 'menu'
10. MENU						Link-menu replaced with DMTL-menu, but active on NOSCRIPT


--------------------- CONTENT ---------------------

11. CONTENT


--------------------- FOOTER ---------------------

12. FOOTER
13. FOOTER-NAVIGATION	site-navigation


--------------------- SUBPAGES ---------------------

14. ------- SUBPAGES GENERAL
 #toc							Table of Contents
 #tops						'Jump to Top' plus chapter-navigation
 .tops
 .image						Smaller line-height for image-subtitles
 .imageborder

 
15. ------- SUBPAGE: DETAILS
 .chapterimage-divider	Space between the headimage and beginning of the chapter
 .'CHAPTERNAME'			holding only the 'chapterimage.jpg'

 
16. ------- SUBPAGE: ABOUT
 #impressum-text
 #impressum-text h2
 .midas-logo

 
17. --------------------- SPECIALS ---------------------
 #noscript
 .noscript
 .callout
 .callout-small
 .important
 #soundplayer
 #videoplayer
 #link-image



18. --------------------- GOOGLE SEARCH ---------------------

*/


/* ============================= BASIC ============================= */

/* 1. GLOBAL RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0; border:0; outline:0;}
* { margin: 0; padding: 0; border: 0; }

/* 2. HTML ELEMENTS */
body { color: #505050; background-color: #fefefe; font: 11pt Trebuchet, Helvetica, Arial ,sans-serif; font-smooth: always; letter-spacing: 0.5pt;}
p, h1, h2, h3 { padding-bottom: 10px; }

p {
	font-size: 11pt; letter-spacing: 0.1em; 
	text-shadow: 0px -1px 1px rgba(0,0,0,0.1), 0px 1px 0px rgba(255,255,255,0.2);
}


/* 3. COMMON CLASSES */
.break { clear:both; }
.float { float: left; }
.push {
	padding-right: 65px; padding-bottom: 20px;
}


/* ============================= HEADER HOME ============================= */

#header-home { 
	width: 100%; height: 155px; margin: auto;
	text-align: center;
	background-image: url(../images/bgd_noise.jpg);  background-position: top;  background-repeat: repeat; 
	border-bottom: solid 2px #ec8f0e; 
	z-index: 100;
}
.header-home-logo { margin-top: 40px; cursor: pointer; }

#header { 
	width: 100%; height: 110px; margin: auto;
	text-align: center;
	background-image: url(../images/bgd_noise.jpg);  background-position: top;  background-repeat: repeat; 
	border-bottom: solid 2px #ec8f0e; 
	z-index: 100;
}
.header-logo { margin-top: 20px; cursor: pointer; }




/* ============================= CONTENT ============================= */

#content-home {
	width: 100%; height: 500px; 
	background-image: url(../images/bgd.jpg); background-position: center center;  background-repeat: no-repeat; }
	
#content { 
	width: 100%; height: 100%; margin: auto; 
	background-image: url(../images/bg.jpg); background-repeat: repeat;
	text-align: center; line-height: 1.7;
}

 #subpage-menu-top {
	width: 100%; height: 78px;
	background-image: url(../images/subpage-menu-top.png); background-position: top center; background-repeat: no-repeat;
}

#buttonbar-home, #buttonbar { width: 1000px; margin: auto; text-align: center; font-family: Georgia,'Times New Roman',serif; 
	margin-top: 10px; }
#buttonbar { margin-top: -2px; }

#button-home-1, #button-home-2, #button-home-3, #button-home-4, #button-1, #button-2, #button-3, #button-4 { 
	width: 25%; height: 45px; float: left; margin-top: 10px; color: white; cursor: pointer; 
	padding-top: 12px; }
#button-1, #button-2, #button-3, #button-4 { padding-top: 11px; }


.button-effect { 
	background-image: url(../images/button_main.png);  background-position: top center;  background-repeat: no-repeat; }
.button-effect:active, .button-effect:hover { 
	background-image: url(../images/button_main-active.png);  background-position: top center;  background-repeat: no-repeat; }


.button-subtext { font: 9pt Trebuchet, Helvetica, Arial ,sans-serif; color: #2a2a2a; margin-top: 10px; }
.colorized-big { color: #ffb52b; font-size: 120%; } /* used for special characters inside the buttons */
.colorized { color: #ffb52b; } /* used for markings all over the website */
.spec-1 {
	font-family: Georgia,'Times New Roman',serif; font-weight: normal; font-style: italic; x-color: #ffb52b;
	font-size: 1.1em;
	text-shadow: 0px -1px 2px rgba(0,0,0,0.0), 0px 1px 1px rgba(255,255,255,0.9);
}


#detail { width: 1000px; height: 100%; margin: auto; padding-top: 40px; padding-bottom: 120px; text-align: left; }
#detail p { padding-left: 10px; }

h1, h2 { 
	color: #85868b; 
	font-weight: normal; 
	letter-spacing: 0.1em;
}

h1 {
	font-size: 2.2em;
}
h2 {
	margin: 30px 0 30px 0;
	padding-top: 10px;
	font-size: 20pt;
	padding-bottom: 8px; border-bottom: 1px solid #ffb52b; 
}
h3 {
	padding: 30px 0 20px 0;
	font-family: Georgia,'Times New Roman',serif; font-weight: normal; font-style: italic; x-color: #ffb52b;
	font-size: 18pt; x-padding-top: 25px;
	text-shadow: 0px -1px 2px rgba(0,0,0,0.0), 0px 1px 1px rgba(255,255,255,0.9);
	x-border-top: 1px solid #ffb52b;
	x-border-top: 1px solid #ffb52b;
}




#top  { /* inside details: ~1000px */
	width: 100%; padding: 20px 0 10px 0;
	font-size: 9pt; text-align: center; letter-spacing: 1px; color: #c38b54;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.7);
	margin: 30px 0 50px 0;
}

.top-effect { border: 1px solid rgba(200,200,200,0); /* invisible box */ }
.top-effect:active, .top-effect:hover { border: 1px solid white; background-color: rgba(200,150,100,0.15); }


#bottom  { /* above footer: full width */
	width: 100%; padding: 40px 0 90px 0;
	font-size: 9pt; text-align: center; letter-spacing: 1px; color: #c38b54;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.1), 0px 1px 1px rgba(255,255,255,0.7);
	margin: 30px 0 30px 0;
}

.bottom-effect { border-top: 1px solid rgba(0,0,0,0); }
.bottom-effect:active, .bottom-effect:hover { border-top: 1px solid white; background-color: rgba(200,150,100,0.15); }

#top a, #top a:link, #top a:visited, #bottom a, #bottom a:link, #bottom a:visited
	{ color: #9a6836; font-size: 9pt; text-decoration: none; }
#top a:hover, #top a:active, #bottom a:hover, #bottom a:active 
	{ color: #5d3f20; padding-bottom: 5px;/* push border down */ border-bottom: solid 1px #c38b54; /* #ffb52b #c38b54 */ }

#pagetop {
	position: relative; top: -10px; 
}

/* ============================= FOOTER ============================= */

#footer-home { width:100%; height:220px; margin:auto; text-align:center; z-index: 100; 
	position:absolute; bottom:0; background-image: url(../images/bgd_noise.jpg);  background-position: top;  background-repeat: repeat;
	border-top: solid 2px #ec8f0e; }
#footer { width:100%; height:85px; margin:auto; text-align:center; z-index: 100; 
	position: fixed; bottom:0; background-image: url(../images/bgd_noise.jpg);  background-position: top;  background-repeat: repeat;
	border-top: solid 2px #ec8f0e; }
	
#footer-menu { width: 100%; height: 55px; text-align: left; color: black; 

	x-background-color: #ec8f0e; x-background-color: rgba(200,150,100,0.5); position: absolute; bottom: 30px;
	x-background-image: url(../images/footer_bgd.jpg);
	background-repeat: repeat-x;
	background-position: center center;
	x-background-color: rgba(230,140,15,1);
	background-color: #f4a53a;
	/* background-color: rgba(200,150,100,0.5); */
	/* #c89663 */
 }
.footer-menu-logo { margin-top: 16px; padding-left: 70px; float: left; }
.footer-menu-text { margin-top: 23px; padding-left: 60px; float: left; font-size: 9pt; }
#footer-home a, #footer-home a:link, #footer-home a:visited, #footer a, #footer a:link, #footer a:visited { color: #5e3906; text-decoration: none; }
#footer-home a:hover, #footer-home a:active, #footer a:hover, #footer a:active { color: white; text-decoration: none; }



/* ============================= SPECIALS ============================= */
/* 17. SPECIALS */
#noscript { position: absolute; top:180px; left:20%; }
.noscript { font-family: 'Sergoe UI', Verdana, Arial, sans-serif; font-size: 1.5em; color:red; background-color:black; border-bottom-width:5px; border-style:solid; border-color:black; }

.callout { /* large inline text */ font-size:1.4em; font-weight: normal; padding-right: 10px; margin-left:-8px; }
.callout-small { /* large inline text */ font-size:1.2em; font-weight: normal; padding-right: 10px; margin-left:-8px; }
.important { text-decoration: underline; }



/* ============================= GOOGLE-SEARCH ============================= */
/* 18. GOOGLE SEARCH CODE - MODIFIED */
#google { position:relative; }

#weather-box {
	width: 1000px; height: 100%; margin: auto; 
	x-position: fixed; x-top: 150px; x-right: 120px;
}

#weather {
	x-width: 900px;
	width: 100%;
	margin: 25px;
	margin-bottom: -70px;
	x-padding: 10px;
	overflow: hidden;
	x-border: 1px solid #ec8f0e;
	x-border-radius: 10px;

}

#weather-left {
	width: 35%; height: 100%; float: left;
}
#weather-left-l {
	width: 25%; height: 100%; float: left; x-padding-left: 10px;
}
#weather-left-r {
	width: 75%; height: 100%; x-float: left;
}


#weather-right {
	width: 65%; height: 100%; float: left;
}
#weather-right-l {
	width: 30%; height: 100%; float: left; x-padding-left: 10px;
}
#weather-right-r {
	width: 70%; height: 100%; x-float: left;
}


/*
#weather h2 {
	x-color: #ffb52b;
	color: #c38b54;
	font-family: Georgia, "Times New Roman", serif;
	x-text-transform: uppercase;
	x-letter-spacing: 1pt;
	font-size: 18pt;
	font-weight: normal;
	x-text-shadow: 0px -1px 1px rgb(10,10,10), 0px 1px 1px rgb(110,110,110);
	x-text-shadow: 0px 1px 2px rgba(100,100,100,0.3);
	padding-bottom: 15px;
}
*/

#weather h2 {
	font-family: Georgia,'Times New Roman',serif; font-weight: normal; font-style: italic; x-color: #ffb52b;
	font-size: 16pt;
	text-shadow: 0px -1px 2px rgba(0,0,0,0.0), 0px 1px 1px rgba(255,255,255,0.9);
}

#weather .description {
	font-size: 11pt;
	font-weight: normal;
	color: #2a2a2a;
	x-text-shadow: 0px -1px 1px rgba(10,10,10,0.5), 0px 1px 1px rgba(220,220,220,0.9);
	text-shadow: 0px 0px 1px rgba(255,255,255,0.9), 0px 0px 2px rgba(255,255,255,0.7);
}

#weather .value {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 20pt;
	color: #ffb52b;
	font-weight: bold;
	x-text-shadow: 
		0px 0px 1px rgba(100,80,10,1),
		0px 0px 1px rgba(255,181,43,1),
		0px 0px 2px rgba(255,181,43,0.9),
		0px 0px 3px rgba(255,181,43,0.7),
		0px 0px 4px rgba(255,181,43,0.5);
		/*
				0px 0px 0px rgba(255,181,43,1),
		0px 0px 1px rgba(255,181,43,1),
		0px 0px 2px rgba(0,0,0,0.9),
		0px 0px 3px rgba(0,0,0,0.7),
		0px 0px 4px rgba(0,0,0,0.5);
		*/
}
#weather .height {
	font-size: 20pt;
	visibility: hidden;
}


.weatherimage {
	x-text-align: center;
	padding-left: 20px;
}


.inline {
	padding-top: -130px !important;
	padding-top: -130px !important;
	overflow: hidden !important;
}

.rates {
	width: 100%;
	height: 770px;
}

.pictureshadow {
	border:9px solid #FFFFFF;
	box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 3px rgba(0, 0, 0, 0.4); 
}

.pictureframe {
	width: 460px; height: 450px; border: 0;
}

#layout_3-1_l { width: 75%; float: left; x-background-color: red; }
#layout_3-1_r { width: 25%; float: left; x-background-color: blue; }

#layout_1-3_l { width: 25%; float: left; x-background-color: red; }
#layout_1-3_r { width: 75%; float: left; x-background-color: blue; }

#layout_1-1_l { width: 50%; float: left; x-background-color: red; }
#layout_1-1_r { width: 50%; float: left; x-background-color: blue; }




.info_1 {
	font-weight: bolder;
}
.info_1-sub {
	font-size: 0.8em; x-line-height: 0.8em;
}
hr {
	width: 325px; margin: auto; border-top: 1px solid #fbf7e1; padding-bottom: 8px;
}




.color, .color a, .color a:active, .color a:link, .color a:visited {
	color: #5d3f20; text-decoration: none; border-bottom: solid 1px #ffb52b;
}

.color a:hover, .color a:focus {
	color: #5d3f20; border-bottom: solid 1px #c38b54;
}




#preload { display: none; visibility: hidden; }

.hidden {
	visibility: hidden; color: transparent; position: absolute; top:-10000%;
}



.totext {
	margin-left: 10px;
}

.property h2 { color: red; }


#error404 {
	margin-left: 70px;
}

#pushleft70 {
	margin-left: 70px;
}