/* - - - - - - - - - - - - - - - - - - - - -

Title : 		GLOBAL.CSS style sheet: copy default.css styles and update!
Author : 		$Author$
URL : 			http://www.OURPROJECT.NL
Modified : 		$LastChangedDate$ - SVN: $Revision$
- - - - - - - - - - - - - - - - - - - - - */


/* -----------------------------------------
	1: RESET [start from scratch]
----------------------------------------- */

/* 
	Latest version of the Eric Meyer Reset:
	http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
	
	Updates -> see SWDL UPDATE's:
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	_font-size: 100.01%; /* EIGHTMEDIA UPDATE: http://css-discuss.incutio.com/ */
	color: #768393;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}

/* remember to define focus styles! */
:focus {
/*	outline: 0;*/
}

/* remember to highlight inserts somehow! */
ins {text-decoration: none; background: #FFFFCC;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* -----------------------------------------
	1.1: GENERIC FIXES [fixes clearing issues with floats]
	http://www.positioniseverything.net/easyclearing.html
----------------------------------------- */
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix {display:inline-block;}

/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */


/* -----------------------------------------
	2: GENERICS [Generic type, .classes, etc]
----------------------------------------- */
body{
	background: #121c26 url('../img/1x12pixWhiteLine.gif') repeat-x top left;
	font-size: 62.5%;
	font-family: Arial, Helvetica, Verdana, sans-serif;
}

/* -----------------------------------------
	TYPOGRAPHY
----------------------------------------- */
div{font-size: 1em;} /* = 10px */

p, dl, td, th, li, pre, code, kbd, samp, pre, tt, input{
	font-size: 1.3em; /* 13px */
}
p{
	line-height: 1.6em;
	margin-bottom: 1em;
}

strong{font-weight: bold;}
em{font-style: italic;}
cite{font-style: italic;}
abbr, acronym { cursor: help; text-transform: uppercase; font-size: 85%; letter-spacing: .1em; border-bottom: 1px dotted #000;}
pre { white-space: pre; }
pre * { font-size: 1.3em; line-height: 1.5em; white-space: pre; }
blockquote { border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; color: #666; }
blockquote > *:before { content: "\201C"; }
blockquote > *:after { content: "\201D"; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }

address,
blockquote{margin: 1.5em 0;font-size: 1.3em;line-height: 1.5em;}
blockquote p{margin: 1.0em;}

hr { display: block; background: #000; color: #000; width: 100%; height: 1px; border: none; }

/* Cascading font size should remain same! */
/* TODO: Check this out? Necessary?! */
td td,li ul li,li ol li,td p,blockquote p,dd p, li p,ul li ul li,ul li ul li p,ol li ol li,ol li ol li p{
	font-size: 1.0em!important;
	line-height: 1.5em!important; /* TODO: Check this out? Necessary?! */
}

p{font-size: 1.1em;}
#caseInfo p{
	color: #fff;
	font-size: 1.6em;
}
#caseText p{
	color: #fff;
	font-size: 1.4em;
	line-height: 1.8em;
	width: 520px;
	margin-bottom: 30px;
}


/* -----------------------------------------
	GENERIC CLASSES
----------------------------------------- */
.alignRight{text-align: right;}
.alignLeft{text-align: left;}
.alignCenter{text-align: center;}
.floatRight{float: right;}
.floatLeft{float: left;}
.error{
	background: transparent;
	color: red;
}
.success{
	background: transparent;
	color: green;
}

.twitter_name{
	margin: 0;
	font-size: 1.2em;
}
	.twitter_update_list{
		font-size: 1.1em;
	}
/* -----------------------------------------
	HEADERS
----------------------------------------- */
h1, h2, h3, h4, h5, h6{
	font-family: Arial, verdana, sans-serif;
	font-weight: normal;
	margin: 1em 0 0.5em 0;
}
h1{font-size: 2.4em;color: #768393; text-transform: uppercase; display: none;}
h2{font-size: 1.8em;color: #fee046; text-transform: uppercase;}
h3{font-size: 1.1em;color: #64707f; text-transform: uppercase;}
h4{font-size: 1.2em;color: #64707f;font-weight: bold;}
/*
h5{font-size: 1.3em; color: #768393;font-weight: bold; font-style: italic;}
h6{font-size: 1.3em; color: #768393;font-weight: bold;}*/
#clients h3{
	margin-top: 19px;
}
#tweets h3{
	background: transparent url('../img/tweet.gif') no-repeat 90px 0px;
	padding-top: 16px;
	padding-bottom: 6px;
}
/* -----------------------------------------
	LINKS
----------------------------------------- */
a:link,
a:visited,
a:hover,
a:active{
	color: #81cce0;
	text-decoration: underline;
}
a:hover,
a:active{
	color: #81cce0;
}
h3 a:link,
h3 a:visited,
h3 a:hover,
h3 a:active{
	text-decoration: none;
}
	#tweets a:link,
	#tweets a:visited,
	#tweets a:hover,
	#tweets a:active{
		text-decoration: none;
		font-weight: bold;
	}
		#tweets .twitter_update_list a:link,
		#tweets .twitter_update_list a:visited,
		#tweets .twitter_update_list a:hover,
		#tweets .twitter_update_list a:active{
			display: block;
			font-size: 1.3em;
			color: #768393;
			text-decoration: none;
		}
		
		#tweets a:hover{ text-decoration: underline;}
		
p#back a:link,
p#back a:visited,
p#back a:hover,
p#back a:active{
	text-transform: uppercase;
	padding-left: 10px;
	background: transparent url('../img/bg_back.gif') no-repeat center left;
	text-decoration:none;
	color: #509dc5;
	margin-top: 10px;
	display: block;
	font-size: 0.9em;
}
#caseText a:link,
#caseText a:visited,
#caseText a:hover,
#caseText a:active{
	text-decoration: none;
	color: #509dc5;
}

/* -----------------------------------------
	LISTS
----------------------------------------- */
ul, ol{ 
	list-style-type: disc; 
	list-style-position: outside; 
	margin: 2em 0;
	margin-left: 1.5em;
}
ol{list-style-type: decimal;}
	ul li, ol li{margin: 0.5em 0;}

/* horizontal lists */
ul.horizontal,
ol.horizontal{
	list-style-position: inside;
	list-style-type: none;
	margin: 0;
}
	ul.horizontal li,
	ol.horizontal li{
		display: inline;
		float: left;
		margin: 0;
	}

	/* -----------------------------------------
		NAVIGATION
	----------------------------------------- */
	#navigation ul{
		width: 100%;
		border: 1px solid red;
		text-transform: uppercase;
		background: transparent url('/static/img/nav_bg.gif') repeat-x bottom left;
	}
		#navigation ul li{margin: 0;}
			#navigation ul li.active{}
			#navigation ul li.last{}
			
			#navigation ul li a:link,
			#navigation ul li a:visited,
			#navigation ul li a:hover,
			#navigation ul li a:active{
				display: block;
				padding: 1em 2em;
				border: 1px solid green;
			}

			#navigation ul li a:hover,
			#navigation ul li a:active{}

				#navigation ul li.active a:link,
				#navigation ul li.active a:visited,
				#navigation ul li.active a:hover,
				#navigation ul li.active a:active{}


/* definition lists */
dl{
	margin: 0.5em 0;
	line-height: 2em;
}
	dl dt{font-weight: bold;}
	dl dd{margin-left: 1.0em;}

/* -----------------------------------------
	IMAGES
----------------------------------------- */
img.left{float: left;margin: 0 1em 0 0;}
img.right{float: right;margin: 0 0 0 1em;}

img#case{
	border: 2px solid #fff;
	float: left;
	margin: 0 20px 20px 0;
}

/* -----------------------------------------
	BASE STRUCTURE (Div frame)
----------------------------------------- */

.outerWrapper{
	height: 600px;
	background: url('../img/bg_main.jpg') no-repeat top center;
}

	/* NOTE: this is a class! So that it can be re-used. */
	.innerWrapper{
		width: 800px;
		margin: 0 auto;
		padding-bottom: 50px;
	}
	#header{ 
		height: 332px;
		padding-top: 40px;
	}
	.case #header{
		height: 123px;
	}
		.box{
			width: 33.3%;
			text-align: center;
			float: left;
			margin-top: 115px;
		}
		
		.box p{ 
			color: #ADEAFC;
			font-size: 1.3em;
		}
	#caseInfo{}
	/*---------------------------------------------
	- Slideshow
	---------------------------------------------*/	
	.wrapper{
		background: url('../img/1x12pixWhiteLine.gif') no-repeat top center;
		padding: 50px 0 0 0;
	}
	
	#slideshow{
	padding: 0;
	background: #121c26;
	width: 600px !important;
	height: 355px;
	overflow: hidden;
	position: relative;
	border-right: 3px solid white;
	background-color: #FFFFFF;
	}
	
	.kwicks{margin: 0;}
	.kwicks li {  
		width: 119px;
		margin-right: 0; 
		list-style-type: none;
		background-color: #ffffff;
		border: 3px solid white;
	}
	
	.kwicks li.first-kwick{ border-bottom: none; }
	.kwicks li.last-kwick{ border-right: none; }
	
		.kwicks li .info{ display: none; }
		.kwicks li.active .info{ display: block; }
		.kwicks .info{
			background: transparent url('../img/slideshow_info_bgr.gif') no-repeat top left;
			padding-left: 1em;
			text-transform: uppercase; 
			position: absolute;
			right: 0;
			top: 295px;
			color: white;
			line-height: 26px;
			width: 300px;
			_width: 310px;
		}
		
/*		.info img{ float: left; margin-left: -6px;border: 1px solid red;}

http://demos.mootools.net/Fx.Elements
http://www.moord.it/examples/kwick_menu/

*/		
		.info em{ color: #ffe146; font-style: normal;}
		
		.info a{ font-size: .8em; margin-left: 20px; margin-right: 10px;}
		
		
	/*---------------------------------------------
	- Clients
	---------------------------------------------*/
	
	#clients{
		padding-top: 8px;
		float: left;
		width: 550px;
		_height: 295px;
		margin-bottom: 60px;
	}
		#clients img{
			margin: 5px 12px 5px 0;
		}
	#tweets{ width: 250px; float: right;}
	
	#partOf{
		float: left;
		width:270px;
	}
	
	#support{
		width: 275px;
		float: left;
	}
	#footer{}

	/*---------------------------------------------
	- vCard
	---------------------------------------------*/
	
	.vcard h4 a{text-decoration: none;}

/* -----------------------------------------
	TABLES
----------------------------------------- */
table{
	margin: 2em 0;
	width: 100%;
	border: 1px solid #000;
	text-align: left;
}
	table caption{
		margin-bottom: -1em; /* table top-margin/2 reversed! */
		margin-top: 2em; /* table top-margin/2 reversed! */
		font-size: 1.2em;
		font-style: italic;
		color:#666;
		text-align: right;
	}
	table tr{}
	table thead{}
		table thead tr{background: #000; color: #FFF;}
			table thead tr th,
			table tfoot tr th{
				border-bottom: 1px solid #000;
				padding: 0.2em 0.5em;
				font-weight: bold;
			}
			table thead tr td,
			table tfoot tr td,
			table tfoot tr th{
				padding: 0.2em 0.5em;
				border-bottom: 1px solid #000;
				border-right: 1px solid #000;
			}
	table tbody{}
		table tbody tr{}
			table tbody tr th{
				border-bottom: 1px solid #000;
				border-right: 1px solid #000;
				padding: 0.2em 0.5em;
				font-weight: bold;
			}
			table tbody tr td{
				padding: 0.2em 0.5em;
				border-bottom: 1px solid #000;
				border-right: 1px solid #000;
			}

/* -----------------------------------------
	FORMS
----------------------------------------- */
form{}
	legend,
	label{
		font-weight: bold;
		display: block;
		color: #3f3f3f;
	}

	fieldset.form{
			padding: 1.5em;
			width: 450px;
		}
		form p{margin-bottom: 1.0em;}
			form .help_text{display:block;font-style: italic;}

			/* 	FORM ELEMENTS

				input.classnames are basically a hack because of browsers
				that do not support CSS2/3 selectors such as:

				input[type='hidden'] { display:none; }
			*/
			input,
			textarea{
				width: 300px;
				padding: 0.2em 0.5em;
				line-height: 1.5em;
				font-size: 1.0em;
				font-family: Arial, Helvetica, Verdana, sans-serif;
			}
			input:focus,
			input.focus,
			textarea:focus,
			textarea.focus{background: #FFFCDF;}

			input[type='button'], input[type='submit'], input[type='checkbox'], input[type='image'], input[type='radio'], input[type='reset'], select, button { cursor: pointer; }
			input[type='hidden'] { display:none; }

			/* No width etc. on certain types of input... */
			input[type='button'], input[type='submit'], input[type='reset'], input[type='image']
			input.button{width: auto;}
				/* ... Checkboxes and radio buttons */
				input[type=checkbox],
				input[type=radio],
				input.check,
				input.radio{
					background: transparent;
					width: auto;
					float: left; /* !! */
					border: none;
					margin: 0;
				}

			select{}
				select option{}
			button{}