/* ///////////////////////////////////////////////////////////////////////////////

 THE BAZEL GROUP, INC. - SCREEN.CSS
 
 Author: Converging Matter 
 Website: http://www.convergingmatter.com
 Version: 1.0
 
 Layout based on Blueprint (http://code.google.com/p/blueprintcss/)
 

/////////////////////////////////////////////////////////////////////////////// */


/* // RESET BROWSER - DON'T TOUCH ///////////////////////////////////////////// */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
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%;
  font-family: inherit;
  vertical-align: baseline;
}

body { line-height: 1.5; }

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }


/* // TYPOGRAPHY ///////////////////////////////////////////// */

body {
	font: normal 75%/140% "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #EDE9DC;
	background-color: #000;	
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #FFF; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; height: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1em; }
h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img {
  margin: 0;
}


/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a:focus, 
a:hover     { color: #FF9900; }
a           { color: #EDE9DC; text-decoration: none; border-bottom: 1px dotted #C96D20; padding-bottom: 1px; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre,code    { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } 


/* Listslist-style-image: url(../img/star_bullet.gif);
-------------------------------------------------------------- */

li ul, 
li ol       { margin:0 1.5em;}
ul, ol      { margin: 0 1.5em 0em .5em; }

ul          { list-style-type: none; }
ol          { list-style-type: decimal; }
li			{
	padding: .3em 0;
	background-image:url(../img/star_bullet.gif);
	background-repeat: no-repeat;
	background-position: 0 7px;
	padding-left: 14px
}

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* Tables
-------------------------------------------------------------- */

table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; background: #333; }
th,td       { padding: 4px 10px 4px 5px; }
tfoot       { font-style: italic; }
caption     { background: #eee; }


/* Misc type classes
-------------------------------------------------------------- */

.center		{ text-align:center; }
.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }



/* // LAYOUT /////////////////////////////////////////////////// */

/* A container should group all your columns. */
.container {
	width: 760px;
	margin: 0 auto;
	/* Adds fade to black image */
	background: #040404 url(../img/footer_bgd.png) repeat-x left bottom;	
}

#background {
	background: url(../img/content_bgd.png) repeat-x left top;
	margin: 0;
	padding: 25px;
}
	
.contentContainer { margin: 0px 25px 30px; padding: 25px; }
#masthead {	position: relative; }


/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5{ float:left; margin-right: 20px; }
div.span-4 { float:left; margin-right: 60px; }

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 223px; }
.span-2  { width: 466px; }
.span-3, div.span-3 { width: 710px; margin: 0 0 2em; }
.span-4, div.span-4 { width: 325px; margin: 60px;}
.span-5 { width: 150px; }


/* Main Navigation
-------------------------------------------------------------- */

ul#mainNav	{ font-size: 11px; text-align: center; background: #151611 url(../img/nav_bgd.png) repeat-x left bottom; height: 18px; margin: 0; padding: 5px 0; }

ul#mainNav li	{ width: 100px; margin: 0; padding: 0; list-style: none; display: inline; background:none;}
ul#mainNav li a, ul#mainNav li a:link {	color: #EDE9DC; text-decoration: none; padding: 6px 3.5em 8px; border: none;}
ul#mainNav li a:visited	{ color: #FFFBEE; }
ul#mainNav li a:hover	{ color: #FFF; background: #C96D20 url(../img/hover_bgd.png) repeat-x bottom; }
ul#mainNav li a#current { background: #C96D20 url(../img/hover_bgd.png) repeat-x bottom; font-weight: bold; }
ul#mainNav li.separator { color: #4B4638; }
	
	
/* Content
-------------------------------------------------------------- */

/* Intro: Testimonial/Quote */
#intro { text-align: center; margin: 0 25px 30px; }
#intro h2 { font: 1.5em/1.25em Georgia, "Times New Roman", Times, serif; letter-spacing: .03em; font-style:italic; }
/* Intro: Name */
#intro p { font-size: .8em; }


/* About Page Specific */
#about .span-1 ul {	padding-left: 10px;	}


/* Contact Specific */
p.border-left { margin-top: 6px; margin-left: 4px;	padding-left:8px; border-left: 1px solid #8C8982; }

.span-3 .spacer{
	border-bottom: 1px dashed #696762;
	border-right: none;
	border-top: none;
	border-left: none;
	padding-bottom: 20px;
}

/* styles more link */
p.more { font-size: 11px; margin:0; padding:10px 0 8px; clear: both; }	

/* Footer
-------------------------------------------------------------- */

#footer	{ color:#696762; margin: 0 0px 30px; padding: 5px 0; border-top: 1px solid #FFF; }


/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column. 
   Note: Might need to make adjustments before using */ 
.box 	{ padding: 1.5em; margin-bottom: 1.5em; background: #E5ECF9; }

/* Use this to create a horizontal ruler across a column. */
hr {
	clear: both;
	float: none;
	width: 100%;
	height: 1px;
	margin: 0 0 0;
	padding-top: 20px;
	border-top: 1px dashed #696762;
	border-right: none;
	border-bottom: none;
	border-left: none;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix, .container {	display: inline-block; }
* html .clearfix, * html .container { height: 1%; }
.clearfix, .container {	display: block; }

/* Regular clearing apply to column that should drop below previous ones. */
.clear 		{ clear:both; }
.left 		{ float:left; }
.right 		{ float:right; }