/* ------------------------------------ *
 * CSS                                  *
 * Author  : S. Meijer                  *
 * Company : AG Nova Architecten        *
 * Website : AGN v 1.0                  *
 * ------------------------------------ */


/** ---------------------------------------------------------
/**
/**    Global
/**
/** --------------------------------------------------------- */

@import url(./page.css);
@import url(./contactform.css);

*{
	padding:0;
	margin:0;
}

html, body, button, input, option, select, textarea, td, th {
	color: #666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
}

body {
	background: #FFFFFF url(../img/bg.body.jpg) repeat-x 0px -50px;
    font-size: 75%;
    color: white; /* #CCCCCC */;
    margin: 0;
    padding: 0;
    text-align: center;
}

h1,h2,h3,h4,h5,h6 {
color: #CCC;
display: inline;
}
	
h1 { font-size: 10pt; font-weight: normal; 	}
h2 { font-size: 10pt; font-weight: bold; 	}
h3 { font-size: 11pt; font-weight: normal;  }
h4 { font-size: 11pt; font-weight: bold; 	}
h5 { font-size: 13pt; font-weight: normal; 	} 
h6 { font-size: 13pt; font-weight: bold; 	}

p {
	margin: 0 0 10px 0;
	text-align: justify;
}

a {}
a:hover {}
a.tip, a.tip:hover {}
.external_link {}
a.more {}
a.more:after {}
a.more:hover {}

ul { margin: 0; padding: 0; }
li { margin: 0; padding: 0; }

/*
 *   ContainerWrapper and Container
 */
.color1 { color: #FF5500; }
.color2 { color: #FF0077; }
.color3 { color: #DD00FF; }
.color4 { color: #00FFFF; }
.color5 { color: #00FF5A; }

.hidden {
	display: none;
	visibility: hidden;
}

.left {
	float: left;
}
.right {
	float: right;
}

p.lightbox {
	display: block;
	height: 75px;
	width: 75px;
	margin: 0;
	padding: 0;
	line-height: 0;
	vertical-align: top;
}
p.lightbox a {
	font-size: 1px;
	margin: 0;
	padding: 0;
	line-height: 0;
	vertical-align: top;
}
p.lightbox img {
	margin-left: 10px;
	margin-right: -10px;
	margin-top: 0;
}

#containerWrapper {
	width: 1000px;
	position: absolute;
	top: 0px;
	left: 50%;
	margin-left: -500px;
	text-align: left;
	
	
	min-height: 100%;
	height: auto;
}

#container {
	position: relative;
	top: 75px;
	width: 1000px;
	height: 800px;
}

body #container {
	background: #000000 url(../img/bg.container.jpg) no-repeat bottom right;
}

body.pageCat_ #container {
	background: #000000 url(../img/bg2.container.jpg) no-repeat bottom right;
}

#container .main {
	visibility: hidden;
}

.print {
	visibility: hidden;
}

/**
 * Top menu structure
 */

#topMenu, .topMenu {
	position: absolute;
	top: -20px;
	right: 0px;
	height: 20px;
	text-align: right;
}

#topMenu li, .topMenu li {
	list-style: none;
	display: inline;
	border-right: 1px solid #4D4D4D;
	padding-right: 5px;
	margin-right: 5px;
}

#topMenu li.first, .topMenu li.first {
}

#topMenu li.last, .topMenu li.last {
	border: 0px;
	padding: 0px;
	margin: 0px;
}

#topMenu a, .topMenu a {
	color: #4D4D4D;
	font-weight: normal;
	font-size: 8pt;
	text-decoration: none;
}

#topMenu a:hover, .topMenu a:hover {
	text-decoration: underline;
	color: #000000;
}

/*
 *    Footertekst & logo
 */

#footer {
	position: absolute;
	bottom: -20px;
	left: 0px;
	height: 20px;
	width: 1000px;
	color: #4D4D4D;
	font-weight: normal;
	font-size: 8pt;
	text-decoration: none;
}
#footer a {
	text-decoration: none;
	color: #4D4D4D;
}

#footer div.left {
	position: absolute;
	bottom: 0px;
	left: 0px;
	
	display: block;
	height: 20px;
	width: 400px;
	
	text-align: left;
}

#footer div.right {
	position: absolute;
	bottom: 0px;
	right: 0px;
	
	display: block;
	height: 20px;
	width: 400px;

	text-align: right;
}


#logo {
	position: absolute;
	bottom: 20px;
	left: 50px;
	height: 45px;
	width: 900px;
	background: url(../img/logo-trans.png) no-repeat bottom left;	
}

/*
 *    Main menu structure
 */

#mainMenu {
	position: absolute;
	top: 15px;
	left: 50px;
	height: 35px;
	width: 900px;
}

#mainMenuInner {
	position: absolute;
	bottom: 10px;
	height: 20px;
	width: 900px;
}

#mainMenuInner span.left {
	float: left;
	display: block;
	height: 20px;
	width: 400px;
	font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;

}

#mainMenuInner span.right {
	display: block;
	float: right;
	text-align: right;
	height: 20px;
	width: 300px;
}


#mainMenu li {
	list-style: none;
	display: inline;
	margin: 0 0 0 18px;
}

#mainMenu li.first { margin: 0; }
#mainMenu li.last  { }

#mainMenu a {
	color: #4D4D4D;
	font-weight: bold;
	font-size: 11pt;
	text-decoration: none;
}

#mainMenu a:hover {
	text-decoration: underline;
}

/* menu deco */

/* menu hover deco */
#mainMenu a.buttonWonen:hover		{ color: #FF5500; }
#mainMenu a.buttonWerken:hover		{ color: #FF0077; }
#mainMenu a.buttonWinkelen:hover	{ color: #DD00FF; }
#mainMenu a.buttonLeren:hover		{ color: #00FFFF; }


/*
 *    Submenu
 */
 
#subMenu {
	position: absolute;
	top: 50px;
	left: 50px;
	height: 35px;
	width: 900px;
	background: #333333;
}

#subMenuTopStroke {
	font-size: 1px;
	position: absolute;
	height: 5px;
	width: 100%;
	background: #333333;
}

.pageCat_wonen		#subMenuTopStroke { background: #FF5500; }
.pageCat_werken		#subMenuTopStroke { background: #FF0077; }
.pageCat_winkelen	#subMenuTopStroke { background: #DD00FF; }
.pageCat_leren 		#subMenuTopStroke { background: #00FFFF; }
		
#subMenuInner {
	position: absolute;
	bottom: 5px;
	height: 20px;
	width: 600px;
	margin-left: 10px;
}

/*
 *    Submenu innerright
 */
 
#subMenuInnerRight {
	position: absolute;
	bottom: 5px;
	right: 0px;
	height: 20px;
	width: 240px;
	margin-right: 10px;
	text-align: center;
	font-size: 9pt;
}

#subMenuInnerRight span {
	position: relative;
	display: block;
	float: left;
	width: 50px;
	height: 20px;
	background: url(../img/button.bg.jpg) no-repeat top left;
}

#subMenuInnerRight span.empty,
#subMenuInnerRight span.emptyPage {
	visibility: hidden;
}

/* for the buttons at project overview */
#subMenuInnerRight #linkE,
#subMenuInnerRight #linkP,
#subMenuInnerRight #linkN {
	margin: 2px 8px 0 8px;
	width: 100px;
	height: 20px;
	background: url(../img/bigButton.bg.jpg) no-repeat top left;
	
}

#subMenuInnerRight span.nextPage {
}
	
#subMenuInnerRight span.C {
	margin: 0 40px 0 40px;
	opacity: 1.00; 
	filter: alpha(Opacity=100); 
	-moz-opacity: 1.00;	
}

#subMenuInnerRight span a{
	text-decoration: none;
	color: #CCCCCC;
	display: block;
	width: 100%;
	height: 100%;
	margin-top: 2px;
}

#subMenuInnerRight span {
	opacity: 0.25; 
	filter: alpha(Opacity=25); 
	-moz-opacity: 0.25;
}

#subMenuInnerRight span:hover {
	opacity: 1.00; 
	filter: alpha(Opacity=100); 
	-moz-opacity: 1.00;	
}

#___subMenuInnerRight span.P a { background: url(../img/button.prev.jpg) no-repeat 3px 2px;  }
#___subMenuInnerRight span.C a {															 }
#___subMenuInnerRight span.N a { background: url(../img/button.next.jpg) no-repeat 32px 2px; }
/** ---------------------------------------------------------
/**    Content
/** -------------------------------------------------------- */

#content {
	position: absolute;
	top: 120px;
	left: 50px;	
	width: 900px;
	height: 600px;
}