/*

TWEET MOODS

Version: 1.0 
Author: Mark McCorkell
Author URL: http://www.markmccorkell.com
Release Date: June 2010

*/


/*************************************************
# CSS contents 
**************************************************
* 1 Reset defaults
* 2 Layout
* 3 Nav
* 4 Headings
* 5 Lists
* 6 Images
* 7 Links
* 8 Forms
* 9 Typography 
* 10 Other
*************************************************/



/*************************************************
# CSS3 Properties in use and Compatibility
**************************************************

* Border Radius (Firefox 3+, Chrome 4+, Safari 3.1+)
* Box Shadow (Firefox 3.5+, Chrome 2+, Safari 4+)
* Text Shadow (Firefox 3.5+, Opera 9.6+, Chrome 2+, Safari 4+)
* Transitions (Chrome, Safari, Firefox 3.7+)

*/



/*************************************************
# Colour reference 
**************************************************

#FFF 	white
#FFFF00	yellow

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


 
/*************************************************
# 1 Reset defaults 
*************************************************/

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { 
	margin: 0; 
	padding: 0; 
	} /* Reset margins and padding */


a:link, a:visited{
	text-decoration:none;
	outline:none;
	} /* Reset link styles */

html {
	overflow: -moz-scrollbars-vertical;
	} /* Mozilla scrollbar fix */

#skipto{
	position:absolute;
	left:-9999px;
	top:-9999px;
	} /* Hides the skip to link - useful for screen readers */

.floatleft,
.alignleft {
	float: left;
	margin: 3px 7px 0 0;
}

.footerleft {
	margin-left:46px;
}

.floatright,
.alignright {
	float: right;
	margin: 3px 0 0 7px;
}

.clear {
	clear: both;
}
.fix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.fix {
	display: inline-block;
} 
* html .fix{
	height: 1%;
}
.fix{
	display:
	block;
}



/*************************************************
# 2 Layout 
*************************************************/

@font-face { 
	font-family: Franchise; 
	src: url('fonts/Franchise-Bold.ttf'); 

} 


body {
	color: #FFF;
	font-family: "Lucida Grande","Lucida Sans","Helvetica Neue", arial, verdana, sans-serif;
	font-size:10px;
	text-align: left;
} 


.container{
	width:100%;
	height: 880px;
	margin: 0;
	padding:20px 0 0 0;	
}

	.monday{
		background: url(images/bg-monday.png) center repeat-x #0090EF;	
	}

	.tuesday{
		background: url(images/bg-tuesday.png) center repeat-x #00B931;	
	}
	
	.wednesday{
		background: url(images/bg-wednesday.png) center repeat-x #9900CC;	
	}
	
	.thursday{
		background: url(images/bg-thursday.png) center repeat-x #FF9900;	
	}

	.friday{
		background: url(images/bg-friday.png) center repeat-x #DD0202;	
	}	
	
	
		
#clouds{
	position: fixed;
	top:0;
	left: 0;
	z-index: 200;
	background: url(images/clouds.png) repeat-x;
	width: 100%;
	height: 74px;
	
}


.monitter {
	width: 600px;
	height: 480px;
	margin: 30px auto 0 352px;
	overflow:hidden;
}



/*************************************************
# 3 Nav  
*************************************************/

#leftbox{
	position: fixed;
	top:30px;
	left: 0;
	z-index: 101;
	width:250px;
	height: 590px;
	padding: 0 0 0 25px;
		
}


#leftbox ul {
	margin: 20px 12px 0 0;
	padding: 0;
	list-style-type: none;	

}

#leftbox li {
	width:100%;
	padding: 0;
	font-family: Franchise,"Helvetica Neue", arial, verdana, sans-serif;
	font-weight:normal;
	font-size:50px;
	line-height: 40px;
	color: #FFF;

}

#leftbox li a{
	margin:0 0 10px 0;
	padding: 5px;
	display:block;
	color:#FFFF00;
	cursor: pointer;
	}
	
#leftbox li a:hover{
	color:#FFF;
	text-shadow: 0px 0px 10px #FFF;	
	/*-o-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);*/
	
	-o-transform:rotate(6deg);
	-webkit-transform:rotate(6deg);
	
	/* CSS3 Gradient option 
	
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(255,204,0)), color-stop(1, rgb(222,176,11)));
	
	background-image: -moz-linear-gradient(center bottom, rgb(255,204,0) 0%, rgb(222,176,11) 100%)
	
	*/

	}




/*************************************************
# 4 Headings 
*************************************************/

h1{
	font-family: Franchise,"Helvetica Neue", arial, verdana, sans-serif;
	font-size:10px;
	color: #FFF;
	visibility: hidden;
	overflow: hidden;
	position: absolute;
	top:0;
	left: 0;

}


h2{
	font-family: Franchise,"Helvetica Neue", arial, verdana, sans-serif;
	font-size:75px;
	color: #FFF;
	text-transform: uppercase;
}


h3{
	font-family: Franchise,"Helvetica Neue", arial, verdana, sans-serif;
	font-size:60px;
	color: #FFF;
	text-transform: uppercase;

}


.headline{
	position: relative;
	width:530px;
	height: 130px;
	margin: 40px 0 0 353px;

}

	
	

/*************************************************
# 5 Lists 
*************************************************/

.tweet{
	display: block;
	background: transparent url(images/black10.png);
	background: rgba(0, 0, 0, 0.1) none;
	clear: both;
	padding: 6px;
	margin: 3px;
	overflow: hidden;
	-webkit-transition-duration: .33s;
	-webkit-transition-property: color, background, text-shadow, box-shadow;
	-moz-transition-duration: .33s;
	-moz-transition-property: color, background, text-shadow, box-shadow;
	transition-duration: .33s;
	transition-property: color, background, text-shadow, box-shadow;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;	
	
	
}

.tweet:hover{
	background: transparent url(images/black25.png);
	background: rgba(0, 0, 0, 0.25) none;
	-webkit-transition-timing-function: ease-out;
	-o-transform:rotate(-3deg);
	-webkit-transform:rotate(-3deg);
}





/*************************************************
# 6 Images 
*************************************************/

.tweet img{
	float: left;
	margin: 0 10px 0 0;

}





/*************************************************
# 7 Links 
*************************************************/


a {
	-webkit-transition-duration: .33s;
	-webkit-transition-property: color, background, text-shadow, box-shadow;
	-moz-transition-duration: .33s;
	-moz-transition-property: color, background, text-shadow, box-shadow;
	transition-duration: .33s;
	transition-property: color, background, text-shadow, box-shadow;
}

a:active{
	position:relative;
	top:2px;
}

a:hover{
	-webkit-transition-timing-function: ease-out;
}


.tweet a {
	color:#FFFF00;
	font-weight:600;  
}

.tweet a:active {
	color:#FFFF00;
	font-weight:600;
}

.tweet a:focus {
	color:#FFFF00;
	font-weight:600;
}

.tweet a:hover{
	color:#FFF;
	text-shadow: 0px 0px 3px #FFF;	
	-webkit-transition-timing-function: ease-out;

}


#strapline a, #followme a, #leftbox p a {
	color:#FFFF00;
}

#strapline a:active, #followme a:active, #leftbox p a:active {
	color:#FFFF00;;
}

#strapline a:focus, #followme a:focus, #leftbox p a:focus {
	color:#FFFF00;
}

#strapline a:hover, #followme a:hover, #leftbox p a:hover{
	color:#FFF;
	text-shadow: 0px 0px 10px #FFF;	
}



#leftbox p a {
	color:#FFFF00;
	font-weight: 600;
}

#leftbox p a:active {
	color:#FFFF00;;
}

#leftbox p a:focus {
	color:#FFFF00;
}

#leftbox p a:hover{
	color:#FFF;
	text-shadow: 0px 0px 10px #FFF;	
}



/*************************************************
# 8 Forms
*************************************************/

/*

Mark has yet to add any code to this section yet. 
For now, we patiently await...

*/




/*************************************************
# 10 Typography 
*************************************************/

.tweet p.text{
	margin: 0;
	padding: 0;
	padding-left: 70px;
	font-size: 16px;
}

#leftbox p{
	margin: 0 0 0 6px;
	width: 177px;
	font-size: 12px;
}


/* Text Selection Safari */
    ::selection {
    background: #FFFF00;
    color: #000;
    }
/* Text Selection Firefox */
    ::-moz-selection {
    background: #FFFF00;
    color: #000;
    }




/*************************************************
# Other
*************************************************/



/*

Mark has yet to add any code to this section yet. 
For now, we patiently await...

*/




/*************************************************
# Footer 
*************************************************/


#cloudbed{
	position: fixed;
	z-index: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 78px;
	background: url(images/cloudbed_web.png) no-repeat;
}


#tagline{
	position: fixed;
	bottom: 0;
	z-index: 102;
	left: 25px;
	width: 560px;
	height: 60px;
}

#strapline{
	position: fixed;
	bottom: 0;
	right: 200px;
	z-index: 103;
	width: 175px;
	height: 60px;
	padding: 6px 0 0 0;
	font-family: Franchise,"Helvetica Neue", arial, verdana, sans-serif;
	font-size:24px;
	text-transform: uppercase;
	color: #FFF;

}



#followme{
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 104;
	width: 175px;
	height: 60px;
	padding: 6px 0 0 0;
	font-family: Franchise,"Helvetica Neue", arial, verdana, sans-serif;
	font-size:24px;
	text-transform: uppercase;
	color: #FFF;

}