/* 
==========================================
PAGES
==========================================

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

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

/*
------------------------------------------
STARTPAGE
------------------------------------------
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;
	background:#0f1111;
	background-image:url(../../../images/blue/mainbg.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	
}

/* hover and link settings */
a { outline:none;color:#000;text-decoration:underline; }
a:hover { color:#999;text-decoration:underline;}
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:1002px;
	min-height:800px;
	background-image:url(../../../images/blue/mainbg.jpg);
	background-repeat:no-repeat;;
	background-position:center top;
	
}

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

#menuwrapper {
	position:absolute;
	width:700px;
	height:60px;
	top:0px;
	left:65px;
}

#logowrapper {
	position:absolute;
	width:280px;
	height:100px;
	top:62px;
	left:60px;
}

#contentwrapper {
	position:relative;
	width:902px;
	margin-top:50px;	
	height:567px;
	margin-left:auto;
	margin-right:auto;
	
}

#footerwrapper {
	position:relative;
	width:800px;
	margin-top:20px;
	min-height:60px;
	margin-left:auto;
	margin-right:auto;
}

#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;
	background-image:url(../../../images/blue/logosmart.png);
	background-repeat:no-repeat;
}

a:hover.logolink { filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}

.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;	
	padding-left:19px;
	padding-right:19px;
	padding-top:10px;
	padding-bottom:9px;
	color:#fff;
	font-size:13px;
	font-size:11px;
	border-right:1px solid #1a93bf;
	text-decoration:none;
}
.topmenu li a:hover { 
	
	background:#1fb1db;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}


/*
------------------------------------------
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:200px;float:left;padding:0px;}
.footerlinks li { list-style:none;padding-bottom:4px;}
.footerlinks li a { font-size:11px;padding-bottom:4px;color:#fff;text-decoration:none;}
.footerlinks li a:hover { text-decoration:underline;}
.footerheader { list-style:none;font-size:16px;font-weight:lighter;padding-bottom:22px;color:#fff;}


/*
------------------------------------------
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;
	background:#fff;
}


/*
------------------------------------------
PHONE WRAPPER
------------------------------------------
Showing the phone with the nice slideshow.
------------------------------------------
*/

#phonewrapper {
	position:absolute;
	width:310px;
	height:680px;
	top:30px;
	right:60px;
	background-image:url(/images/blue/iphone.png);
	background-repeat:no-repeat;
}

/* Easy
 Slider */

#slider { margin-top:108px;margin-left:64px}
	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:186px;
		height:279px;
		overflow:hidden; 
		}	
	
		
	/* numeric controls */	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;
		margin-top:80px;
		margin-left:125px;
		width:100px;
		
	
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:4px;
		float:left;
		list-style:none;
		text-indent:-9999px;
		display:inline;
		
		}
	ol#controls li a{
		float:left;
		height:9px;
		width:28px;
		background-image:url(../../../images/blue/dot01.png);
		background-repeaT:no-repeat;
		color:#fff;
		margin-right:10px;
		text-decoration:none;
		display:block;
		}
	ol#controls li.current a{
		background-image:url(../../../images/blue/dot02.png);
		background-repeaT:no-repeat;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
/* // Easy Slider */

#phonedownload {
	margin-left:auto;
	margin-right:auto;
	width:180px;
	position:relative;
	margin-top:60px;
	text-align:center;
	z-index:1;
}


/* 
------------------------------------------
FORMS
------------------------------------------
*/
.forms { 
	margin-top:25px;
}

/* Stylen van de input velden. Mooi afronden */
.forms input, .forms textarea {
	padding: 5px;
	width: 230px;
	font-family: Helvetica, sans-serif;
	font-size: 1em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
	color:#666;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* Hoogte van het textarea bepalen */
.forms textarea {
	height: 90px;
	width: 350px;
}

/* Altijd leuk. Focus kleurtje voor de dynamiek. */
.forms textarea:focus, .forms input:focus {
	border: 2px solid #00a3dc;
}

/* De knop vormgeven */
.forms input.button {
	width: 150px;
	background-color: #72ccd4;
	cursor:pointer;
	color:#333;
	font-size:larger;
}

/* De labels, toch belangrijk. Men moet weten wat waar ingevuld dient te worden. */
.forms label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1em;
	font-family:tahoma,helvetica,sans serif;
	cursor:pointer;
}

/*
------------------------------------------
TABLE
------------------------------------------
------------------------------------------
*/

/* Bepalen hoe groot een tabel moet worden */
table { 
	width:800px;
	border-collapse:collapse;
}

/* Headers van de tabel. */
table th { 
	font-family:tahoma,heletica,sans serif;
	background:#19799b;
	border:1px solid #19799b;
	font-weight:100;
	color:#fff;
	text-align:left;
	padding-left:2px;
	height: 20px;
}

/* Een even rij vormgeven */
.even td { 
	font-family:tahoma,heletica,sans serif;
	border:1px solid #19799b;
	padding:3px;
	font-size:11px;
	vertical-align:top;
}

/* Een oneven rij vormgeven */
.odd td { 
	font-family:tahoma,heletica,sans serif;
	border:1px solid #19799b;
	padding:3px;
	font-size:11px;
	vertical-align:top;
	background:#ebebeb;
}


/* 
Meer is niet nodig voor een tabel. We hebben deze met kleine verfijningen
net netjes neergezet. Bijvoorbeeld de margin binnen een TD. Voor de rest,
het blijft toch een tabel :-)
*/

/* Data Pager */
.pager {text-align:center;padding:6px 0px;font-weight:bold; width:200px;} 
.pager a
{
	border:solid 1px #ccc;
	color:#666;
	background-position:0px -20px;
	line-height:18pt;
	padding:5px;
	text-decoration:none;
}

/* common */
.alert {background-color: #ffe8dd;border:1px solid #ffb997;color:#C00000;margin-bottom: 10px;padding:2px; font-size:smaller;}
.error
{
	background-color: #ffe8dd;
	border: 1px solid #ffb997;
	color: #C00000;
	margin-bottom: 10px;
	padding: 6px 30px 6px 6px;
}
.success
{
	background-color: #c4e99b;
	border: 1px solid #bbbbbb;
	color: green;
	margin-bottom: 10px;
	padding: 6px 30px 6px 6px;
}


/* tabelloos 
label{float: left;width: 120px;margin-bottom:6px;}
.textbox {border: solid 1px #aaa; width: 200px; margin-bottom: 6px;}
.dropdown {border: solid 1px #aaa; width: 204px; margin-bottom: 6px;}
.button {border: solid 1px #aaa;}
.bold {font-weight:bold;}
*/

/* grids */
.grid {border: solid 0px #015679;padding:2px;}
.headerstyle {background-color: #015679; color:#ffffff; font-size:larger;font-weight:bold;}
.rowstyle {padding: 2px; background-color: #eeeee2; vertical-align:top;}
.altrowstyle {padding: 2px; background-color: #fff; vertical-align:top;}