/* 
Theme Name: JoyBlog
Theme URI: http://blog.joystudio.ca/
Description: Simple 2 column theme
Version: 1.0
Author: Joyce Lam
Author URI: http://www.joystudio.ca/
*/


*{margin:0 auto; padding:0;}
html, body {
height: 100%;
}
img{border:none; padding:0; margin:0;}
body{ font-family: "trebuchet ms", verdana, sans-serif; font-size:12px; color:#666;}
div{position:relative;}

h1{margin-left:10px;}
h2{font-size:13px; margin-top:20px;}
h3{font-size:13px; margin-top:14px; margin-bottom:0;}
h4{font-size:11px; color:#999}

#outer{width:100%;  position:relative;height:auto;/*margin: 0 auto -50px;
	min-height: 100%;
	height: auto !important;
	height: 100%;*/}
#container{width:800px; height:100%; position:relative;}

#background{width:800px; height: 800px; position:absolute; background: url('http://www.joystudio.ca/images/background.jpg') no-repeat;}
#logo{position:absolute; top:43px; left:527px; z-index:11;}

p{margin-top:10px; line-height:18px;}


/*nav*/
#nav{position:absolute; height:42px; width: 700px; top:139px; left:75px; z-index:10;}
#navlist li
{
display: inline;
list-style-type: none;
padding:0; margin:0;
}

#content{position:absolute; height:100%; top:200px; left:75px; width:700px;}



/*footer*/

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
.push {
	height: 50px; /* .push must be the same height as .footer */
}

#footer {clear:both; position:relative; margin:0; padding:0; height:60px; width:100%; color:#666; border-top: #eee 2px solid;/*background:url('http://www.joystudio.ca/images/foot.gif') repeat-x bottom center;*/}
#footer p{text-align:center; margin:0; padding:0;}
#foot{ position:relative; top:10px;}


.post a:link, .post a:visited {color:#666; border-bottom:#666 1px dotted;text-decoration:none; }
.post a:hover, .post a:active { color:#FF6698; border-bottom:#FF6698 1px dotted; text-decoration:none;}

a:link.post-img, a:visited.post-img{
	border:5px solid #F1F1F1;
	display:block;
	padding-top:3px;
	padding-bottom:3px;
}

a:active.post-img, a:hover.post-img{
	border:5px solid #ffaa00;
	display:block;
	padding-top:3px;
	padding-bottom:3px;
}

#footer a:link, #footer a:visited {color:#666;text-decoration:none;}
#footer a:hover, #footer a:active { color:#FF6698;text-decoration:none;}

.caps{font-variant:small-caps; font-size:14px;}




/*blog*/

#blogcontent{width:425px;position:relative; height:auto; float:left; margin:0 0 20px 20px; display:inline;}

/*post*/
.post {position:relative; float:left;  height:auto; margin-bottom:20px;}
	  .post .posttitle {text-transform:uppercase;color:#333;font-size:16px;}
	  .post .posttitle a:link, .post .posttitle a:visited {color:#333; border:0;}
	  .post .posttitle a:hover, .post .posttitle a:active {color:#ff6699; border:0;} 
	  .post .postinfo {font-size:11px;text-transform:uppercase; line-height:12px;color:#999; text-align:right;}

	  
.post blockquote p { margin-top:10px;padding:10px 10px 10px 10px;font-style:italic;
	background-color:#f1f1f1;
	border:2px solid #EEEEEE;
	}	  

.post ul {list-style:circle;}

 
.post ul li, .post ol li {margin:0 0 0 30px;}
.post ul, .post ol {margin-top:10px;}

.postnav{position:relative; float:left; margin-top:40px;text-transform:uppercase; font-size:11px;}
.postnav a:link, .postnav a:visited {color:#666;text-decoration:none; border:0;}
.postnav a:hover, .postnav a:active{color:#ff6699;text-decoration:none; border:0;}



/*sidebar*/

#sidebar { position:relative; float:left; width:170px; height:auto; margin:30px 0 0 23px; padding-left:20px; border-left:3px #eee solid; margin-left:40px;}

#sidebar div {margin:0 0 20px 0; width:150px; position:relative; float:left; }

#sidebar h3 { text-transform:uppercase; color:#999; font-size:12px; }

#sidebar .spacer {line-height:10px; }


#sidebar ul li {list-style:none; font-size:11px; text-transform:uppercase; line-height:20px;}

#sidebar #Search input { width:100px;}
 
#sidebar a:link, #sidebar a:visited {color:#666;text-decoration:none;}
#sidebar a:hover, #sidebar a:active { color:#FF6698;text-decoration:none;}


.postnav{position:relative; width:425px;}
.right{position:relative; float:right;}
.left{position:relative; text-align:left; float:left; margin-right:240px;}
.more{left:325px; position:relative;}


/*single blog*/
.post .commentlist {
margin-top:10px;;
padding:0;
}

.post .commentlist p {
margin:0;
padding:10px 10px 10px 20px;
border:0;
font-size:11px;
line-height:18px;
color:#333;
}

.post .commentlist li {
list-style:none;
display:block;
position:relative;
background-color:#F5F5F5;
margin:0 0 10px 20px;

}

.post .commentlist li.author-id-1{
	background-color:#ffebf1;
}

.post .commentlist .commentlistend {
list-style:none;
display:block;
background-color:#FFF;
position:relative;
margin:0;
border:0;
}


.post .commentlist li .commentmetadata {
border-top:#ffb8cf 2px solid;
padding:5px 10px 5px 10px;
font-size:10px;
line-height:12px;
text-align:right;
text-transform:uppercase;
color:#999;
}


.post .commentlist li ul, .post .commentlist li ol, .post .commentlist li blockquote {
margin:0 20px 0 0;
padding:10px 10px 10px 30px;
border:0;
}



.post .commentlist li ol li {
list-style:decimal;
display:list-item;
border:0;
margin:0 0 0 20px;
}

.post .commentlist li ul li {
list-style:circle;
display:list-item;
border:0;
margin:0 0 0 20px;
}
		
.post .commentlist li blockquote p {
margin:0;
padding:10px 10px 10px 10px;
font-style:italic;
background-color:#FFF;
}
		
.post .commentlist li img {
display:inline;
float:left;
vertical-align:middle;
}

.post textarea {
width:375px;
}

div.leavecomments {margin-top:20px; height:325px; margin-bottom:10px; position:relative;}


#sidebar .cal a:link, #sidebar .cal a:visited {color:#ff99cc;}
#sidebar .cal a:hover, #sidebar .cal a:active {color:#ff6698;}


/*form*/
.post form{margin-left:10px;}
.post .commentform form{height:300px;}

input
{
color: #999;
background: #eee;
border: 1px solid #999;
}
textarea
{
color: #999;
background: #eee;
border: 1px solid #999;
}

.clearer{position:relative; clear:both; line-height:0; width:100%; height:50px;}	
#pusher {position:relative; clear:both; height:50px; background:#eee;}


.post .date {width:35px; height:35px;
   padding:10px 0 0 0;
   text-align:center;
   float:left; display:inline;
   margin-top:18px; margin-right:5px;
   margin-bottom:5px;
   /*border-right:1px solid #bcd0d4;
   border-bottom:1px solid #bcd0d4;
   color:#355b61;*/
   line-height:10px;
   background:url('http://www.joystudio.ca/images/cal.gif') no-repeat top center;}

.post .month {text-transform:uppercase; font-weight:bold; color:#666666; font-size:9px}
.post .day {font-weight:bold; font-size:12px}

#sidebar .twtr-doc div{
	width: auto;
	margin: 0
}

#sidebar .twtr-doc h3{
	display: none
}