/*
	Description	:	Notacreative main style
	Author		:	Ryan Roberts - http://ryanroberts.co.uk
*/

.two-col,
.three-col{
	margin-bottom: 36px!important
}
.four-col {
	margin-bottom: 46px!important
}
.entry {
	margin-bottom: 26px!important /* 0px!important */
}


/*
	GENERAL STYLING
________________________________________________________________________________________ */

body {
	font-family: Georgia, Times, "Times New Roman", Serif;
	background: #000;
}
.smallcaps		{ font-size: 85%;
				  color: #fff;  	
				  font-weight: bold;
				}
h1, h2, h3,
h4, h5, h6 {
	font-size: 1.8em;
	color: #666;
	margin: 0 0 4px
    }

a,
a:link,
a:active,
a:visited {
    color: #000;
    background: #fff;
    }
    
a:hover,
a:focus {
	color: #fff;
	background: #000;
    }

strong {
	font-weight: 400;
	color: #fff
}



/* Presentational Classes */
	
.highlight01 {
	color: #29ABE2
}

.highlight02 {
	color: #FF00FF
}

.alignRight {
	text-align: right;
}

.alignleft {
	text-align: left;
}

.alignCenter {
	text-align: center;
}

.extraLargeText {
	font-size: 180%
}

.largeText {
	font-size: 150%
}

.mediumText {
	font-size: 125%;
	line-height: 170%;
}

.closeSpaceTight {
	letter-spacing: -4px;
}

.closeSpaceTighter {
	letter-spacing: -6px;
}

   
/*
	MAIN STRUCTURE
	This styles the main structural elements and should be relativly simple to understand.
________________________________________________________________________________________ */


#content {
	width: 100%;
	background: #fff url(../images/interface/body.png) repeat-x center top;
}


#header {
	position: relative;
	text-align: center;
	width: 960px;
	height: 13em;
	padding: 5.5em 0 0;
	margin: 0 auto;
	z-index: 100
}


#content-primary,
#content-listing {
	position: relative;
	width: 960px;
	margin: 0 auto;
	z-index: 100
}


#content-listing {
	width: 827px;
	margin: 0 auto;
}


#footer {
	position: relative;
	width: 100%;
	margin: 200px 0 0;
	background: #000;
}


#lipsum {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 2px;
	color: #4d4f4f;
	width: 100%;
	padding: 0;
	margin: 0;
	z-index: 1;
	opacity: .8;
}



/*
	SUB STRUCTURE
	The following is more specific styling of elements within the main structure.
	I keep font styling within their specific areas as typography is an intrinsic 
	part of a site structure. However type could be seperated out easily.
________________________________________________________________________________________ */


/*	HEADER
------------------------------------- */

/* Main Logo */
#header .brand-logo {
	z-index: 1;
}

#header a {
	color: #fff;
	background: none;
}

#header .not {
	display: block;
	position: relative;
	font-size: 1667%;
	font-weight: 700;
	margin: -0.536em 0 0 -2.15em;
	letter-spacing: -.2em;
	padding: 0;
	color: #000;
	z-index: 120;
}

#header .leftQuo {
	position: absolute;
	top: 1.77em;
	margin: 0 0 0 -.26em;
	font-size: 40%;
	color: #000;
	z-index: 120;
}

#header .MrT {
	font-size: 70%;
	margin: 0 0 0 -.01em
}




#header .acreative {
	position: relative;
	display: block;
	font-size: 135.8%;
	letter-spacing: -2px;
	margin-top: -8.8em;
}

#header small i {
	font-size: 165%;
}

#header sup {
	vertical-align: text-top;
	font-size: 70%
}

#header h1 .largeText {
	font-size: 170%
}



/* Paragraph lines below the main logo */
#brand-strapline {
	position: relative;
	z-index: 2000!important;
	margin: 0px 0px 0px 35px;
	padding: 0px 0px 0px 0px;
}

	#header p {
		margin: 0;
	}

	#header .site-description {
		font-size: 88%;
		color: #fff;
	}
	
	#header .strap {
		font-size: 160%;
		color: #808080;
		letter-spacing: -0.05em;
		margin: .4em 0;
	}
	
	#brand-strapline .raquo,
	#brand-strapline .laquo {
		color: #fff;
	}	
	
	.strap strong {
		font-size: 80%;
		font-weight: 700;
		color: #fff;
	}



/*	MAIN CONTENT

	The main top half content made up of multiple columns
------------------------------------- ------------------- */


/* Setting the paragraph bottom margin to be smaller than normal */
.two-col p,
.three-col p,
.four-col p {
	margin-bottom: 10px;
}


/* The first two top columns */
.two-col {
	width: 960px;
}

	.two-col .col1,
	.two-col .col2 {
		width: 462px;
		float: left;
	}

	.two-col .col2 {
		float: right;
	}


/* The second set of 3 columns */
.three-col {
	width: 858px;
	margin: 0 auto;
}

	.three-col .col1,
	.three-col .col2,
	.three-col .col3 {
		float: left;
		width: 262px;
		margin: 0 12px;
	}


/* The final set of 4 columns */
.four-col {
	width: 850px;
	margin: 0 auto;
}

	.four-col .col1,
	.four-col .col2,
	.four-col .col3,
	.four-col .col4 {
		float: left;
		width: 188px;
		margin: 0 12px;
	}



/* 
	LISTING CONTENT

	This is content just below the main column layout and appears similar to a news listing.
___________________________________________________________________________________________ */

/* An individual entry, you'll see this wraps around the entry content in the HTML */
#content-listing .entry {
	position: relative;
	min-height: 15em;
	padding: 0 120px 0 212px;
	clear: both;
}

/* This is the unique heading for the entry itself */
#content-listing h2 {
	font-size: 140%;
	color: #333;
	font-weight: 700;
	text-transform: uppercase;
}

/* This is the text displayed off to the left */
#content-listing .entry h3 {
	position: absolute;
	top: 0;
	left: 0;
	width: 188px;
	height: 116px;
	font-size: 2200%;
	color: #333;
	text-indent: -40%; 
	line-height: .5;
	text-align: right;
	overflow: hidden
}

	#content-listing .entry h3 span {
		display: block;
		margin-top: -20px;
	}

#content-listing p,
#content-listing ul,
#content-listing ol {
	font-size: 160%;
}


/* 
	FOOTER 
________________________________________________________________________________________ */

#content-footer {
	position: relative;
	width: 828px;
	padding: 0 66px;
	margin: 0 auto;
	z-index: 100!important
}

#randomText {
	position: absolute;
	top: -180px;
	left: 50%;
	width: 960px;
	height: 337px;
	margin: 0 0 0 -480px;
	background: transparent;
	z-index: 1;
}


#flash {
	position : relative; 
	float: left;
	width : 960px;
	margin: -250px auto 0;
	padding: 0; 
	z-index : -1;
}


.footer-links {
	width: 188px;
	float: left;
	padding-top: 24px;
}

	.footer-links li {
		margin: 0 0 2px;
	}


#footer-info {
	width: 400px;
	float: left;
	color: #fff;
	padding-top: 24px;
	margin: 0 0 0 24px;	
}

	#footer-info p,
	#footer-info ul,
	#footer-info ol {
		font-size: 140%;
	}


.footer-contact {
	width: 188px;
	float: right;
	padding: 0;
	text-align: center
}

	.footer-contact a span {
		display: block;
		font-size: 1000%;
		line-height: 1.2;
		text-transform: uppercase;
	}
	
	.footer-contact a {
		color: #fff!important;
		background: transparent;
	}
	
	.footer-contact a:hover,
	.footer-contact a:focus {
		color: #7f7f7f!important;
	}
	
	.footer-contact a:active,
	.footer-contact a:active span {
		color: #fff!important;
		text-decoration: line-through;
	}


/*	MISC - KEEP THIS STUFF AT THE BOTTOM
________________________________________________________________________________________ */

.button {
	font-size: 12px;
	font-weight: 700;
	color: #fff!important;
	padding: 2px 4px;
	background: #4d4d4d!important;
}

	.button:hover,
	.button:focus {
		color: #262626!important;
		background: #ccc!important;
	}

	.button:active {
		text-decoration: line-through;
	}



#footer .button {
	display: block;
	padding: 4px 8px;
	background: #37393A;
}

	#footer .button:hover,
	#footer .button:focus {
		color: #262626;
		background: #ebebeb;
	}

	#footer .button:active {
		text-decoration: line-through;
	}



/*	REMOVE FROM PAGE */

.nav-access {
	position: absolute!important;
	top: -9999em!important;
	left: -9999em!important;
}


/*	FLOAT CLEARING */

div:after,
p:after,
#header:after,
#content:after,
#content-primary:after,
#content-secondary:after,
#footer:after,
.nav:after,
fieldset:after,
form:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}


/* FLOAT CLEARING FOR INTERNET EXPLODER */

p,
#header,
#content,
#content-primary,
#content-secondary,
#footer,
.nav,
fieldset,
form {
	zoom: 1;
}








/* Tooltips */

.qtip .qtip-content{
   font-size: 1.4em;
}