/*
Theme Name: 960bc
Theme URI: http://www.guardianwebdesign.com.au/960bc
Description: A blank canvas WordPress theme for developers based on the 960 CSS framework.
Version: 1.5
Author: Troy Dean
Author URI: http://www.guardianwebdesign.com.au/
Tags: fixed-width, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar

	960bc v1.5
	http://www.guardianwebdesign.com.au/960bc

	This theme was designed and built by Troy Dean
	as a starting point for WordPress developers who
	like the 960 grid system.
	http://www.960.gs
	The theme includes no images and minimal styling,
	providing a blank canvas for the designer to unleash
	her css magic.

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

/* for ease of updating into the future we use separate style sheets for colours and typography */

@import url(colours.css);
@import url(typography.css);

/* Begin Structure */

body {
		width: 100%;
		margin: 0;
		padding: 0;
		position: relative;
		}

#page {
		position: relative;
		margin: 0;
		padding: 0;
		width: 100%;
		}
		
#wrapper {
		position: relative;
		}	


#header {
		padding: 0;
		width: 100%;
		float: left;
		height: 50px;
		}
		
#headerimg {
		position: relative;
		left: 70px;
		}
#headerimg a {
 		float: right;
 		margin-right: 120px;
 		font-size: 1.5em;
 		color: #d6edc7;
 		}
 		
#headerimg a:hover {
 		text-decoration: underline;
 		color: #fff;
 		}
		
/* This hides the 'skip to' links and maintains accessibility */
		
#skip {
		position: absolute;
		top: -500px;
		width: 1px;
		height: 1px;
		overflow: hidden;
		}
		
#heroes {
		margin-top: -140px;
		}

#sidebar {
		text-align: left;
		padding-top: 40px;
		padding-bottom: 25px;
		}

#footer {
		clear: both;
		margin: 0;
		padding: 10px 0;
		}
		
ul#social li a {
		display: block;
		float: left;
		padding: 24px 0 0 0;
		width: 24px;
	    overflow: hidden;    
	    height: 0px !important;
	    height /**/:24px;
	    margin: 0 10px 0 0;
		}
		
ul#social li a:hover {
	    opacity: 1;
	    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		}
		
ul#social li#facebook a, li#facebook a  {
		background: url('images/facebook.png') no-repeat top left;
		}
		
ul#social li#facebook a:hover, li#facebook a:hover {
		background: url('images/facebook.png') no-repeat bottom left;
		}
		
ul#social li#myspace a {
		background: url('images/myspace.png') no-repeat top left;
		}
		
ul#social li#myspace a:hover {
		background: url('images/myspace.png') no-repeat bottom left;
		}
		
ul#social li#twitter a {
		background: url('images/twitter.png') no-repeat top left;
		}
		
ul#social li#twitter a:hover {
		background: url('images/twitter.png') no-repeat bottom left;
		}
		
ul#social li#lastfm a {
		background: url('images/lastfm.png') no-repeat top left;
		}
		
ul#social li#lastfm a:hover {
		background: url('images/lastfm.png') no-repeat bottom left;
		}
		
ul#social li#jango a {
		background: url('images/jango.png') no-repeat top left;
		}
		
ul#social li#jango a:hover {
		background: url('images/jango.png') no-repeat bottom left;
		}
		
#blogLink {
		position: absolute;
		top: 680px;
		left: 730px;
		}
		
#blogLink a {
		color:#d2eaca;
		display: block;
		float: left;
		font-size:15px;
		line-height:33px;
		text-align:center;
		text-decoration:none;
		width: 100px;
		}
		
#blogLink a:hover { color:#fff; }

.post {
		margin: 0 0 10px;
		}

.postmetadata {
		margin: 30px 0;
		}

.smallattachment {
		float: left;
		width: 128px;
		margin: 5px 5px 5px 0px;
		}

.attachment {
		margin: 5px 0px;
		}

.postmetadata {
		clear: both;
		}

/* End Structure */

/* Begin Images */
img.border {
		padding: 3px;
		border: 1px solid #096d8d;
		}

p img {
		padding: 0;
		max-width: 100%;
		}

img.centered {
		display: block;
		margin-left: auto;
		margin-right: auto;
		}

img.alignright {
		padding: 4px;
		margin: 0 0 2px 7px;
		display: inline;
		}

img.alignleft {
		padding: 4px;
		margin: 0 7px 2px 0;
		display: inline;
		}

.alignright {
		float: right;
		}

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

/* Begin Lists

	Special stylized non-IE bullets
	Do not work in Internet Explorer, which merely default to normal bullets. */

html>body .entry ul {
		margin-left: 0px;
		list-style: none;
		z-index: 9999;
		}

html>body .entry li {
		margin: 7px 0 8px 10px;
		}

.entry ol {
		padding: 0 0 0 35px;
		margin: 0;
		}

.entry ol li {
		margin: 0;
		padding: 0;
		}

.postmetadata ul, .postmetadata li {
		display: inline;
		list-style-type: none;
		list-style-image: none;
		}

/* End Entry Lists */

/* Begin Form Elements */
#searchform {
		margin: 10px auto;
		padding: 5px 3px;
		text-align: left;
		}

#sidebar #searchform #s {
		width: 108px;
		padding: 2px;
		}

#sidebar #searchsubmit {
		padding: 1px;
		}

.entry form { /* This is mainly for password protected posts, makes them look better. */
		text-align:center;
		}

select {
		width: 130px;
		}

#commentform input {
		width: 170px;
		padding: 5px;
		margin: 5px 5px 1px 0;
		}

#commentform {
		margin: 5px 10px 0 0;
		}

#commentform textarea {
		width: 100%;
		padding: 5px;
		}

#respond:after {
		content: "."; 
	    display: block; 
	    height: 0; 
	    clear: both; 
	    visibility: hidden;
		}

#commentform #submit {
		margin: 0 0 5px auto;
		float: right;
		}

/* End Form Elements */


/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
		cursor: help;
		}

blockquote {
		margin: 15px 30px 0 10px;
		padding-left: 20px;
		}

blockquote cite {
		margin: 5px 0 0;
		display: block;
		}

.center {
		text-align: center;
		}

.hidden {
		display: none;
		}

hr {
		display: none;
		}

.navigationTop {
		display: block;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 30px;
		}

.navigationBottom {
		display: block;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
		}

/* End Various Tags & Classes*/

/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
	width: 690px;	
}

#accordion p {
	margin: 0 0 3px 0;	
}

/* accordion header */
#accordion h3 {
	display: inline;
	clear:both;
	float: left;
	margin:6px 0 0 0;
	padding:5px 25px 5px 5px;
	font-size:14px;
	font-weight:normal;
	cursor:pointer;
	color: #fff;
	background: #096d8d url('images/open.jpg') no-repeat center right;		
}

#accordion h3:hover {
	display: inline;
	clear:both;
	float: left;
	margin:6px 0 0 0;
	padding:5px 25px 5px 5px;
	font-size:14px;
	font-weight:normal;
	cursor:pointer;
	color: #096d8d;
	background: #fff url('images/open-hover.jpg') no-repeat center right;		
}

/* currently active header */
#accordion h3.current {
	cursor:default;
	padding:5px;
	background: #000;	
	border-bottom: 1px solid #fff;
}

#accordion h3.current:hover {
	color: #fff;
}

/* accordion pane */
#accordion div.pane {
	display:none;
	padding:15px;
	color:#000;
	font-size:13px;
	clear: both;
	margin: 0;
	background: #72d1b5 url('images/tr.jpg') no-repeat top right;
}

#accordion div.pane p {
	font-size: 1.1em;
	margin: 0 0 6px 0;
}

/* a title inside pane */
#accordion div.pane a {
	font-size: 1.1em;
	color:#086D8D;
	background: none!important;
}

#player {
	margin: 0 0 10px 0;
}

#about {
	float: left;
	width: 380px;
}

/* the overlayed element */ 
.overlay { 
     
    /* must be initially hidden */ 
    display:none; 
     
    /* place overlay on top of other elements */ 
    z-index:10000; 
     
    /* styling */ 
    background-color:#333; 
     
    width:675px;     
    min-height:200px; 
    border:1px solid #666; 
     
    /* CSS3 styling for latest browsers */ 
    -moz-box-shadow:0 0 90px 5px #000; 
    -webkit-box-shadow: 0 0 90px #000;     
} 
 
/* close button positioned on upper right corner */ 
.overlay .close { 
    background-image:url(../img/overlay/close.png); 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
}

/* use a semi-transparent image for the overlay */ 
#overlay { 
    background-image:url(http://static.flowplayer.org/img/overlay/transparent.png); 
    color:#efefef; 
    height:450px; 
} 
 
/* container for external content. uses vertical scrollbar, if needed */ 
div.contentWrap { 
    height:441px; 
    overflow-y:auto;  
}