/** 
 * SilverStripe Tree Theme
 * http://www.silverstripe.com
 *
 * Main Layout File
 */
 
/* Misc Styles and defaults 
-------------------------------------------- */
  
* {
	margin: 0;
	padding: 0;
}

body {
	
	color: #542f1d;/*braun*/
 	font-size: 62.5%; 
	margin-bottom: 0px;
	/*font-family:  Helvetica, Arial, sans-serif;*/
	font-family: "Chicago", Helvetica, Arial, sans-serif;
	letter-spacing: 1px;
	background-color:#ffffff;
	height:101%; 
}

html {

	height:100%;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	margin:0;
	
}

/*td .img
{
	padding-top: 5px;
}*/
/*----------------TABLE--------------------*/
caption, th, td {
	
	/*line-height: 20px;
	line-height: 20px;*/
	margin: 0;
	padding: 0 15px 0 15px;
}



.clear{
	clear:both;
}

/* CONTAINER
----------------------------------------- */
#BgContainer {

	max-width: 840px;  
	margin: 0 auto;
	
	
}
#Container { 
	
	max-width: 840px; 
	margin-top: 40px;
	padding: 0px;
	min-height: 452px;
	background-color:#fdfdf5;

}
#Layout{
	width: 440px;
	float: left;
	border-left:1px solid #542f1d!important;/*braun*/
	border-right:1px solid #542f1d!important;
	min-height: 452px;

}
#Homepage{
	width: 100%;
	min-height: 568px;
	/*margin-top:18px;*/
	/*padding-top:18px;*/
	
}
#Layout table{
	
	margin: 5px 0;	
}

#Layout table tr td{
	
	padding: 5px 3px 5px 7px;	
}



/*---------FOTO farbiger DIV rechts--------------*/



#foto {
	width: 195px;
	float: right;
	min-height: 452px;
	margin: 0;
	position:relative;
}

.BildRechts {
	width: 195px;
	float: right;
	margin-top:11px;
	bottom:0;
}


  
/*---------PAGE PRODUKT LAYOUT--------------*/
  
  
  
#Produkt {
  
	/*width: 440px;*/
	max-width: 635px;/* zusätzlich des DIV's foto (195px)*/
	float: left;
	border-left:1px solid #542f1d!important;/*braun*/
	min-height: 452px;
	/*overflow: hidden;*/
	
	
	}



#Produkt .textdivlinks {
	max-width:440px;
	/*min-height:568px;/*evtl. Probleme bei Opera*/
	/*min-height:452px;*//*evtl. Probleme bei Opera*/
	float:left;
	margin: 0;

	}


#Produkt p.textdivlinks {
	font-size: 11px;
	line-height: 20px;

	}
	
#Produkt a,
#Layout a  {

	color: #e7511e;/*orange*/
	font-weight:bold;
	text-decoration:none;
	
	}
#Produkt a:hover,
#Layout a:hover

 {
	color: #e7511e;/*orange*/
	
	}
	
#Produkt h1
 {
	font-family: "Chicago", Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 20px;
	/*text-align:center;*/
	margin-top: 15px;	

	}
	


#Produkt h2
 {
    font-family: "Chicago", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 100;
    /*line-height: 20px;
	line-height: 15px;*/
	margin: 8px 0 4px 0;
	margin: 8px 0 -5px 0;
	font-weight:100;

	

	}
	
#Produkt h3 {

  	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	line-height: 20px;
	line-height: 15px;


	
	}

#Produkt table.textdivlinks {
	max-width:440px;
	float:left;
	margin: 0;
	padding: 0;
	border-right:1px solid #542f1d!important;/*braun*/


	}
	
	
	

	
/*----------------BILD RECHTS IM FOTODIVRECHTS------------*/
	
#Produkt p.fotodivrechts
{
	max-width:198px;
	margin-top:18px;
	float:right;
	min-height:452px;
	

	}
	
#Produkt img.right {
	float:right;
	padding:0;
	margin:0;
	
	
	}
 	 

/*---------------------INHALT DIV LAYOUT--------------------*/



#Layout img.center,
#Produkt img.center,
#Homepage img.center
 {	
	
	padding:0;
	margin-left: auto; 
	margin-right: auto;
	display: block;	

	}



#Layout p,
#Produkt p {	

	font-size: 11px;
	line-height: 20px;
	padding: 0;
	margin: 0 0 15px 0;

	}

#Layout p.inline,
#Produkt p.inline {
	
	line-height: 20px;
	display: inline;
	padding: 0 15px 0 15px;
	margin:0 0 15px 0;

	}

#Layout p.left,
#Produkt p.left {

	line-height: 20px;
	text-align:left;
	padding-left:15px;
	margin:0 0 15px 0;
	
	}

#Layout p.right,
#Produkt p.right {

	line-height: 20px;
	text-align:right;
	padding-right:15px;
	margin:0 0 15px 0;

	}

#Layout p.center,
#Produkt p.center {

	line-height: 20px;
	text-align:center;
	padding:0;
	padding:0 5px 0 5px; /*neu 27-1-22*/
	margin:0 0 15px 0;

	}
	


#Layout p a {

	color: #e7511e;/*orange*/
	font-weight:bold;
	text-decoration: none;
	
	
	}

#Layout p a:hover,
#Layout p a.current,
#Layout p a.current:hover,
#Layout p a.selected {

	color: #e7511e;/*orange*/
	text-decoration: underline;
	
	}
	
/*-------------ADRESSE-----------------*/
#Layout p.adresse,
#Produkt p.adresse {

    font-family:  Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 20px;
	text-align:center;
	padding-top:18px;
	padding-bottom:13px;
	font-weight:100;
	/*font-style:normal;*/

	}
/*--------------HEADLINES------------------------*/
#Layout h1
	
	 {
	
    font-family: "Chicago", Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 20px;
	padding-bottom:0px;
	margin-top: 15px;		

	}
#Layout #textbox h1.center,
#Produkt #textbox h1.center {
	font-family: "Chicago", Helvetica, Arial, sans-serif;
	text-align:center;
	margin: 15px 0 5px 0;
	

}
#Layout textbox h2.center,	
#Produkt textbox h2.center {
	font-family: "Chicago", Helvetica, Arial, sans-serif;
	text-align:center;
	/*line-height: 15px;*/
	margin: 8px 0 4px 0;
	margin: 8px 0 -5px 0;
	font-weight:100;
	

	}



#Layout h2
 {
	
    font-family: "Chicago", Helvetica, Arial, sans-serif;
	font-weight:100;
	font-size: 11px;
	/*line-height: 20px;
	line-height: 15px;*/
	margin: 8px 0 4px 0;
	margin: 8px 0 -5px 0;		

	}
	
#Layout h2 a,
#Produkt h2 a {

	font-weight:100;

}

#Layout h2 a:hover,
#Produkt h2 a:hover {

	font-weight:100;
	text-decoration:underline;

}	
	
#Layout p.fotodivrechts .fotodivrechtslogo,	
#Produkt p.fotodivrechts .fotodivrechtslogo {
	
	font-family: "Chicago", Helvetica, Arial, sans-serif;
	font-size: 11px;
	letter-spacing: 0px;
	font-weight:500;
	text-align:center;
	margin: 0 0 10px 0;
	

	}



#Layout h3,
#Layout h4,
#Layout h5,
#Layout h6 {
	
    font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	line-height: 20px;
	line-height: 15px;
	margin-top: 0;
	margin-top: -5px;			

	}



/* MAIN NAVIGATION - TABS
----------------------------------------- */
#Navigation {
	
	width: 200px;
	margin: 0;
	padding: 0; 
	float: left;
	
		
	}
#Navigation ul { 
 	
	list-style-type: none;
	text-align: right;
	width: 200px;
	float:left;
	margin-top:0px;

		
	}
	
#Navigation ul li { 
	 		 
	font-family: "Chicago", Helvetica, Arial, sans-serif;
	padding-right: 40px;
	text-align: right;
	font-size: 22px;
	font-size: 11px;
	letter-spacing: 0px;
	text-decoration: none;
	color: #542f1d;/*braun*/
	line-height: 52px;
}
	
#Navigation ul li a { 
		
	/*background: transparent url(../images/navi/off.svg) right no-repeat;
	background-size: 11px;
	padding-right: 40px;*/ 
	text-align: right;
	text-decoration: none;
	color: #542f1d;/*braun*/			
}
#Navigation ul li a span.kreis {
    width: 11px;
    height: 11px;
    background-color: #000;
    display: inline-block;
    border-radius: 50%;
    margin: 0 0 0 40px;
}

#Navigation ul li a:visited{
	/*background: transparent url(../images/navi/off.svg) right no-repeat;*/
	color: #542f1d;/*braun*/
	text-decoration: none;
	
	}				
#Navigation ul li a:hover,
#Navigation ul li a.current,
#Navigation ul li a.current span,
#Navigation ul li.current a,
#Navigation ul li.section a
  { 
					
	/*background: transparent url(../images/navi/on.svg) right no-repeat !important;*/
	color: #e7511e !important;/*orange*/
}
#Navigation ul li a:hover span.kreis,
#Navigation ul li.current a span.kreis,
#Navigation ul li.section a span.kreis {
    width: 11px;
    height: 11px;
    background: #ff0000; /* Old browsers */
background: -moz-linear-gradient(left, #ff0000 0%, #fff200 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ff0000 0%,#fff200 100%); /* Chrome10-25,Safari5.1-6 */
    display: inline-block;
    border-radius: 50%;
    margin: 0 0 0 40px;
}
					
/*_______________________________*/




/* INHALT */

#Textbox p.img {

margin: 0 auto;
padding:0;

	}
#Textbox p {
 padding:0 15px 0 15px;
}
img {
	width:auto;
	height:auto;
	max-width:100%;
}



/* COMMENTS
---------------------------------------- */
#CommentHolder ul {
	list-style: none;
	margin: 20px 0;
}
#PageComments li {
	margin: 5px 0;
	padding: 1px;
	width: 88%;
}
	#PageComments li.odd {
		background: #E8F6FF url(../images/commentBg.png) no-repeat 1% 10%;
		padding-left: 40px;
		padding-right: 10px;
		border-bottom: 2px solid #BCE4FE;
	}
	#PageComments li.even {
		background: #fff url(../images/commentBgAlt.png) no-repeat 99% 10%;
		padding-right: 40px;
		padding-left: 10px;
	}

		#PageComments li.odd p.info {
			color: #3AA0C3;
		}

		.actionLinks li {
		   display: inline;
		   border-right: 1px solid #ddd;
		}
			.actionLinks li a {
				padding-right: 3px;
				font-size: 10px;
			}
   			.actionLinks li.last {
      			border-right: none;
   			}

.commentrss {
	background: transparent url(../images/feed-icon-14x14.png) no-repeat;
	padding-left: 20px;
	font-size: 1.1em;
	line-height: 1.6em;
}
#PageCommentsPagination p {
	text-align: center;
	font-size: 1.2em;
}
#PageComments p {
	font-size: 1em;
	margin: 8px 0;
}
	#PageComments p.info {
		color: #999;
		margin: 0px;
		padding: 0;
		line-height: 1em;
		font-size: 0.9em;
	}


#PageCommentInterface_Form_PostCommentForm_action_postcomment {
	margin-bottom: 20px;
}




/* MESSAGEBOXS
--------------------------------------------- */
.message {
	margin: 15px;
	padding: 5px;
	width: 92%;
	color: #979908;
	border: 4px solid #F7F8B4;
	background: #FFFFEA;
}
span.middleColumn .message {
	margin: 4px 0 0 3px;
}
.required {
	margin: 4px 0 0 3px;
	padding: 5px;
	width: 92%;
	color: #DC1313;
	border: 4px solid #FF7373;
	background: #FED0D0;
}

p#Remember label {
	margin: -24px 0 0 20px;
	text-align: left;
}
.entry {
	border-bottom: 1px solid #eee;
}

.typography #Content p.authorDate {
	color: #444;
	margin-top: -15px;
	}
	
/* UNSUBSCRIBE NEWSLETTER
------------------------------------------------ */
#Unsubscribe_MailingListForm_MailingListForm{
	min-height:100px;
}

	#Unsubscribe_MailingListForm_MailingListForm p{
		margin:0 !important;
		padding:10px;
	}
		#Unsubscribe_MailingListForm_MailingListForm p label{
			display: inline;
		}
	#Unsubscribe_MailingListForm_MailingListForm label{
		margin:0;
	}


/* FOOTER
----------------------------------------------- */
/* HEADER
----------------------------------------- */


#Header {

	width: 50px;
	height: 50px;
	background: transparent url(../images/logo_the_tree_hairdesign.png) center no-repeat;
	margin-left:120px;
	margin-top:5px;	

}


#Footer { 
 	clear: both;  
	max-width: 840px; 
	height: 60px;
	

	}

#Footer p { 
	color: #542f1d;
	margin-top: 8px;
	text-align:right;
	text-align:center;
	
	}
  		
#Footer a { 

	color: #542f1d;
	font-weight:700;  
	text-decoration: none;
	color: #e7511e;
	
	}
	
#Footer a:hover {
				
	color: #542f1d;
	color: #e7511e;
	text-decoration: underline;
	
	}

@media only screen and (max-width : 838px) {
	#foto {
	  width: 100%;
	  clear: right;
	  min-height: auto;
	  margin: 0;
	  position: static;
	  background-color: #fff;
	}

	.BildRechts {
	float:left;
		width: 100%;
	  display: flex;
	  margin-top:11px;
	  justify-content: space-around;
	}
	.BildRechts img {
		width:100%;
		height:auto;
	}

}
@media only screen and (max-width : 640px) {
	#Container {
	  width: 100%;
	  margin-top: 0px;
	}
	#Navigation {
	  width: 100%;
	  margin: 0;
	  padding: 0;
	  float: left;
	  border-bottom: 1px solid #000;
	}
	#Layout {
	  width: 100%;
	  clear: left;
	  border-left: 0px solid #542f1d !important;
	  border-right: 0px solid #542f1d !important;
	  min-height: auto;
	  padding: 0px;
	}
	#Footer p {
	  color: #542f1d;
	  margin-top: 8px;
	  text-align: right;
	  text-align: center;
	  padding: 6px;
	}

}