/* 
###########################################################################
Main styles for nam-thaimassagen.de 2013

FileName:   main.css
Author:		Barbara Völk, www.voelkwerbung.de
Version:    2013.06.18  
###########################################################################
*/


/***********************************************/
/* COLOURS */

/*

red: #e30613; C:0, M:100, Y:100, K:0
or better (closer to print): #d53231;
bg-green: #dde8b1; C:18, M:0, Y:40, K:0
or better (closer to print): #cee2a9;

grey: #434d52

*/

/*
Type: Arial Rounded MT Bold
font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
*/

/***********************************************/


/***********************************************/
/* MAIN SETUP RESET */
/***********************************************/

html, body, div, a, p, img, ul, li, h1, h2, h3, h4, span, time, hr, hgroup, a img, footer, header, section, aside, nav, form, input, article, label, textarea, small {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
  	text-decoration:none;
}
footer, section, article, header, aside, nav { 
    display:block;
}

:focus {
    outline:none; 
}
::-moz-selection, ::selection { 
   color:#ffffff;
   background: #d53231; 
}

h1, h2, h3, h4 {
    font-weight:normal;
}

ul {
    list-style-type: none;
}

		
/* Set up for stiles for links + hover effects for desktop + mobile (which don't use :hover) */
a:link {
	color: #d53231;  /*#d53231 red */
	text-decoration: none;
}
a:visited {
	color: #d53231;  /*#d53231 red */
	text-decoration: none;
}
a:hover, a:active, a:focus { 
	color: #d53231;  /*#d53231 red */
	color:#434d52; /* grey */
	text-decoration: none;
}

/*Unterstützung für HTML 5 - Legt für die neuen HTML 5-Tags die Eigenschaft "display:block" fest, damit die Tags in den Browsern korrekt dargestellt werden. */
header, section, footer, aside, nav, article, figure {
	display: block;
}
  
/********************************************************************/
/* MAIN SETUP BASIC ELEMENTS */
/********************************************************************/

   
body {
   font-size:20px; font-size: 12px; font-size: 0.750rem;
   color:#434d52;
   font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
   font-weight:lighter;
   -webkit-text-size-adjust:100%;
   line-height:1.3em; 
   background: #cee2a9; /* bg-green #cee2a9 */
   border-top:solid 6px #434d52;
}


/********************************************************************/
/* MAIN WRAPPERS + MAIN LAYOUT ELEMENT + TAG SELECTORS */
/********************************************************************/

.innerWrap {
  width:96%;
  max-width:1200px;max-width:1000px;
  margin:0 auto; background: transparent;
}

.innerWrapOverflow {
  width:96%;
  max-width:1200px;
  margin:0 auto;
  overflow:auto;
}

/* used for bg images */	
#outerWrap {
    width:100%; height: 700px;
} 

   

/***********************************************/
/* HEADER */
/***********************************************/

.topWrap {
    width:100%;
    padding: 14px 0; padding: 0px 0;overflow: hidden;
} 
	

.topWrap h1 {height: 34px; text-transform: uppercase;margin-top:20px; text-align:center; font-size:2.2em; overflow: visible;  /*background: url("../images/logo2.png") center top no-repeat;*/}  
  
h1 span {
    margin:-84px auto 0 auto;color: #cee2a9; text-transform: uppercase;float: left;width:100%;color:#434d52;
} 

h1 img {
    margin:0 0 0 0px;/*background: url("../images/logo.png") left top no-repeat;*/ width: 442px; height: 34px;
}

header a, footer a {
  color:#434d52; color:#d53231;/* red */
}
header a:hover, footer a:hover { 
    color:#8a493a; 
}


/***********************************************/
/* MAIN CONTENT */
/***********************************************/

#contentWrap {
}

#mainContent {
   width:100%;
   max-width: 990px;width: 990px;
   background: transparent; height: auto; min-height: 600px; 
   margin:0 auto;
   color:#d53231;/* red */
}


.content {
	padding: 10px 0; padding: 0 8px 0 0; margin: 4px 0 0px 0;margin: 0px 0 0px 0;margin:0;
	background: transparent; background: url("../images/logo.png") center top no-repeat;background: transparent;
	width:90%;
	max-width:800px;max-width:484px;float: left;padding: 10px 0;padding: 10px 0 0 0;
}

.content a:link, .content a:visited {
	color: #d53231;  /*#d53231 red */
	text-decoration: none; 
}

.content a:hover, .content a:active, .content a:focus { 
	color: #d53231;  /*#d53231 red */
	color:#434d52; /* grey */
	text-decoration: underline;
}


/* column left */
.sidebar  {width: 202px;width: 252px;height:auto;height:600px;float: left;}


/* column right */
aside {
	float: left;
	width: 252px;
	height:600px;
	background: url("../images/stop.png") center 140px no-repeat;
	padding: 10px 0 10px 0;
	text-align:center;
	font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
	font-size:1.7em;font-size:1.6rem;
  line-height:1.8rem;font-size:12px;font-size:16px;
}

aside h5 {margin: 220px 0 0 0;font-weight: normal;
font-size:1.6rem;
  line-height:1.8rem;font-size:16px;}

.underline {text-decoration: underline;}
address { font-style:normal; margin: 40px 0 0px 0;}
address p {margin: 0px 0 10px 0;}

.menue {
  text-align:center;text-align:left;
  display:block;
  width:100%;
  padding:5px 0 0 0;
  font-size:0.9em; font-size:1.2rem;
  font-size:1.7em;
  line-height:1.8em;
  font-weight: bold;
}

ul.menue {
    list-style-type: none;
	margin: 220px 0 0 40px;margin: 220px 0 0 20px;margin: 220px 0 0 16px;
}

ul.menue li {
  display:inline;display:block;
  padding:0 9px;
}
.menue a {
  display:inline-block;font-weight: 500;padding-left:24px;
}

.menue a:hover, .menue a:active, .menue a:focus { 	
	color: #d53231;  /*#d53231 red */
	color:#434d52; /* grey */
	text-decoration: none;background: url("../images/nam2.png") left center no-repeat; padding-left:24px;
}
  
a.active {background: url("../images/nam.png") left center no-repeat; padding-left:24px;}


.phone, .fax {display:none;}
.copyright, .phone2, .fax2 { display: inline;}


.mainImage {
  width:100%;
  /*height:auto; height:300px;*/
}
.mainImage2 {
  width:100%;
  max-width:1243px; 
  max-width:582px; 
  height: auto;
  /*height:auto; height:300px;*/
}



/***********************************************/
/* FOOTER */
/***********************************************/
footer { 
  width:100%;
  border-top:solid 2px #434d52; clear: both;
   }
footer small {
  width:100%;width:80%;
  text-align:center;text-align: right;
  margin: 0;
  padding-right: 40px;padding:20px 40px 20px 0px;
  display:block; 
   }
   
 
 
 /***********************************************/
/* MAIN CONTENT */
/***********************************************/  

article  {
  width:90%;
  max-width:800px;
  margin:0 auto;
  overflow:auto;
  padding:0 0 20px 0;
    
    -webkit-hyphens: auto;
  -ms-hyphens: auto;
    hyphens: auto;
  }
  

/* important or first article markup */
.important {
  padding:30px 0 30px 0;padding:20px 0 20px 0;
  max-width:580px;/*max-width:540px;max-width:600px;*/
}


article h1, #contentWrap h1  {
   width:100%;width:94%;
   text-align:right;
   padding:40px 0px 40px 0;
   font-size:1.8em;
   line-height:1.3em;
   text-align:center;
  }

article h2  {
   width:94%;
   padding:40px 0px 10px 0;
   font-size:1.8em;
   line-height:1.3em;
   text-align:center;float:left;
  }
  
article h3, #contentWrap h3 {
  margin:20px 0 20px 0;
  font-size:1.5em;
  font-style:bold;
    line-height:1.3em;
  }
article p, #contentWrap p {
  margin:0 0 10px 0;
  clear:both;
  line-height:1.5em;
  font-size:1.1em;
  word-spacing:1px; width:380px;
  
  } 
  

article small p  { 
  margin: 0 auto 0 auto;
  padding:20px 0px 0px 0;
  font-size: 13px;
  text-align: center;
   }
   
  
article h1.important, article h1.first  {
   width:94%;
   text-align:center;
   margin: 0 auto 0 auto;
   padding:50px 0px 0px 0;
   font-size:1.8em;
   line-height:1.3em;
   text-transform: uppercase; 
   margin: 480px 0 10px 0;height: 30px;
  }  
 
article h1.first span {
    margin:0 0 0 0px;color: #ffffff;/* color: #cee2a9; postion: relative; top: 2px; z-index: 9;*/ /*postion: absolute; top: -20px;*//*padding-top: -20px!important;postion: absolute; top: -20px!important;margin: 30px 0 0 0px!important; float: none!important; NO GO! */display: none;
}

/*.first {display: none;}*/

article h1.first span img {
    margin:0 0 0 0px;width: 356px;width:100%; height: 4px;/*background: url("../images/logo.png") left top no-repeat;*//*background: #ddd; z-index: 10;*/position: relative; top: 0px;float: none;
}

article p.important {
  font-size:1.26em;font-size:1.16em;font-size:1.16rem;font-size:16px;line-height:1.5rem;
  max-width:540px;width:400px; width:380px; /*background:#966;*/margin: 0 auto 0 auto;
  /*margin: 460px 0 10px 0;*/padding: 10px 10px 0px 10px;
}

 
article p span.preise, article p span.preis2 {
	font-size:16px;line-height:1.5rem;
   width: 90%;height: 20px;
  background: url("../images/nam.png") 26px 0px no-repeat;
  margin: 20px 0 0 30px; 
  padding: 0px 0px 0px 50px;display: block;clear:both;float: left;display: block;}
  
article p span.preis2 {margin: 10px 0 40px 30px; }
  
article h1 .note { font-size:0.9rem;}

/* used in index + impressum  */
article p.note {
  font-size:1.26em;font-size:1.16em;font-size:0.9em;
  max-width:540px;width:400px; width:380px;margin: 0 auto 0 auto;
  padding: 0px 10px 0px 10px;text-align:right;
}

article ul {
  font-size:1.16rem;font-size:16px;
  margin: 0 0 10px 0;padding: 0;
  line-height:1.5em;line-height:1.8rem;
  max-width:580px;width:380px;margin: 0 auto 0 auto;padding: 0 0 20px 0;
}


article ul li{ float: left;width: 160px;}
.rightCol {float: right;text-align: right;}
.center { text-align: center; width:435px;}
article small p.left { text-align: left;}

article img {width:100%;background: url("../images/historie.jpg") center center no-repeat;}