/* 
Site:	To Young to Work
Name:	Typo
Author:	RBurnie

Notes:
	All elements have been given a default of (in layout.css):
	* {
		margin: 0;
		padding: 0;
	}
	In most cases no need to alter as padding for sections handled in layout.css
*/
div.debugger {
	border: solid;
	padding: 4px;
	background: #FFFFCC;
	color: red;
	position: absolute;
	top:-180px;
	right: -400px;
	width: 200px;
}

body {
	font: 0.8em Arial, Helvetica, sans-serif;
	line-height: 1.6em;
}
h1 {
	margin: 0;
	font-size: 1.6em;
	line-height: 1em;
	margin-bottom: 0.2em;
	padding: 0.5em 0 0.2em 0;
	text-transform: uppercase;
	
	font-family: Arial Black, Arial, Helvetica, sans-serif;
	color:#5F5F5F;
}
.sIFR-active h1 {
	font-size: 25px;
	padding: 0;
}
div#branding h1 {
	width: 195px;
	height: 101px;
	position: absolute;
	bottom: 0px;
	left: 10px;
	text-indent: -999em;
	background: transparent url(../images/stamp.gif) no-repeat;
}
div[id=branding] h1 {
	background: transparent url(../images/stamp.png) no-repeat !important;
}
h2 { /* currently same as h1 */
	margin: 0;
	font-size: 1.6em;
	line-height: 1em;
	margin-bottom: 0.2em;
	padding: 0.5em 0 0.2em 0;
	text-transform: uppercase;
	
	font-family: Arial Black, Arial, Helvetica, sans-serif;
	color:#5F5F5F;
}
.sIFR-active h2 {
	font-size: 25px;
	padding: 0;
}
h2 a {
	color: #383732;
	color: #5F5F5F;
	text-decoration: none;
}
h3 {
	margin: 0;
	font-size: 1.4em;
	line-height: 1.1em;
	margin-bottom: 0.5em;
	padding: 0.2em 0;
	text-transform: uppercase;
	
	color:#5F5F5F;
}
.sIFR-active h3 {
	font-size: 18px;
	padding: 0;
}
h3 a {
	color: #5F5F5F;
	text-decoration: none;
}
h4 {
	margin: 0;
	font-size: 1.3em;
	line-height: 1.25em;
	margin-bottom: 0.5em;
	padding: 0.2em 0;
	text-transform: uppercase;
	
	color:#5F5F5F;
}
.sIFR-active h4 {
	font-size: 13px;
	padding: 0;
}
h4 a {
	color: #5F5F5F;
	text-decoration: none;
}
h5 {
	margin: 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	line-height: 1.42em;
	margin-bottom: 0.5em;
	text-transform: uppercase;
	color: #717068;
}
/* no flash replace for h6 - too small 
.sIFR-active h5 {
	font-size: 6px;
}*/
h5 a {
	color: #717068;
	text-decoration: none;
}
h6 {
	margin: 0;
	font-size: 0.85em;
	line-height: 2.14em;
	margin-bottom: 0.5em;
	text-transform: uppercase;
	color: #717068;
}
/* no flash replace for h6 - too small */
h6 a {
	color: #717068;
	text-decoration: none;
}

div#left h1, div#right h1,
div#left h2, div#right h2,
div#left h3, div#right h3,
div#left h4, div#right h4 {
	font-weight: normal;
}

p, ul, blockquote, pre, td, th, label {
	margin: 0;
	font-size: 1em;
	line-height: 1.66em;
	margin-bottom: 1.66em;
}

a, a:link {
	color: #53483a;
}
a:hover, a:active {
	color: #bf373d;
}
/* UL styles for ie 6 */
div#content ul li {
	margin-left: 15px;
	padding-left: 10px;
	list-style-image: url(../images/ul-li.gif);
}
/* UL styles for other browsers */
div#content ul > li,
div#content ol ul > li {
	list-style-image: none;
	
	list-style-type: none;
	background: transparent url(../images/ul-li.gif) 0 8px no-repeat;
	/* image is 13 * 6 px */
	padding-left: 20px;
	margin-left: 2px;
}
ol li {
	list-style-image: none;
	list-style-type: decimal;
	background-image: none;
	padding-left: 0;
	margin-left: 25px;
}
table {
	border-collapse: collapse;
	border: 2px solid #E8F3E8; /* color of blue lines in bg */
	background: #FAFAED; /* page bg color */
	margin-bottom: 1.66em;
}
th {
	padding: 5px;
	border: 1px solid #E8F3E8; /* color of blue lines in bg */
	background: #fff;
	color: #383732;
	text-align: center;
}
td {
	padding: 5px;
	border: 1px solid #E8F3E8; /* color of blue lines in bg */
}
caption {
	margin: 0;
	font-size: 0.9em;
	line-height: 2.14em;
	color: #717068;
	font-weight: bold;
}

img {
	border: 0;
}
div#random_images {
	text-align: center;
	width: 150px;
	margin-left: 23px;
}
div#random_images img {
	background-color:#FFFFFF;
	border:1px solid #D6D5C7;
	border-width: 0 1px 1px 0;
	display:block;  
	margin:4px auto;
	padding:4px; 
}
div#random_images img:hover {
	background: #FFF799;
}

div#branding p.tagline {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 350px;
	font-weight: bold;
	font-size: 1.5em;
	color: #fff;
	text-transform:uppercase;
	padding: 1em;
}
.sIFR-active div#branding p.tagline {
	font-size: 10px;
}

/* STICKIES **********************************************************************
Useage:
		<div class="sticky sticky-[color]">
		<div class="wrapper">
		<div class="inner-wrapper">
			...
		</div>
		</div>
		</div>
*/
/* sticky text elements */
div.sticky p{ 
	margin: 0;
	padding: 5px;
}
/**/div.sticky h1,
div.sticky h2,
div.sticky h3,
div.sticky h4,
div.sticky h5,
div.sticky h6 { 
	margin: 0;
	padding: 5px;
}
/* 
YELLOW STYLE 
overall size and sticky edges */
div.sticky-yellow {
	/* width = 175px */
	width: 169px;
	padding-left: 5px;
	margin-bottom: 2em;
	border-right: 1px solid #ddd78a;
	background: transparent url(../images/sticky-yellow-left.gif) top left no-repeat;
	/* for testing
	background-color: red;
	*/
}
div[class~=sticky-yellow] { /* non ie6 alpha transparent background */
	background-image: url(../images/sticky-yellow-left.png) !important;
}
div.sticky-yellow > div.wrapper {
	padding-bottom: 3px;
	/* bottom image only for non ie6 (it doesnt support bottom well - or at all, not sure) ie6 given pixel border for faux shaddow*/
	background: transparent url(../images/sticky-yellow-bottom.png) bottom left no-repeat;
}
/* the actual content */
div.sticky-yellow div.inner-wrapper {
	background: #fff799;
	padding: 0 5px;
	border-bottom: 1px solid #ddd78a; /* ie6 */
}
div[class~=sticky-yellow] div.inner-wrapper {
	border-bottom: 0 !important;
}
/* 
WHITE STYLE 
overall size and sticky edges */
div.sticky-white {
	/* width = 172px*/
	width: 169px;
	padding-left: 2px;
	margin-bottom: 2em;
	border-right: 1px solid #d6d5c7;
	background: transparent url(../images/sticky-white-left.gif) top left no-repeat;
	/* for testing
	background-color: blue;
	*/
}
div[class~=sticky-white] { /* non ie6 alpha transparent background */
	background-image: url(../images/sticky-white-left.png) !important;
}
div.sticky-white > div.wrapper {
	padding-bottom: 5px;
	/* bottom image only for non ie6 (it doesnt support bottom well - or at all, not sure) ie6 given pixel border for faux shaddow*/
	background: transparent url(../images/sticky-white-bottom.png) bottom left no-repeat;
}
/* the actual content */
div.sticky-white div.inner-wrapper {
	background: #fff;
	padding: 0 5px;
	border-bottom: 1px solid #d6d5c7; /* ie6 only */
}
div[class~=sticky-white] div.inner-wrapper {
	border-bottom: none !important;
}

/* 
BLUE STYLE 
overall size and sticky edges
only bottom img
*/
div.sticky-blue {
	/* width = 180px*/
	width: 179px;
	margin-bottom: 2em;
	border-right: 1px solid #a9b1a0;
	padding-top: 5px;
	background: transparent url(../images/sticky-blue-top.gif) top left no-repeat;
	/* for testing
	background-color: green;
	*/
}
div[class~=sticky-blue] {
	background-image: url(../images/sticky-blue-top.png);
}
div.sticky-blue > div.wrapper {
	padding-bottom: 5px;
	/* bottom image only for non ie6 (it doesnt support bottom well - or at all, not sure) ie6 given pixel border for faux shaddow*/
	background: transparent url(../images/sticky-blue-bottom.png) bottom left no-repeat;
}
/* the actual content */
div.sticky-blue div.inner-wrapper {
	background: #cee7f1;
	padding: 0 5px;
	border-bottom: 1px solid #a9b1a0; /* ie6 only */
}
div[class~=sticky-blue] div.inner-wrapper {
	border-bottom: 0 !important;
}
p.hugeobject {
	clear: both;
	text-align: center;
	padding: 0.3em;
	margin: 0;
	line-height: 1em;
	font-size: 0.9em;
	color: #fff;
}
p.hugeobject a,
p.hugeobject a:hover,
p.hugeobject a:visited {
	color: #fff;
}