/* 
Images location: /sites/img/name.jpg
ex: background: url(/sites/img/bgmid.png)
*/

* {	margin: 0;
	padding: 0;
}
html {   min-height: 100%;   
}

body {	font-family: 'Roboto Slab', serif;
	font-size: 0.95em; font-weight: normal; letter-spacing: 0.5px;
	background: #fff url(/img/bg.jpg) center top repeat-x;
	margin: 0 auto;	padding: 0;
	color: #666;
	max-width: 100%; position:relative;
}

/*h1 {	color: #999; border-bottom:2px solid #999; margin-bottom: 8px;
	font-size: 1.2em;
	font-family: 'Roboto Slab', serif;
	font-weight: bold;
}*/
h1 {	color: #666;margin-bottom: 14px;
	font-size: 1.2em;
	font-family: 'Roboto Slab', serif;
	font-weight: bold;
}
h1 a {
}
h2 {	color: #187caa;
	font-size: 0.95em;
	font-family: 'Roboto Slab', serif;
	font-weight: bold;
}
h3 {	color: #666;
	font-size: 0.8em;
	font-family: 'Roboto Slab', serif;
        font-weight: normal;
}
ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    background-image: url(/img/bullet.jpg);
    background-repeat: no-repeat;
    background-position: 0px 7px;
    padding-left: 14px;
}
/*img {
	max-width: 100%;
	height: auto;
	width: auto; border: 0;
           -moz-box-shadow: 1px 2px 5px #000;
           -webkit-box-shadow: 1px 2px 5px #000;
           box-shadow: 1px 2px 5px #000;
}*/
img {
	max-width: 100%;
	height: auto;
	width: auto; border: none;
}
a img {	border: none;
   max-width: 100%;
   height: auto;
	width: auto;
}
	
a {	color: #187caa;
	text-decoration: none; 
}
a:hover, a:active, a:focus { 	color: #b8b8b8;
	text-decoration: none;
}
h1 a {	color: #187caa;

}
p {
}
hr {	margin:5px 0 5px 0;
	background: #990000;
	height:5px; border:0;
}
                     /*//////////////////////  PAGE  ////////////////////*/


.wrapper { width: 900px;
	   margin: 0px auto;
}
.logo {	background: transparent url(/img/logo.png);
        height: 130px; width:410px;
        margin-left:10px; margin-top: 0px;
}
.menu { float: left; display: inline; list-style: none;
	   width: 100%; height: auto; 
           margin-top: 0px; margin-left: 0; 
           background:url(/img/menubg.jpg);
		   border-top-left-radius: 15px;
		   border-top-right-radius: 15px;
}
.menu p {padding-top: 7px;
}
.home {   float: left;
              height:36px; width:110px; border-right: #fff 2px solid;
			  margin-top: 0; margin-right: 0;  border-top-left-radius: 15px;
}
#bhome {   display:block; width:110px; border-top-left-radius: 15px;
	     font-weight: bold; text-align: center;
	     color:#fff; height: 36px;
}        #bhome:hover { background-image: url(/img/darkblue.png);}

.bedrijf {   float: left;
              height:36px; width:110px; border-right: #fff 2px solid;
			  margin-top: 0; margin-right: 0;
}
#bbedrijf {   display:block;width:110px;
	     font-weight: bold; text-align: center;
	     color:#fff; height: 36px;
}        #bbedrijf:hover { background-image: url(/img/darkblue.png);}

.assortiment {   float: left;
              height:36px; width:110px; border-right: #fff 2px solid;
			  margin-top: 0; margin-right: 0;
}
#bassortiment {   display:block;width:110px;
	     font-weight: bold; text-align: center;
	     color:#fff; height: 36px;
}        #bassortiment:hover { background-image: url(/img/darkblue.png);}

.recepten {   float: left;
              height:36px; width:110px; border-right: #fff 2px solid;
			  margin-top: 0; margin-right: 0;
}
#brecepten {   display:block;width:110px;
	     font-weight: bold; text-align: center;
	     color:#fff; height: 36px;
}        #brecepten:hover { background-image: url(/img/darkblue.png);}

.contact {   float: left;
              height:36px; width:110px; border-right: #fff 2px solid;
			  margin-top: 0; margin-right: 0;
}
#bcontact {   display:block; width:110px;
	     font-weight: bold; text-align: center;
	     color:#fff; height: 36px;
}        #bcontact:hover { background-image: url(/img/darkblue.png);}

.fb {   float: right; background-image: url(/img/fb.png);
              height:36px; width:30px;
			  margin-top: 0; margin-right: 35px;
}
#bfb {   display:block; width:30px;
	     color:#fff; height: 36px;
}        #bfb:hover { background-image: url(/img/fb2.png);}

.mainContent { float: left; width: 100%; border-radius: 15px;
	       margin: 0; 
}

.boxblack { float: left; display: inline; list-style: none;
	   width: 900px; min-height: 450px;
           margin-top: 0px; 
           background: #transparent; border-radius: 15px;
           -moz-box-shadow: 1px 2px 5px #666;
           -webkit-box-shadow: 1px 2px 5px #666;
           box-shadow: 1px 2px 5px #666;
}

.leftcontent { float: left; margin: 0; padding: 30px 20px 30px 40px; 
               min-height: 400px; width: 570px;
               background: url(/img/title.png) no-repeat;
}

.rightcontent { float: right; background: url(/img/rightbg.png) repeat-y;
              min-height:380px; width:270px;
				  padding: 30px 0px 30px 0px;
}

                 /*////////////  FOOTER   //////////////*/

div#footer { width: 100%; height: 50px; bottom: 0; background: #transparent;
             clear:both;    /* keep footer below content and menu */
             color: #666;
}
div#footer p { font-size: 0.65em;
               margin: 0; padding-top: 15px; text-align: center; 
}
div#footer p a { color: #666;  
}
div#footer p a:hover { 	color: #187caa;
}
div#footer a:active, a:focus{ font-weight: normal;
}

.clearfloat { 
	clear: both;
	height: 0;
	line-height: 0px;
}

/**********************************************************************************/
/******************* for 960px or less *******************************************/

@media screen and (max-width: 960px) {
body {background: #fff url(/img/bg960.jpg) repeat-x;}
.wrapper {   width:auto;
	     margin: 0px auto;
}
.logo { display: none;
}
.mainContent { float: left; min-width: 98%; min-height: 450px; margin-top: 130px;
}

.boxblack { float: left;
	   width: 98%; min-height:450px; margin-left: 1%;
}
.leftcontent {width: 70%; min-height: 410px;
              padding: 30px 0px 20px 2%;
}

.rightcontent { float: right; min-height: 100%; height: 100%; width: 26%;                 
				padding: 30px 1% 20px 1%;
}

}
/*********** for 768px or less *******************/
@media screen and (max-width: 768px) {
body {background: #fff url(/img/bg768.jpg) repeat-x;}
.wrapper { width:auto;
}
.logo { display: none;
}
.menu { height: auto; 
}
.menu p {padding-top: 7px; letter-spacing: 0px;
}
.mainContent { margin-top: 86px; 
}
.boxblack {
}
.leftcontent {
}
.home {width:16%;
}
#bhome { width:auto;
}
.bedrijf {width:16%;
}
#bbedrijf {width:auto;
}
.assortiment {width:20%;
}
#bassortiment {width:auto;
}
.recepten {width:16%;
}
#brecepten {width:auto;
}
.contact {width:16%;
}
#bcontact {width:auto;
}

.fb { width:30px; margin-right: 5%;
}
#bfb {   width:30px;
} 

}
/*********************** for 480px or less ***********************/
@media screen and (max-width: 480px) {
body {
}
.wrapper {
}
.mainContent {
}
.boxblack { float: left;
	   width: 96%; min-height:450px; margin-left: 2%;
}
.leftcontent {width: 93%; min-height: 450px;
              padding: 30px 3% 20px 3.5%;
}
.rightcontent { display: none;
}
.home {width:32.8%; border-bottom: #fff 2px solid;
}
#bhome { width:auto;
}
.bedrijf {width:32.9%; border-bottom: #fff 2px solid;
}
#bbedrijf {width:auto;
}
.assortiment {width:32.8%; border-right: none; border-bottom: #fff 2px solid;
}
#bassortiment {width:auto;  border-top-right-radius: 15px;
}
.recepten {width:32.8%;
}
#brecepten {width:auto;
}
.contact {width:32.9%;
}
#bcontact {width:auto;
}

.fb { width:30px; margin-right: 12%;
}
#bfb {   width:30px;
}


}

@media (min-width: 981px) {
	.headerPic {
		width: 50%;/*500px*/;
		float:left;
		padding:20px;
	}
	.websiteDescription {
		margin-left: 50%/*500px*/;
	}	
	

}
/**************************/
/*********************************End Media Queries****************************************/
/**************************/