/*
Cascading Style Sheet for ezilly.com
Author: Bretton MacLean
*/

@import "style/css/reset.css";

/********************
*** Typography ******
********************/

body {font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;}

p {	font-size:  14px;
	color: #222; 
	margin-bottom:5px;}

/********************
*** Global Styles ***
********************/

html {
}

body {
	background-image: url(style/images/bkgnd.gif);
	background-attachment:fixed;
	color: #262626;
	text-align: center;
	width: 100%;
	font: 14px tahoma, sans-serif;
}

#container {
	background-color: #e7e7e7;
	margin: 80px auto;
	position:relative;
	text-align: left;
	width: 700px;
	}
	
#container2 {
	background: url(style/images/content-border-left.png) repeat-y;
	left:-4px;
	position:relative;	
	z-index:5;
}

#container3 {
	background: url(style/images/content-border-right.png) repeat-y top right;
	position:relative;
	right:-6px;
	z-index:5;
}

a {	outline: none; }

a:link {
	color: #c20000;
	font-weight: bold; 
	text-decoration: none;
	}

a:visited {
	color: #c20000;
	font-weight: bold;
	text-decoration: none; 
	}

a:hover {
	background: none;
	color: #c20000;
	font-weight: bold;
	text-decoration: underline;
	}

/*********************
*** Header Styles ****
*********************/

#header h1 {
	background: url(style/images/header.png) no-repeat;	
	height: 122px;
	position:absolute;
	right: -51px;
	text-indent: -9999px;
	top: -61px;
	width: 523px;
	z-index: 5;
}

#header a {
	display:block;
	height: 122px;
	width: 523px;}

#social-icons {
	background: url(style/images/social-icons.png) no-repeat;
	height: 54px;
	left: -12px;
	position:relative;
	text-indent: -9999px;
	top: -50px;
	width: 250px;
	}

#social-icons li {
    height:40px;
    float:left;
    list-style:none;
    display:inline; } 

#social-icons a {
	display:block;
	height:40px;}

#rss-feed {width: 53px;}
#twitter { width: 30px;}
#digg {width: 50px;}
#stumble { width: 49px;}
#delicious { width: 45px;}

a.tooltip{
    position:relative; /*this is important*/    
    z-index:24; 
    color:#262626 !important; 
    text-decoration:none !important; /* The important tags are due to IE6 being stupid */
}

a.tooltip:hover{z-index:25;}

a.tooltip span{display: none;z-index:26;}

#rss-feed a.tooltip:hover span { /*the span will display just on :hover state*/    
    display:block;
    position:absolute;
    top:50px; left:20px; width:12em;
    font-size: 18px;
    color:#262626;
    padding: .2em .2em .2em .2em;
    text-align: left;
	z-index:28;
	text-indent: 0px;
}

#twitter a.tooltip:hover span { /*the span will display just on :hover state*/    
    display:block;
    position:absolute;
    top:50px; left:-33px; width:12em;
    font-size: 18px;
    color:#262626;
    padding: .2em .2em .2em .2em;
    text-align: left;
	z-index:28;
	text-indent: 0px;
}

#digg a.tooltip:hover span { /*the span will display just on :hover state*/    
    display:block;
    position:absolute;
    top:50px; left:-63px; width:12em;
    font-size: 18px;
    color:#262626;
    padding: .2em .2em .2em .2em;
    text-align: left;
	z-index:28;
	text-indent: 0px;
}

#stumble a.tooltip:hover span { /*the span will display just on :hover state*/    
    display:block;
    position:absolute;
    top:50px; left:-113px; width:12em;
    font-size: 18px;
    color:#262626;
    padding: .2em .2em .2em .2em;
    text-align: left;
	z-index:28;
	text-indent: 0px;
}

#delicious a.tooltip:hover span { /*the span will display just on :hover state*/    
    display:block;
    position:absolute;
    top:50px; left:-162px; width:12em;
    font-size: 18px;
    color:#262626;
    padding: .2em .2em .2em .2em;
    text-align: left;
	z-index:28;
	text-indent: 0px;
}

/*********************
*** Content Styles ***
*********************/
#content {
	margin: 10px 0 10px 80px;
	position:relative;
}

.rhymeku-block {
	margin: 20px 0 120px 0;
	position:relative;
}

.numberbox {
	background: url(style/images/numbox.png) no-repeat;
	font: bold 50px Tahoma, sans-serif;
	height: 82px;
	left:-140px;
	padding-top: 5px;
	position:absolute;
	text-align: center;
	width: 121px;
}

.numberbox a {text-shadow: #deb9b9 1px -1px 0px;}

.rhymeku {
	height:150px;
	width:600px;
	position:relative;
	text-indent: -9999px;
	top:30px;
}

.fontag {
	font-size:10px;
	float:right;
	margin-right: 20px;
	top:30px;
	position:relative;
}

.fontag a { 
	font-size:16px;
}

.sharing-icons {
	background: url(style/images/sharing-icons.png) no-repeat;
	height: 72px;
	margin-top:-58px;
	position:absolute;
	right: -45px;
	text-indent: -9999px;
	width: 41px;
}

.twitter-icon { width: 30px;}

.email-icon { width: 40px;}

.sharing-icons li {
    height:40px;
    float:left;
    list-style:none;
    display:inline; } 

.sharing-icons a {
	display:block;
	height:40px;}

.twitter-icon a.tooltip:hover span { /*the span will display just on :hover state*/    
    display:block;
    position:absolute;
    top:0px; left:-11.5em; width:10.4em;
    font-size: 18px;
    background-color: #e7e7e7; color:#262626;
    padding: .2em .2em .2em .2em;
    text-align: left;
	z-index:28;
	text-indent: 0px;
}

.email-icon a.tooltip:hover span { /*the span will display just on :hover state*/    
    display:block;
    position:absolute;
    top:0px; left:-11.5em; width:10.4em;
    font-size: 18px;
    background-color: #e7e7e7; color:#262626;
    padding: .2em .2em .2em .2em;
    text-align: left;
	z-index:28;
	text-indent: 0px;
}


p.tooltip{
    position:relative; /*this is important*/    
    z-index:24; 
    color:#262626 !important; 
    text-decoration:none !important; /* The important tags are due to IE6 being stupid */
}

/************************
*** Navigation Styles ***
************************/

#nextpage {
	background: url(style/images/numbox.png) no-repeat;
	font: bold 50px Tahoma, sans-serif;
	height: 82px;
	left:-140px;
	padding-top: 0px;
	position:relative;
	text-align: center;
	width: 121px;
}

#nextpage a {text-shadow: #deb9b9 1px -1px 0px;}

p.tooltip:hover{z-index:25;}

p.tooltip span{display: none;z-index:26;	border:thin; border-color:#c20000;}

p.tooltip:hover span { /*the span will display just on :hover state*/    
    display:block;
    position:absolute;
    top:0; left:136px; width: 600px;
    font-size: 18px;
    color:#262626;
    padding: .2em .2em .2em .2em;
    text-align: left;
	z-index:28;
	text-indent: 0px;
	border:thin; border-color:#c20000;
}

/*********************
*** Footer Styles ****
*********************/

#footer {
	background: url(style/images/footer.png) no-repeat;
	bottom: -20px;
	height: 202px;
	left: -64px;
	position: relative;
	width: 813px;
}

#footer h2 {
	text-indent: -9999px;
}

#footer p {
	color: #e7e7e7;
}
	
#about-text {
	float:left;
	margin: 40px 0 0 60px;
	width: 300px;
}

#about-text a {
	color: #c20000;
	font-weight: bold; 
	text-decoration: none;}

#contact-text {
	color: #e7e7e7;
	font-size: 10px;
	margin: 21px 48px 0 0;
	text-align: right;
}

#contact-text a {	
	font-size: 16px;}

#ezilly { 	
	float:right;
   	width: 129px;	
}	

#ezilly span {
   	margin: 0 80px 0 0;}
	
#ezilly a {	
	background: url(style/images/ezilly.png) no-repeat;
	display:block;
	margin-top: 10px;
	text-align:left;
	text-indent: -9999px;
	height:71px;
}

#ezilly a:hover {
	background: url(style/images/ezilly.png) no-repeat 0 -71px;
}