/* ---------------------
	Title: KD Secure - main screen stylesheet
	Filename: template.css
	Author: One Pica Inc, Boston MA
	
	Table of Contents:
		Searchstring (Section Name)				Description
		
		=General (General Styles):				Set font sizes, Page backgrounds, link behaviors, etc
		=Master (Master #container Styles):		Placing, sizing, styling the main container
		=Branding (Branding Styles):			Logos, taglines, branding info
		=Nav (Navigation Styles):				The navigation bar; internal and external
		=Forms (Form Styles)					Set appearance of forms, inputs, buttons, etc
		=Multicol (Multi-Column Styles):		The cases where the content needs to be in multiple columns
		=Headings (Heading Styles):				<h1> through <h6>
		=Content (Content Styles):				The main content of the page
		...Further style sections go here...
		=Footer (Credit/Footer Styles):			The footer
		=Uni (Universal Styles):				Classes and elements that apply throughout ('clear', 'blue', etc)
	
	Common Color Table:
		White:									#FFFFFF
		Text Dark Blue:							#263546
		Text Med Blue:							#4a5c72
		Text Light Blue:						#a5bddb
	
	Thanks To:
		CSS structure/commenting: http://www.huddletogether.com/2006/02/16/practical-web-development-tips/
		Markup structure: http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
		Stylesheet searchstring flags: http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html
---------------------- */

/* =General
---------------------- 
	General Styles applied to 'normalize' things
	Notes:
		'Em' styling generally following (http://www.clagnut.com/blog/348/) from this point 10px=1em, 11px=1.1em, etc
		100.01% font size from (http://www.communitymx.com/content/article.cfm?page=5&cid=FAF76)
		Beginning "global reset" styles, to clear troublesome browser defaults, 
		are based on (http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/) 
		Note that most form elements are omitted; style those separately, further down.
---------------------- */
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,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ul {
	list-style: none;
}
ol {
	margin-left: 21px;
	margin-bottom: 4px;
}
	ol li {
		padding-bottom: 6px;
	}
/* Begin Actual Site Styles */
html {
	font-size: 100.01%; /* Ensures font consistency across browsers */
	height: 100%;
}
body {
	color:#FFFFFF;
	font-size: 10px; /* Sets base font-size for browsers that resize text correctly */
	line-height: 1.5; /* Sets base leading for lines of text */
	background:url('../images/page_bkg.jpg') 0 0 repeat-x #45474d;
	font-family: Arial, sans-serif;
	height: 100%;
}
p {margin-bottom: 1.5em; line-height: 1.5}
div, span, a {
	line-height: 1
}

input, select, th, td {font-size: 1em}

h1 {font-size: 2em} /* 24px */
h2 {font-size: 1.5em} /* 18px */
h3 {font-size: 1.25em} /* 15px */
h4 {font-size: 1em} /* 12px */
h5 {font-size: 1em} /* 12px */
h6 {font-size: 1em} /* 12px */

strong {font-weight: bold; line-height: 1.5;}
em {font-style: italic}
sup {font-size: 50%; vertical-align: super;}

/* Basic link styles */
a, a:link {
	color: #88A3C4;
	text-decoration: underline;
}
a:visited {
	color: #88A3C4;
}
a:hover, a:active {
	color: #88A3C4;
	text-decoration: underline;
}
a:focus {
	outline: none; /* Removes dotted outline in Firefox */
}

/* =Master
---------------------- 
	Master Container
	Notes:
		margin: 0px auto; centers the container horizontally except in IE5, which is fixed in the body tag
---------------------- */
#page-container {
	position: relative;
	margin: 0px auto;
	padding: 0;
	width: 100%;
	font-size: 1.2em; /* 12px (based on value from body) */
	text-align: left; /* Normalize alignment; unfix all browsers from fix in IE stylesheet */
}

/* Skip link: This is the very first link anywhere on the page; by tabbing to it or hitting accesskey 2, a user can skip the header/navigation of a page and go directly to the page content. It is normally 'hidden' by being positioned far, far off the page; bringing it into focus with Tab makes it visible. */
	#skiplink a {
		position: absolute;
		top: -1000px;
		left: -2000px;
	}
		#skiplink a:focus, #skiplink a:active {
			position: absolute;
			margin: 0;
			top: 0;
			left: 0;
			display: block;
			padding: 0;
			background: #000;
			color: #fff;
			font-weight: bold;
		}
		#skiplink a:hover { 
		}
/* =Header */
#header {
	height:83px;
	width:100%;
	background:url('../images/header_bkg_big.gif') 0 0 repeat-x;
}	
.container {
	width:650px;
	margin:0px auto;
}
/* =Branding
----------------------
	Branding styles: Usually the logo and tagline
	Notes:
		Image replacement: Usually Phark Method (http://www.mezzoblue.com/tests/revised-image-replacement/)
---------------------- */
#branding {
	float: left;
	width: 154px;
	height: 47px;
	margin-top:17px;
}
	#branding-logo {
		cursor: pointer;
		margin: 0;
		width: 154px;
		height: 47px;
		background: url('../images/kdsecure_logo.gif') 0 0 no-repeat;
	}
		#branding-logo h1 {
			text-indent: -5000px;
			overflow: hidden;
			width: 100%;
			height: 100%;
			line-height: 1;
			padding: 0;
		}
			#branding-logo h1 a {
				display: block;
				width: 100%;
				height: 100%;
			}
	#branding-tagline {
		display: none;
	}
		#branding-tagline h2 {
			text-indent: -5000px;
			overflow: hidden;
			width: 100%;
			height: 100%;
			line-height: 1;
			padding: 0;
		}

/* =Nav
----------------------
	Navigation styles
	Notes:
		Navigation belongs in an UL tag with <ul><li><a></a></li></ul> as the markup scheme.
		Keep each of the below #elements as divs, and put the UL inside them
		If there's a Left-Hand navigation, use #nav-section, give it a width & float it left
---------------------- */
#nav {
	position: absolute;
	top: 73px;
	right: 0;
}
	#nav-main {
	font-size:1.1em;
	color:#999999;
	float: right;
	display: inline;
	width: 485px;
	padding: 22px 0 0 0;
	}
		#nav-main ul {
	list-style: none outside;
	padding: 3px 0 3px 0;
	float:right;
			
		}
			#nav-main ul li {
	position: relative;
	float: right;
	display: inline;
	width: auto;
	border-left: 1px solid #bbb;
	padding: 0 7px;
	margin:0;
	line-height: 1;
			}
			#nav-main ul li.inactive{
/*				border-left: 1px solid #999999; */
			}
			#nav-main ul li.first{
				border-left: 0px;
			}	
			#nav-main ul li.last{
				padding-right: 0px;
			}	

				#nav-main ul li a {
	display: block;
	color:#FFFFFF;
	padding:0;
	margin:0;
	text-decoration:none;
	line-height: 1;
				}
				#nav-main ul li a:hover {
					text-decoration:underline;
				}
#nav-main ul li a:hover span {
	text-decoration:underline;
}

	#nav-footer {
		font-size:1em;
		color:#666666;
		text-align: center;
	}
		#nav-footer ul {
			list-style: none;
			display: inline;
		}
			#nav-footer ul li {
				display: inline;
				border-left: 1px solid #b7b9bd;
				padding: 0 6px;
				line-height:1.2em;
			}
			#nav-footer ul li.inactive{
				border-left: 1px solid #666666;
			}
			#nav-footer ul li.first{
				border-left: 0px;
			}	
				#nav-footer ul li a {
					color:#b7b9bd;
					padding:0;
					margin:0;
					text-decoration:none;
					line-height:1.2em;
				}

#messaging {
		width:100%;
		background: url('../images/messaging_bkg.jpg') 0 0 repeat-x;
	}
	#messaging.videopage {
		color:#31353e;
	}
	#messaging .innerborder-bottom {
		background: url('../images/messaging_inner_border.gif') left bottom repeat-x;
	}
	#messaging .flash {
		width:948px;
		height:389px;
		margin:0px auto;
	}
	#messaging .container {
		padding:25px 0 10px 0;
		}
	#messaging h2{
		color:#f6cb21;
		border-bottom:1px solid #999999;
	}
	#messaging p {
		font-size:1.2em;
	}
	#messaging p.normalsize { font-size:1em; }

/* =Content
----------------------
	Main Content styles
	Notes:
		
		Font-size is inherited, so some math will be necessary to size child elements up or down correctly
---------------------- */
#content {
	font-size: 1em; /* Inherits 12px from #container */
	padding-top: 25px;
	width:100%;
}

/* =Multicol
----------------------
	Multi-Column Content styles
	Notes:
		These columns should be used for text within #content.
		Values are in percentages to start off -- remember that the IE stylesheet has different values.
		If you need "pixel-perfect", you'll have to stop using percentages and use actual pixels
---------------------- */
	.twoColumnLeft {
		float:left;
		clear:none;
		width: 305px;
		margin-right:40px
	}
	.twoColumnRight {
		clear:none;
		float:left;
		width: 305px;
	}


/* =Headings
----------------------
	<h1> through <h6> styles
---------------------- */
h1 {}
h2 {
	font-size:1.5em;
	border-bottom:1px solid #999999;
	padding-bottom:0.5em;
	margin-bottom:25px;
	}
h3 {
	color:#f6cb21;
	font-size:1.2em;
	margin-bottom:0.5em;
	line-height: 1.5;
	}
	h3 span {
		color:#999999;
	}
h4 {
	font-size: 2.3em;
	font-weight: normal;
	color: #fff;
	padding-bottom: 8px;
	margin-bottom: 3px;
}
h5 {
	font-weight: bold;
	font-weight:normal;
	font-size:1.4em;
	line-height: 1.3em;
	color: #4a5c72;
	color:#F6CB21;
	padding: 2px 0 1em;
	padding: 2px 0 .75em;
	margin-bottom: 0.5em;
}
	h5.year-divider { }

h6 {
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1.5em;
	margin-bottom: 1.5em;
	color:#999999;
	margin-top:1em;
}
/* Demo Boxes */
.demobox {
	width:100%;
	margin-bottom:25px;
}
.demobox img{
	float:right;
	border:1px solid #666666;
	padding:2px;
	margin:0px 0px 15px 15px;
}
		.watchnow {
			text-indent: -5000px;
			overflow: hidden;
			width: 85px;
			height: 52px;
			line-height: 1;
			padding: 0;
			background:url('../images/watchnow_button.png') 0 0 no-repeat;
			display:block;
			margin-top:10px;
		}
/* Video */
.video {
	float:left;
	display: inline;
	margin-right:20px;
	width: 400px;
}
.video-desc {
	float: left;
	display: inline;
	width: 228px;
}
	#messaging .video-desc p {
		font-size: 1em;
	}
.featured-videos{
}
.thumbnail{
	color:#FFFFFF;
	padding:0px 0px;
	}
.thumbnail img{
	float:left;
	border:1px solid #666666;
	padding:2px;
	margin:0px 15px 15px 0px;
}
.thumbnail a:hover img {
	border:1px solid #88A3C4;
}
a:hover .thumbnail {
	xbackground:#3b404b;
}

/* Bulleted List */
ul.bulleted { margin-bottom:1.5em;}
	ul.bulleted li {
		background:url('../images/bullet.gif') 0 7px no-repeat;
		padding-left:10px;
		margin-bottom:7px;
		line-height:1.5;
	}


/* =Footer
----------------------
	Credit/footer styles: Usually the copyright/company info
	Notes:
---------------------- */
#siteinfo {
	color: #b7b9bd;
	font-size: .9em;
	margin-top: 30px;
	padding: 0px 0px 25px 0px;
}
	#siteinfo .container{
		text-align:center;
	}
	#siteinfo #legal { /* Usually the copyright notice */
		float: left;
		width: 50%;
	}
	#siteinfo #links { /* Usually Terms, Privacy and Accessibility */
		float: left;
		width: 50%;
		text-align: right;
	}
		#links a {
			color: #a2a2a2;
			text-decoration: underline;
		}
			#links a:hover {
				text-decoration: none;
			}
/* =Forms
----------------------
	Form styles
	Notes:
		A <p></p> should always enclose every label-input (or label-select) pair.
		Widths are in % to start, so that they scale, but they are the attributes most likely to change.
		Remember -- the IE stylesheet has different percentage widths to start.
---------------------- */
form {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}
	fieldset {
		border: 0px solid;
		padding: 0;
		margin: 0 0 1.4em 0;
	}
	form p {
		display: block;
		clear: both;
		margin: 0 0 0.8em 0;
		padding: 0;	
	}
		form label {
			display: inline;
			float: left;
			width: 37%;
			padding: 0 3% 0 0;
			margin: 0;
			line-height: inherit;
		}
		form input, form select, form textarea {
		   margin: 0;
		   padding: 0;
		   width: 59.2%; /* CLOSE to full width; use pixels for the real thing */
		   font-size: 1em;
		   border: solid 1px #999;
		   border-bottom-color: #ccc;
		   background-color: #fff;
		   font-family: Arial, sans-serif;
		}

		form input {height: 1.3em}
		form select {width: 59.5%; height: 1.5em}  /* Selects are not the same as inputs */
		form textarea {height: 6em}
		
		/* Radio buttons */
		form input.radio, form input.radiobtn {
			text-align: left;
			width: 1.3em;
			margin: 0.3em 0.2em 0 0;
			padding: 0;
			border: none;
			background: none;
		}
		form .radiotext {
			float: none;
			margin: 0 1em 0 0;
		}
		
		/* Check boxes */
		form input.ckbx, form input.checkbox {
			text-align: left;
			width: 1.2em;
			margin: 0.3em 0.2em 0 0;
			padding: 0;
			border: none;
			background: none;
		}
		
	form p.indent { /* For buttons or text that need to align with inputs/selects */
		margin-left: 40%;
	}
	form p.xspa { /* "extra space after" */
		margin-bottom: 2.0em;
	}
	form .req {
		color: red;
	}
	form input:focus {
		/* however we want the focused field to look */
	}
	form p img {
		margin-top: 6px;
		border: 1px solid #ccc;
	}
	form input.submit, button { /* There are lots of default values to fix */
		border: 1px solid #263546;
		padding: 2px 6px;
		background: #E4E4E4;
		color: #263546;
		font-size: 1em;
		font-weight: bold;
		height: auto;
		width: auto;
		cursor: pointer;
		font-family: inherit;
	}
	form input.submit:hover, button:hover { /* IE6 can't see these, too bad */
		background-color: #ECECEC;
	}
	form input.submit:active, button:active { /* Button 'feedback' behavior */
	}
	

/* =Uni
----------------------
	Universal styles: Styles that apply to elements found throughout the site
	Notes:
		The best example of this is the "clear" div
---------------------- */
.clear {clear: left}
.clear-right {clear: right}
.clear-both {clear: both}
.clear-none {clear: none;}

.bold {font-weight: bold}
.em {font-style: italic}

span.clear-both {
	display: block;
}