/* 
==========================================
CENTER PAGE WEBSITE TEMPLATE
==========================================

Title: 			Center Wtemp
Description: 	The is a centered website template
Version: 		1.0
Author: 		Mike van der Ent
Date: 			1 February 2010
Website:		www.qrcommunicatie.nl

==========================================
==========================================
*/

/*
------------------------------------------
MAIN SETTINGS
------------------------------------------
sets the main params for the 
website.
------------------------------------------
*/


/* document without any margings and paddings, the width or height */
html { margin:0px;padding:0px;}

/* basic settings for standard behaviours */
body {
	margin:0px;
	padding:0px;
	font-family:tahoma,helvetica,sans serif;	
	color:#000;
	font-size:11px;
}

/* hover and link settings */
a { outline:none;color:#549af0;text-decoration:none; }
a:hover { color:#c14561;text-decoration:none;}
a:active { }
a:visited { }
a img { border:0px;}

/* setting the main forms */
input { padding:4px;font-size:13px;font-weight:bold;color:#999;border:1px solid #999;}

.clear { clear:both; }


/*
------------------------------------------
WRAPPER SETTINGS
------------------------------------------
We use wrappers, we build the main structure
of the website. 
------------------------------------------
*/

#mainwrapper {
	position:relative;
	margin-left:auto;		/*center the div */
	margin-right:auto;		/*center the div */
	width:1000px;
	min-height:400px;
	
}

#topwrapper {
	position:relative;
	width:1000px;
	height:120px;
	background:#dcdcdc;
}

#menuwrapper {
	position:absolute;
	width:700px;
	height:60px;
	top:12px;
	right:0px;
	background:#ebebeb;
}

#logowrapper {
	position:absolute;
	width:280px;
	height:100px;
	top:12px;
	left:0px;
	background:#cccccc;
}

#contentwrapper {
	position:relative;
	width:1000px;
	margin-top:20px;	
}

#footerwrapper {
	position:relative;
	width:1000px;
	margin-top:20px;
	background:#dcdcdc;
	min-height:60px;
}

#copywrapper {
	position:relative;
	width:976px;
	padding:12px;
	text-align:right;
	color:#999;
}


/*
------------------------------------------
TOPWRAPPER
------------------------------------------
Setting the logo and the topmenu. The logo
we would add as an background image in
This preview. This way the website is
disabled proof!
------------------------------------------
*/

a.logolink {
	display:block;
	width:280px;
	height:100px;
	text-indent:-9999px;
}

a:hover.logolink { background:#ebebeb;}

.topmenu { margin:0px;padding:0px;width:700px;}
.topmenu li { list-style:none;display:inline;padding:0px;margin:0px} /* display:inline special to the IE 6 users */
.topmenu li a {
	display:block;
	float:left;
	margin-left:10px;
	width:70px;
	background:#999;
	padding:10px;
	color:#fff;
	font-size:13px;
}
.topmenu li a:hover { 
	color:#999;
	background:#fff;
}


/*
------------------------------------------
CONTENTWRAPPER
------------------------------------------
Setting the content. If it is a huge
website we just add some main information
in this CSS document. CSS per page will
be split up. The smaller the document
the easier to find and change things.
------------------------------------------
*/

#leftcontent {
	width:600px;
	background:#dcdcdc;
	float:left;
	margin-right:50px;
	min-height:200px;
}

#rightcontent {
	width:300px;
	background:#dcdcdc;
	float:left;
	margin-left:50px;
	min-height:300px;
}


/*
------------------------------------------
FOOTERWRAPPER
------------------------------------------
Filling the Footer. What can I tell about
this part?
------------------------------------------
*/

.footerlinks { margin:0px;padding:0px;width:210px;float:left;padding:20px;}
.footerlinks li { list-style:none;padding-bottom:4px;}
.footerlinks li a { font-size:11px;padding-bottom:4px;}
.footerheader { list-style:none;font-size:16px;font-weight:lighter;padding-bottom:12px;}


/*
------------------------------------------
IE6 NOT SUPPORTED MESSAGE
------------------------------------------
IE 6 is so outdated!
------------------------------------------
*/

#oopsie {
	width:400px;
	padding:12px;
	border:1px solid red;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	margin-bottom:40px;
}