/*
grid
page-width 960px
menu margin-left 50px
menu-item width 150px met 2 px middle margin
*/

html, body{
  margin: 0;
  background-color: #ddd;
  font-family: "Georgia", serif;
}

img{
  border:0
}

#canvas{
  width: 960px;
  margin: 0 auto;
  background-color: #FFF;
}
#header{
  height: 167px;
}

#page
{
	background-image: url("../images/backgrounds/brouwersgracht.png");
	background-repeat: no-repeat;
	height: 560px;
	float:left;
  width: 960px;
}
#footer{
  height: 100%;
  padding:0px 50px 10px 50px;
	margin-bottom: 50px;
  background-color: #fff;
  
}
#footer ul{
  list-style-type: none; 
  padding:0;
  margin:0;
  width:910px;
}
#footer ul li{
  padding:0;
	font-size: 10px;
	font-family: "Arial", serif;
  line-height:20px;
  float:left;
}
#footer span{
  color:#860E04;

}
#menu{
  margin-bottom:2px
}
#menu ul{
  padding: 0;
  margin: 0 0 0 50px;
  list-style-type: none
}
#menu ul li{
  width: 150px;
  float:left;
  background-color: #72797e;
  margin-right:2px;
  font-size:13px;
}
#menu ul li:last-child{
  margin-right:0px
}
#menu ul a{
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 2px 2px 2px 10px;
}

#menu ul a:hover, #menu ul a.active{
  color:#9ca1a5;
  background-color: #fff;
}
#menu ul a.active{
  font-weight: bold;
  padding-bottom: 4px;

}
#top{
	float:left;
	margin-top: 2px;
	margin-left: 50px;
  width: 606px;
  background-color: #851770;
  opacity: .7;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
}
#top p{
  color: #FFF;
  opacity: 1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
}
#left, #middle, #right, #map
{
  float: left;
}
#left, #map{	
  margin-left: 50px;
	clear:left;
}
#map{
  width: 606px
}
#middle
{
	margin-left: 2px;
}
#right
{
	margin-left: 2px;
}
.no-margin{
  margin-left: 0 !important;
}
.no-padding{
  	padding: 0px !important;
}
.content{
  background-color: #fff;
	padding: 10px;
}
.small{
  width: 150px;
}
.medium{
	width: 302px;
}
.large{
	width: 454px;
}
.large.no-margin{
	width: 458px !important;
}
.extra-large{
	width: 600px;
}
.high{
  height: 290px;
}
.extra-high{
  height: 429px;
}
.extra-high.no-padding{
	height: 449px !important;
}
.low{
  height: 117px;
}
.error {
  float: left;
  border: 5px solid red;
  background-color: #FFF;
  margin: 150px 325px;
  width: 260px;
  padding: 20px;
  text-align: center;
}

ul.lawers{
  padding:0;
  margin:0;
  list-style-type:none;
}
ul.lawers li a{
  font-size:13px;
  text-decoration: none;
  color:#9ca1a5;
  padding-left:0px;
  display:block;
  padding-bottom: 15px;
}
ul.lawers.index li a{
  color:#31353c;
}

ul.lawers li a:hover, ul.lawers li a.active{
  color:#860E04;
}
ul.lawers li a.active{
  font-weight: bold
}

ul.lawers-matrix{
  padding:0;
  margin:0;
  list-style-type:none;
  padding:1px;
}
ul.lawers-matrix li{
  padding:0;
  margin:1px;
  float:left;
  width: 150px;
  height: 147px;
}

ul.lawers-matrix li a:hover img{
  border: 2px solid #860E04;
  margin: -2px;
}

.bordered{
  border: 2px solid #860E04;
  margin: -2px;
}
ul.contact{
  padding:0;
  margin:0;
  list-style-type:none;
  width:304px;
}
ul.contact li{
  margin:0;
  margin-right:2px;
  margin-bottom:2px;
  width:130px;
  height: 67px;
  float: left;
}
img.portrait{
  margin: 2px
}
.lightgrey{
  color:#9ca1a5 !important;
}
.middlegrey{
  color:#72797e !important;
}
.darkgrey{
  color:#31353c !important;
}
.darkgrey a{
  color:#31353c !important;
  text-decoration: none;
}
.darkgrey a:hover{
  color:#860E04 !important;
}
.content p{
  color:#31353c;
  font-size: 14px;
  margin: 0 0 10px 0;
}
p.label{
  margin: 0;
}
p.big{
  font-size: 18px;
  width:350px;
}