/* -------------------------------------------------------------- 
  
   Boilerplate Screen Styles
   * Version:   0.5 (2007-11-19)
   
-------------------------------------------------------------- */

@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/forms.css";
@import "lib/plugins.css";


/* Oesterzwammen.nl
-------------------------------------------------------------- */

html, body {
   padding           : 0;
   margin: 0;
   /*text-align        : center;*/
   text-align		 : left;
/*   overflow-y        : auto;
   overflow-x        : hidden;*/
   font-family		 : arial;
}

#accessibility {
   display           : none;
}

.clear {
   clear             : both;
}



/* Provide the left side of the website with a light background. */
 
#leftBackground {
   position          : absolute;
   background        : rgb(255, 255, 255) url('../images/backgroundLeft.png') top repeat-x;
   left              : 0px;
   top				 : 0px;
   width             : 50%;
   height        	 : 750px;
   float             : left;
}



/* Provide the right side of the website with a dark background. */

#rightBackground {
   position          : absolute;
   background        : rgb(255, 255, 255) url('../images/backgroundRight.png') top repeat-x;
   width             : 50%;
   top				 : 0px;
   right			 : 0px;
   /*left              : 50%;*/
   height        	 : 750px;
}



/* Website wrapper (centered). */

#wrapper {
   position          : relative;
   /*left              : 50%;*/
   z-index           : 1;
   margin			 : 0 auto;
   /*margin-left       : -490px;*/
   height            : 875px;
   width             : 980px;
   background        : url('../images/background.png') no-repeat;
}



/* Header image (logo). */

#blockHeader {
   position          : absolute;
   margin-left       : 28px;
   width             : 559px;
   height            : 198px;
   background        : url('../images/blockHeader.png') no-repeat;
   top               : 53px;
}



/* Top menu. */

#blockTopMenu {
   position          : absolute;
   left			     : 232px;
   top               : 225px;
   width             : 360px;
   height            : 35px;
}

#blockTopMenu ul {
   margin            : 0;
   padding           : 0;
   list-style-type   : none;
}

#blockTopMenu ul li {
   float             : left;
}

#blockTopMenu ul li a {
   float             : left;
   text-transform    : uppercase;
   color             : rgb(145, 40, 40);
   font-weight       : 900;
   font-size         : 13px;
   padding           : 7px 15px 0px 15px;
}

#blockTopMenu ul li a:hover,
#blockTopMenu ul li a.selected{
   color             : rgb(254, 28, 27);
   text-decoration   : none;
}

#blockTopMenu ul li #option1:hover {
   background        : url('../images/arrow1.png') left top no-repeat;
}

#blockTopMenu ul li #option2:hover {
   background        : url('../images/arrow2.png') left top no-repeat;
}

#blockTopMenu ul li #option3:hover {
   background        : url('../images/arrow3.png') left top no-repeat;
}

#blockTopMenu ul li #option4:hover {
   background        : url('../images/arrow4.png') left top no-repeat;
}



/* Top right block. */

#blockTopRight {
   position          : absolute;
   left			     : 596px;
   width             : 254px;
   height            : 183px;
   top               : 64px;
}



/* Menu. */

#blockMenu {
   position          : absolute;
   left				 : 57px;
   width             : 153px;
   height            : 208px;
   background        : url('../images/blockMenu.png') no-repeat;
   top               : 251px;
}

#blockMenu ul {
   margin            : 14px 22px 0px 0px;
   padding           : 0;
   list-style-type   : none;
}

#blockMenu a {
   display           : block;
   width             : 128px;
   background        : url('../images/menuLine.png') bottom right no-repeat;
   text-align        : right;
   padding           : 1px 0px 1px 0px;
   font-size         : 15px;
   color             : rgb(255, 255, 255);
   font-family       : Times;
   font-weight       : 100;
   float             : right;
}

#blockMenu a.selected{
	text-decoration	 : underline;
}

#blockMenu a#last {
   background        : none;
}



/* Recipe block. */

#blockRecipe {
   position          : absolute;
   left			     : 211px;
   width             : 381px;
   height            : 214px;
   background        : url('../images/blockRecipe2.png') no-repeat;
   top               : 253px;
}



/* Right block. */

#blockRight {
   position          : relative;
   left			     : 596px;
   width             : 254px;
   height            : 208px;
   background        : url('../images/blockRight.png') no-repeat;
   top               : 253px;
}



/* Disclaimer. */

#blockDisclaimer {
   position          : absolute;
   left			     : 57px;
   width             : 150px;
   height            : 189px;
   background        : url('../images/blockDisclaimer.png') no-repeat;
   top               : 468px;
}

#blockDisclaimer a {
   display           : block;
   padding-right     : 5px;
   width             : 145px !important;
   width             : 150px;
   padding-top       : 173px;
   height            : 15px !important;
   height            : 188px;
   color             : rgb(154, 59, 56);
   font-weight       : 100;
   font-size         : 10px;
   text-decoration   : none;
   text-align        : right;
}



/* Content. */
#maincontent img.leftBorderRed {
 	float			 : left;	
 	border			 : 1px solid #550b0b;
  	margin			 : 5px 5px 5px 0px;  
}

#maincontent img.rightBorderRed {
 	float			 : right;	
 	border			 : 1px solid #550b0b; 
 	margin			 : 5px 0px 5px 5px;   	
}

#maincontent img.leftBorderWhite {
 	float			 : left;	
 	border			 : 1px solid #fff;
 	margin			 : 5px 5px 5px 0px;   	 
}

#maincontent img.rightBorderWhite {
 	float			 : right;	
 	border			 : 1px solid #fff;
 	margin			 : 5px 0px 5px 5px;   	 
}

#maincontent img.right {
 	float			 : right;
 	margin			 : 5px 0px 5px 15px;  	
}

#maincontent img.left {
 	float			 : left;
 	margin			 : 5px 15px 5px 0px;  
}


#maincontent a {
	color: #912828;	
}

#maincontent a:hover {
	color: #FE1C1B;	
}

#maincontent h1 {
   font-size         : 18px;
   line-height		 : 28px;
   font-weight		 : bold;

   color             : #550B0B;
}

#blockContent {
   position          : absolute;
   margin-left       : 212px;
   width             : 381px;
   height            : 192px;
   background        : url('../images/blockContent.png') no-repeat;
   top               : 465px;
}

#blockContent #content{
   margin            : 18px 16px 16px 16px;
   overflow          : auto;
   height            : 158px;
   text-align        : left;
   font-family       : arial;
   padding-right     : 10px;
}

#blockMainContent{
   position          : absolute;
   left       		 : 211px;
   width             : 381px;
   height            : 406px;
   background        : url('../images/blockMainContent.png') no-repeat;
   top               : 253px;
}	


#blockMainContent #content {
   margin            : 18px 16px 16px 16px;
   overflow          : auto;
   height            : 367px;
   text-align        : left;
   font-family       : arial;
   padding-right     : 10px;
}

#blockContent #content h1,
#blockMainContent #content h1{
   font-size         : 13px;
   font-style        : italic;
   color             : rgb(149, 49, 48);
}

#blockContent #content p,
#blockMainContent #content p {
   font-size         : 11px;
}


/* Mail a friend block. */

#blockMailAFriend {
   position          : absolute;
   width             : 253px;
   height            : 188px;
   margin-left       : 597px;
   top               : 468px;
   background        : url('../images/blockMail.gif') no-repeat;
}

#blockMailAFriend a {
   display           : block;
   width             : 253px;
   padding-top       : 165px;
   height            : 23px !important;
   height            : 188px;
   color             : rgb(84, 20, 20);
   font-weight       : 900;
   text-decoration   : none;
}

#blockMailAFriend a:hover {
   text-decoration   : none;
}





/* Recipes block. */

#blockRecipes {
   position          : absolute;
   width             : 638px;
   height            : 403px;
   left       		 : 211px;
   top               : 255px;
   background        : url('../images/backgroundRecipes.png');
   overflow          : hidden;
}

#blockRecipesInner {
   margin            : 15px 5px 15px 15px;
   overflow-y        : auto;
   overflow-x        : hidden;
   height            : 345px;
   text-align        : left;
}



/* Recipes buttons. */

#buttons {
   display           : block;
   /*width             : 620px;*/
   margin            : 8px 0px 0px 12px;
   height            : 20px;
   margin-bottom     : 10px;
   list-style-type   : none;
}

#buttons li {
   float             : left;
   text-align		 : center;
}

#buttons li a {
   display           : block;
   float             : left;
   width             : 121px;
   padding-top       : 4px;
   height            : 21px !important;
   height            : 25px;
   margin-right      : 2px;
   color             : rgb(255, 255, 255);
   text-transform    : lowercase;
   font-weight       : 900;
   text-decoration   : none;
}

#buttons li a:hover {
   text-decoration   : none;
}

#buttons #recipes1 {
   background        : url('../images/buttonRecipes1.png');
}

#buttons #recipes1:hover,
#buttons #recipes1.selected{
   background        : url('../images/buttonRecipes1Hover.png');
}

#buttons #recipes2 {
   background        : url('../images/buttonRecipes2.png');
}

#buttons #recipes2:hover,
#buttons #recipes2.selected {
   background        : url('../images/buttonRecipes2Hover.png');
}

#buttons #recipes3 {
   background        : url('../images/buttonRecipes3.png');
}

#buttons #recipes3:hover,
#buttons #recipes3.selected {
   background        : url('../images/buttonRecipes3Hover.png');
}

#buttons #recipes4 {
   background        : url('../images/buttonRecipes4.png');
}

#buttons #recipes4:hover,
#buttons #recipes4.selected {
   background        : url('../images/buttonRecipes4Hover.png');
}

#buttons #recipes5 {
   background        : url('../images/buttonRecipes5.png');
}

#buttons #recipes5:hover,
#buttons #recipes5.selected {
   background        : url('../images/buttonRecipes5Hover.png');
}



/* Recipe options. */

#blockRecipes #options {
   display           : block;
   width			 : 250px;
   margin            : 7px 7px 0px 15px;
   height            : 20px;
   margin-bottom     : 10px;
   list-style-type   : none;
   float			 : right;
}

#blockRecipes #options li {
   float             : right;
   color             : rgb(255, 255, 255);
}

#blockRecipes #options a {
   color             : rgb(255, 255, 255);
   text-transform    : uppercase;
   font-size         : 10px;
   padding-left      : 5px;
   padding-right     : 5px;
   border-right      : 1px solid rgb(255, 255, 255);
   cursor			 : pointer;
}

#blockRecipes #options #lastOption {
   border            : 0;
}





#blockRecipes table{
	float: left;
}
#blockRecipesInner td {
   border            : 0px;
   padding           : 0px 10px 0px 0px;
   vertical-align    : top;
   width			 : 50%;
}

#blockRecipes table h1{
   margin     		 : 0 0 0 0;
   padding			 : 10px 0 0 0 ;
   height			 : 30px;
   font-size         : 11px;
   font-weight       : 900;
   font-family       : verdana;
   font-style        : italic;
   color             : rgb(85, 11, 11);
   text-align		 : left;
   text-decoration	 : none;
}

#blockRecipes table h1 a{
   font-size         : 11px;
   font-weight       : 900;
   font-family       : verdana;
   font-style        : italic;
   color             : rgb(85, 11, 11);
   text-align		 : left;
   text-decoration	 : none;
}


#blockRecipes table p,
#blockRecipes table p a{
   width             : 128px;
   color             : rgb(255, 255, 255);
   font-size         : 11px;
   line-height       : 14px;
   margin			 : 10px 0 5px 0;
   font-weight       : 100;
   text-align		 : left;
   text-decoration	 : none;
}

#blockRecipes table a {
   display           : block;
   margin-top        : 11px;
   /*text-transform    : lowercase;*/
   font-size         : 10px;
   text-align        : right;
   font-family       : arial;
   font-weight       : 100;
   text-decoration   : underline;
   color             : rgb(255, 255, 255);
}

#blockRecipes table a:hover {
   text-decoration   : none;
}



/* Recipe text. */

#blockRecipes p{
   color             : rgb(92, 19, 19);
   font-size         : 11px;
   font-weight       : 900;
   line-height       : 12px;
   margin-right      : 16px;
   margin-left       : 8px;
}

#maincontent li{
   color             : rgb(92, 19, 19);
   font-size         : 11px;
   font-weight       : 900;
}

/* Recipe page. */
#blockRecipes #buttons{
	/*width		: 300px;*/
	float		: left;
}


#blockRecipes #blockRecipesInner{
	clear		: both;
}
/*
#buttonSnack {
   display           : block;
   position          : absolute;
   width             : 119px;
   padding-top       : 2px;
   height            : 21px !important;
   height            : 23px;
   background        : url('../images/buttonRecipes1.png') no-repeat left top;
   top:10px;
   margin-left:15px;
   text-align		 : center;
   text-decoration   : none;
}

#buttonSnack:hover,
#buttonSnack.selected{
   background        : url('../images/buttonRecipes1Hover.png');
}

#buttonSnack {
   text-transform    : lowercase;
   color             : rgb(255, 255, 255);
   font-weight       : 900;
}*/

#blockRecipesInner #recipeHeader {
   text-align        : left;
   margin-bottom     : 0px;
}

#blockRecipesInner #recipeHeader td {
   border            : 0px;
   vertical-align    : top;
}

#blockRecipesInner #recipeHeader #description {
   /* TODO: positie lunch knop oud */
   /*padding			 : 35px 10px 0px 10px;*/ 
   /* TODO: positie lunch knop nieuw */  
   padding           : 0px 10px 0px 10px;
   float             : left;
}

#blockRecipesInner #recipeHeader #description h1 {
   color             : rgb(85, 11, 11);
   font-size         : 15px;
   font-style        : italic;
   line-height       : 20px;
   margin-bottom     : 10px;
}

#blockRecipesInner #recipeHeader #description p {
   color             : rgb(255, 255, 255);
   font-size         : 12px;
   line-height       : 18px;
   margin-left       : 0px;
   width             : 250px;
}

#blockRecipes h2 {
   color             : rgb(255, 255, 255);
   font-size         : 11px;
   font-style        : italic;
   margin            : 5px 0px 10px 5px;
}



/* Mail block. */

#blockMail {
   position          : absolute;
   width             : 638px;
   height            : 403px;
   margin-left       : 210px;
   top               : 255px;
   background        : url('../images/backgroundMail.png');
   overflow          : hidden;
}

#blockMailInner {
   margin            : 15px 5px 15px 10px;
   overflow          : auto;
   height            : 345px;
   text-align        : left;
}

#mailHeader #photo {
   width             : 388px;
   float             : left;
   margin-left       : 1px;
   margin-top        : 1px;
}

#mailHeader #photo textarea {
   position          : absolute;
   width             : 190px;
   height            : 55px;
   border            : 0px;
   font-size         : 11px;
   line-height		 : 13px;   
   color             : rgb(146, 135, 14);
   margin-left       : 157px;
   top               : 24px;
   padding			 : 0px;
 /*	  text-align		 : center; */ 	   
   overflow-x        : hidden;
   overflow-y        : hidden;
   background		 : transparent;
}

#mailHeader #photo #backLink {
   position          : absolute;
   margin-top        : 273px;
   margin-left       : 20px;
   text-transform    : uppercase;
}

#mailHeader #photo #backLink a {
   color             : rgb(255, 255, 255);
   font-size         : 10px;
}

#mailHeader #photo #backLink a:hover {
   text-decoration   : underline;
}

#mailHeader #form {
   width             : 210px;
   float             : left;
   height            : 320px;
   padding-top       : 3px;
}

#mailHeader #form label {
   color             : rgb(255, 255, 255);
   text-transform    : uppercase;
   font-size         : 10px;
   font-weight       : 100;
   display           : block;
   height			 : 16px;
   margin-left       : 8px;
   padding-bottom    : 2px;
}

#mailHeader #form input {
   background		 : transparent;	
   font-family		 : arial;
   border            : 0px;
   font-size         : 10px;
   width             : 190px;
   margin-top 		 : 0px; 
   margin-bottom	 : 9px; 
   margin-left		 : 8px;
   color             : rgb(146, 135, 14);
}

#mailHeader #form textarea {
   width             : 190px;
   padding           : 0px;
   height            : 56px;
   border            : 0px;
   font-size         : 12px;
   margin-top        : 2px;
   color             : rgb(146, 135, 14);
   overflow-x        : hidden;
   overflow-y        : hidden;
   margin-left       : 9px;
   background		 : transparent;	
 /*		text-align		 : center;   */ 	
}
#textCounter {
	height			 : 15px;
	padding-top		 : 5px;	
	font-size		 : 11px;
	color			 : rgb(255,255,255);
	font-style		 : italic; 
}

#previewText {
   width			 : 369px;
   height			 : 246px;
}

#mailHeader #form #submit {
   margin-top        : 7px;
   margin-left       : -2px;
   width             : 125px;
   height            : 33px;
   font-weight       : 900;
   background        : url('../images/buttonSend.png');
   line-height       : 12px;
   color             : rgb(255, 255, 255);
   text-transform    : uppercase;
   cursor            : pointer;
}

#seotags{
	background:url("../images/seotags.png") no-repeat scroll left top transparent;
	bottom:25px;
	height:170px;
	left:53px;
	padding:10px 20px;
	position:absolute;
	width:802px;
}

#seotags h2{
	font-size: 15px;
	line-height: 21px;
	font-weight: bold;
	color: #634949;
	margin:0;
}

#seotags ul{
	list-style: none;
	padding:0;
	margin:0;
	float: left;
	width: 200px;
}

#seotags li{
	/*float:left;*/
	margin-right: 10px;
	
}

#seotags li a{
	font-size: 11px;
	color: #953130;
	text-decoration: none;
}