/* ************************************************** *
 * CSS File for reiki-viernheim.de
 * Client: Martina Huber
 * Date: March 2013                
 * Author: Sebastian Kumpa (hello@sebastian-kumpa.de)
 * ************************************************** */



/* Globals
*****************************************************/
body {
	font-family: 'Open Sans', sans-serif; 
	font-size: 10pt;
	font-weight: 400;
	color: #333;

	margin: 0;
    background: url('../img/bg-static.jpg');
    background-size: 100% 100%;
    background-attachment: fixed;
}

/*Vertical Seperators 10,20,30 px*/
.vsep5{margin-top:5px;}
.vsep10{margin-top:10px;}
.vsep20{margin-top:20px;}
.vsep30{margin-top:30px;}
.vsep40{margin-top:40px;}
.vsep50{margin-top:50px;}
.vsep60{margin-top:60px;}
.vsep70{margin-top:70px;}
.vsep80{margin-top:80px;}
.vsep90{margin-top:90px;}




/* Wrapper 960grid
*****************************************************/
.container_12 {
	position: relative; /*bg video*/
	z-index: 98; /*bg video*/
} /*no padding or margin bottom! (fixed wrapper header crash)*/



/* Layout: Header (fixed);
*****************************************************/
#header-wrapper {
	/*border-bottom: 1px solid #ccc;*/ /* hilfslinie */
	margin-top:15px;
	position: fixed;
	top: 0;
	width: 100%;
	height: 105px; /*this height used at anchors*/
	z-index: 99;
}

#header-logonav {
	padding: 0px 0 0 0; /*innenbereich oben-rechts-unten-links*/
	margin-top: 0px;
	text-align: center;
	font-size: 14pt;
	font-weight: 300;
	z-index:100;
	letter-spacing: 1pt;
	/*border:1px solid yellow;*/
}
#header-logonav a:link,a:visited{color: #000;text-decoration: none;}
#header-logonav a:hover{color: #333;text-decoration: none;}
#header-logonav a:focus,img:focus {outline:0;}


/* Layout: Anchors;
*****************************************************/
#start-anchor {padding-top:150px;margin-top:5px;} /*== height of header-wrapper / or overlay 20px at 140px*/
#reiki-anchor {padding-top:130px;margin-top:5px;} 
#offer-anchor {padding-top:130px;margin-top:5px;}
#faq-anchor {padding-top:130px;margin-top:5px;}
#contact-anchor {padding-top:130px;margin-top:5px;}



/* Layout: Footer old;
*****************************************************/
#footer { /*old*/
	border: 1px solid #efefef;
	margin: 30px 0 400px 0;/*footer margins 400px at bottom*/
	padding: 10px 20px;
	background-color: rgba(255,255,255,0.8);
	font-size: 11pt;
	font-weight: bold;
	/*text-align: center;*/

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}



/* Layout: Footer;
*****************************************************/
#footer-zigzag {
	position: relative;
	margin-top: 100px;
	background-image: url('../img/zigzag.png');
	background-repeat: repeat-x;
	/*border-top: 1px solid #ccc;*/
	/*background: rgba(255,255,255,0.5);*/
	width: 100%;
	height: 8px;
	z-index: 100;
}
#footer-wrapper {
	position: relative;
	/*margin-top: 100px;*/
	/*border-top: 1px solid #ccc;*/
	background: rgba(255,255,255,0.65);
	
	width: 100%;
	/*height: 100px;*/
	height: 70px;
	z-index: 100;
	/*webkit-box-shadow: 0px 0px 7px -2px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 7px -2px rgba(0,0,0,0.3);*/
}

.footer-content {
	/*width:940px; durch container_12 und grid_12*/
	/*margin: 0 auto 0 auto;*/
	margin-top: 10px;
	font-size: 10pt;
	font-weight: 300;
	/*text-align: center;*/
	width:100%;
	color: #333;
	line-height: 1.2em;
}
#footer-content a:link,a:visited{color: #333;text-decoration: none;}
#footer-content a:hover{color: #333;text-decoration: none;}



/* Site Specific
*****************************************************/
.content {/* white content box*/
	border: 1px solid rgba(0,0,0,0.1);
	padding: 20px;

	background-color: rgba(255,255,255,0.65);
	webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	webkit-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.3);
}
.content a:link{color: #444;text-decoration: none;}
.content a:visited{color: #444;text-decoration: none;}
.content a:hover{color: #444;text-decoration: none;}

.hcontent{/*header-content used for headlines above white boxes*/
	color: #333;
	margin-bottom: 20px;
}

.mcontent {/*media-content not used*/
	/*background-color: rgba(255,255,255,0.65);*/
	webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	webkit-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.3);
}

/*SECTION Start*/
.start-showcase { /*slider wrapper, see also css/nivo-slider/themes/default/default.css for border, shadow */ 
	width: 100%; 
}
.start-lcontent {
	width:600px;
	position: relative;
	float:left;
	/*border: 1px solid red;*/
}
.start-rcontent {
	width:270px;
	position: relative;	
	float:right;
	/*border: 1px solid red;*/
}

/*SECTION Reiki 30px spacing between boxes at 900px total (900-250-620=30px)*/
.reiki-lcontent {
	width: 250px;
	position: relative;	
	float:left;
	/*border: 1px solid red;*/
}
.reiki-rcontent {
	width: 620px;
	position: relative;	
	float:right;
	/*border: 1px solid red;*/
}

.reiki-lcontent2 {
	width: 700px;
	position: relative;	
	float:left;
	text-align: right;
	/*border: 1px solid red;*/
}
.reiki-rcontent2 {
	width: 170px;
	position: relative;	
	float:right;
	/*border: 1px solid red;*/
}

.reiki-laffect {
	width: 580px;
	position: relative;	
	float:left;
	/*border: 1px solid red;*/
}

.reiki-raffect {
	width: 290px;
	position: relative;	
	float:right;
	/*border: 1px solid red;*/
}
.reiki-raffect ul {list-style: circle; font-weight: 700; font-size: 1.1em;}
.reiki-raffect li {margin-left: 30px;line-height:225%;}

/*SECTION Angebot*/
.offer-lcontent {
	width: 300px;
	position: relative;	
	float:left;
	/*border: 1px solid red;*/
}
.offer-rcontent {
	width: 570px;
	position: relative;	
	float:right;
	/*border: 1px solid red;*/
}

h2.offer-nowraparea {
	
}

.offer-gallery {
	width: 870px;
	margin: 0 auto 10px auto; 
	
}

.offer-lgift {
	width: 150px;
	position: relative;	
	float:left;
	border: 1px solid red;
}
.offer-rgift {
	width: 720px;
	position: relative;	
	float:right;
	border: 1px solid red;
}

/*SITE imprint.php*/
.imprint-cwr {
	width: 100%;
}
.imprint-lcontent {
	width: 48%;
	position: relative;	
	float:left;
	/*border: 1px solid red;*/
}
.imprint-rcontent {
	width: 48%;
	position: relative;	
	float:right;
	/*border: 1px solid red;*/
}