/*  
Theme Name: Tar Ball
Theme URI: 
Description: A Wordpress remake of the original design by Arini Poutu.
Version: 0.1
Author: mr.snow
Author URI: 

*/

/* Begin Typography & Colors */
html {
	background-color : white;
}

body {
	font-size: 80%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	background-color: white;
	color: #333;
	text-align: center;
	margin: 50px auto;
	padding: 0; 
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
	margin-left : 18%;
	}

#page {
	margin : auto;
	padding: 0;
	background-color: white;
	text-align: center;
	width: auto;
	}

#header {
	margin: 0 0 0 3em; 
	padding: 0px 0 0 0; 
	text-align : left;
	clear : both;
}
	
#header h1 {
	margin-top : 0px ! important;
	padding-top : 0px ! important;
	margin-bottom : 0px ! important;
	padding-bottom : 0px ! important;
}

#header .alternative {
	color : #cccccc;
}

#content {
	margin : auto;
	font-size: 1em;
	float : left;
	text-align : left;
}

#content h3 {
	margin-top : 0;
}

#content h4 {
	margin-top : 0;
}

.narrowcolumn {
	float: left;
	padding: 0 0 20px 45px;
	margin: 0px 0 0;
	width: auto;
	}

.widecolumn {
	padding: 0px 0 20px 0;
	margin: 0px 0 0 18px;
	width: auto;
	}


.post {
	line-height : 1.7em;
	}
	
.post p {
	margin-top : 0;
	margin-bottom : 1em;
}

.gallery {
	float : left;
	margin-right : 10px;
	width : 455px;
	height : 280px;
}

.gallery a.full {
	border : 1px solid gray;
	width : 340px;
	height : 280px;
	float : left;
	display : block;
	overflow : hidden;
	text-align : center;
}

.gallery .thumbnails  {
	display : block;
	float : left;
	width : 112px;
}

.gallery a.thumbnail {
	border : 1px solid gray;
	width : 46px;
	height : 46px;
	overflow : hidden;
	display : block;
	margin-left : 8px;
	margin-bottom : 10px;
	float : left;
}

.gallery .thumbnails a img {
	max-width : 80px;
	max-height : 80px;
}

.people .gallery {
	width : 280px;
	height : 280px;
	overflow : hidden;
}

.people .gallery img {
	max-width : 280px;
}

.entry {
	width : auto;
	float : inherit;
	height : auto;
	clear : both;
	overflow : auto;
	text-align : justify;
	padding-top : 10%;
}

.people .entry {
	width : auto;
}

.wideentry {
	width : auto;
}

.alt {
	background-color: #f8f8f8;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	}


small {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 0.9em;
	line-height: 1.5em;
	}

h1 {
	font-family: "GillSans-Light", 'Gill Sans','Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: lighter;
	font-size: 4em;
	}

h2, h3, h4 {
	font-family: Verdana, Arial, Sans-Serif;
	font-weight: bold;
	}
	
h1 a {
	color : #cccccc ! important;
	font-weight: lighter ! important;
	}

#headerimg {
	margin-top : 0px ! important;
	padding-top : 0px ! important;
	margin-bottom : 0px ! important;
	padding-bottom : 0px ! important;
	}


/* Begin Sidebar */
#sidebar
{
	border-right : dotted 1px #cccccc;
	float : left;
	font: 1.1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	display : none;
}


/* End Sidebar */


h1, h1 a, h1 a:hover, h1 a:visited {
	text-decoration: none;
	color: #999999;
	text-transform : lowercase;
	font-weight : normal;
	}

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
	text-decoration: none;
	color : #cccccc;
	text-transform : lowercase;
	font-weight : normal;
	}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
	text-decoration: none;
	}

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
	color: #777;
	}

code {
	font: 1.1em 'Courier New', Courier, Fixed;
	}

acronym, abbr, span.caps
{
	font-size: 0.9em;
	letter-spacing: .07em;
	}

a, h2 a:hover, h3 a:hover {
	color: #fe7d19;
	text-decoration: none;
	}

a:hover {
	color: #fe7d19;
	text-decoration: underline;
	}
/* End Typography & Colors */



/* Begin Structure */
#footer {
	border: none;
	padding: 0;
	margin: 0 0 0 3em; 
	width: 760px;
	clear: both;
	color : #666666;
	font-size : 0.7em;
	}

#footer p {
	margin: 0;
	padding: 20px 0;
	text-align: left;
	}
/* End Structure */



/*	Begin Headers */

h3 {
	font-size: 1.3em;
	padding: 0;
	margin: 30px 0 0;
	}


h3.comments {
	padding: 0;
	margin: 40px auto 20px ;
	}

h4 {
	font-size: 1.1em;
	padding: 0;
	margin: 30px 0 0;
	}

/* End Headers */



/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}
/* End Images */





a img {
	border: none;
	}

.awards {
	font-size : 0.9em;
}

.post .title, .post .date, .post .location {
	font-size: 1.2em;
	float : left;
}

.post .title {
	width : 300px;
	color : #666666;
}

.awards .title {
	width : 400px;
	color : #000000;
}

.awards .location {
	color : #666666;
}

.post .title a {
	color : black;
	text-decoration : underline;
}

.post .title a:hover {
	color: #fe7d19;
	text-decoration : none;
}

.post .date {
	width : 50px;
	color: #333;
}

.post {
	clear : both;
}

div#custom {
	margin-bottom : 3em;
}

h3 {
	color : #FF9900;
	font-weight : normal;
	text-transform : uppercase;
}

div#custom ul,div#custom li {
	margin : 0px;
	padding : 0px;
	list-style : none;
}

#staff {
	line-height : 1.8em;
}

#staff div {
	float : left;
	margin-right : 8px;
	max-width : 120px;
}

div#staff {
	white-space : nowrap;
	width : 380px;
}

#staff ul, #staff li {
	list-style : none;
	margin : 0;
	padding : 0;
	color : #666666;
}

#staff a {
	color : #666666;
}

#staff a {
	color : #666666;
	text-decoration : underline;
}


#staff h4 {
	color : black;
}

#staff li + li h4 {
	margin-top : 1.7em;
	
}

.sIFR-flash {
	visibility: hidden !important;
	margin: 0;
	display : none;
}

.sIFR-replaced {
	visibility: visible !important;
	margin-top : 0px ! important;
	padding-top : 0px ! important;
}

.sIFR-replaced embed {
	visibility: hidden !important;
	display : none;
	margin-top : 0px ! important;
	padding-top : 0px ! important;
}

span.sIFR-alternate {
	visibility: visible;
	margin-top : 0 ! important;
	padding-top : 0 ! important;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
	margin-top : 0px ! important;
	padding-top : 0px ! important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: visible;
	margin-top : 0px ! important;
	padding-top : 0px ! important;
}

/*
.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -9px;
	font-size: 55px;
}

.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: -6px;
	font-size: 25px;
}

.sIFR-hasFlash h4 {
	visibility: hidden;
	letter-spacing: -5px;
	font-size: 21px;
}

.sIFR-hasFlash h5#pullquote {
	letter-spacing: -4px;
	visibility: hidden;
	font-size: 24px;
}
*/