/*
    Cole Spicer
    http://jcolespicer.com/blog
*/

/* RESET */
* {
  margin:  0;
  padding: 0;
}
html { overflow-y: scroll;}
html, body{ height: 100%;}
body { 
  font-size: 62.5%;
  font-family: Georgia, Arial, sans-serif;
  background-color: #000;
}

ul    { list-style: square inside; }
ol    { list-style: decimal inside;}
a     { outline: none; text-decoration: none; }
a img { border: none; }
img   { vertical-align: middle; }
table { border-collapse: collapse; }
div#preload { display: none }

/* UTILITY */
.floatLeft    { float: left; }
.floatRight   { float: right; }
.clear        { clear: both; }
.button       { 
  border: 1px solid #272727; 
  background: white;
  padding: 3px 8px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  color: #272727;
  width : 6em;
  cursor : pointer;
  font-size : 1.2em;
  letter-spacing : 0.1em;
  text-align : center;
	}
	
.button:hover { 
  background: #dfad00;
  color: #fff;
}
.titleBreak {
  height: 2px;
  padding-bottom: 5px;
  background: url(images/title-break.jpg) no-repeat; 
}
.sideBreak {
  height: 2px;
  padding-bottom: 5px;
  background: url(images/sidebar-break.jpg) no-repeat; 
}


/* TYPGROGRAPHY */
p, li             {font-size: 1.2em; line-height: 1.2em; margin: 0 0 10px 0;}
p#intro-paragraph {
    font-family: Georgia, Arial, sans-serif; 
    font-size: 1.8em; 
    font-style: italic;
	text-align: justify;
    line-height: 1.4em;
}
.pagedescription  p{
	display: inline;
	font-family: Georgia, Arial, sans-serif; 
    font-size: 1.7em; 
	text-align: justify;
    line-height: 1.4em;
}
.pagedescription  span{
	font-family: Georgia, Arial, sans-serif; 
    font-size: 3.2em; 
	color: #4c4a8f;
	font-weight: bold;
	text-align: justify;
    line-height: 1.4em;
}
#portfolio-page  p{
	font-family: Georgia, Arial, sans-serif; 
    font-size: 1.2em; 
}
#portfolio-page  span{
	font-family: Georgia, Arial, sans-serif; 
    font-size: 2.0em; 
	color: #4c4a8f;
	font-weight: bold;
}



p#intro-paragraph span {font-size: 2.4em; font-weight: bold; }
a                      {color: #4c4a8f;}
a:hover                {color: #dfad00;}
h1                     {font-size: 3.6em; font-family: Georgia, Arial, sans-serif; font-weight: normal;}
h2                     {font-size: 2.8em; font-family: Georgia, Arial, sans-serif; font-weight: normal;}
h3                     {font-size: 2.0em; font-family: Georgia, Arial, sans-serif; font-weight: normal;}
#sidebar h3  { color: #dfad00; }

/* STRUCTURE */
#header {
  height: 226px;
  width:  1200px;
  background: url(images/header.jpg) no-repeat;
  margin: 0 auto;
}
#page-wrap {
  width: 1200px;
  margin: 0 auto -100px;
  padding-top: 1px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  background: url(images/body.jpg) no-repeat;
}
#push {height: 100px;}
#main-content { width: 390px; height: 460px; float: left; padding: 20px 0px 0px 330px;}
#comment-panel{ width: 390px; height:365px;}
#sidebar { width: 150px; float: right; padding: 0px 200px 0px 0px;}
.pagedescription { width:390px; height: 390px; overflow: hidden; position: relative;}
.pagedescription  div{ display: inline; width: 390px;}
#blog-most-recent{width: 390px;float: left; padding-top: 10px;}
#blog-nav{width: 390px; float: left; padding-top: 100px;}
#blog-cat, #blog-arc{float: left; width: 190px; display: inline; padding: 0 0 0 0px;}
.list {padding-left: 20px; font-weight: bold;}



/* NAV-MENU */
#nav {
   /* background: url(images/nav-off.png) no-repeat; */
   list-style: none inside;
   height: 49px;
   width: 616px;
   margin-left:188px;
   _margin-left:95px;
   padding: 0px 20px 0px 0px;
   }
   #nav li{
      display: inline;
   }
   #nav li a{
     display: block;
     height: 49px;
     float: left;
     text-indent: -9999px;
     }
     #home a{
        width: 101px;
        background: url(images/nav-home.jpg) bottom center no-repeat;
     }
     #about a{
        width: 85px;
        background: url(images/nav-about.jpg) bottom center no-repeat;
     }
     #blog a{
        width: 74px;
        background: url(images/nav-blog.jpg) bottom center no-repeat;
     }
     #gallery a{
        width: 112px;
        background: url(images/nav-gallery.jpg) bottom center no-repeat;
     }
     #portfolio a{
        width: 126px;
        background: url(images/nav-portfolio.jpg) bottom center no-repeat;
     }
     #contact a{
        width: 116px;
        background: url(images/nav-contact.jpg) bottom center no-repeat;
     }
     #home a:hover{
        background: url(images/nav-home.jpg) center center no-repeat;
     }
     #about a:hover{
        background: url(images/nav-about.jpg) center center no-repeat;
     }
     #blog a:hover{
        background: url(images/nav-blog.jpg) center center no-repeat;
     }
     #gallery a:hover{
        background: url(images/nav-gallery.jpg) center center no-repeat;
     }
     #portfolio a:hover{
        background: url(images/nav-portfolio.jpg) center center no-repeat;
     }
     #contact a:hover{
        background: url(images/nav-contact.jpg) center center no-repeat;
     }
	 
#sform {
	display: inline;
	padding-top: 10px;
}
#searchform #s{
 width: 100px;
}

#searchform #search{
	display:inline;
	padding: 0 190px 0 10px;
	height: 22px;
	width: 68px;
	}
	#search a{
		 display: block;
		 height: 22px;
		 width: 68px;
		 float: left;
		 text-indent: -9999px;
	}
	#search #searchsubmit{
		background: url(images/search.png) bottom center no-repeat;
	}
	#search 	#searchsubmit:hover{
		background: url(images/search.png) top center no-repeat;
	}

/*COMMENT BUTTON*/
#submitdiv {
	display:inline;
	padding-top: 10px;
	height: 22px;
	width: 68px;
	}
	#submitdiv a{
		display: block;
		height: 22px;
		width: 68px;
		float: left;
		text-indent: -9999px;
		}
		#submit {
			background: url(images/submit.png) bottom center no-repeat;
		}
		#submit:hover{
			background: url(images/submit.png) top center no-repeat;
		}


/* CONTENT-AREA */
#content-area {
  width: 1200px;
  
  float: left;
  }
  #content-area h1 {
     font-size: 3.6em;
  }
   

/* BLOG ENTRIES */
.post .post-title  { float: left; width: 300px;}
.post .post-content{ float: left; }
.post h2 {}
.datebox {
    width: 36px;
    float: right;
    padding: 5px; 
    background: #302f6b;
    color: white;
    text-align: center;
    margin: 0 10px 0 0;
}
.day   {
    font-size: 2.0em;
    font-weight: bold;
    margin: 0;
}
.month {
    font-size: 1.4em;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
}
.year  {
    font-size: 0.8em;
    font-weight: bold;
    margin: 0;
}



/*	COMMENT PANEL */
#comment-panel{
	overflow: hidden;
	overflow-y: scroll;
	
}



/* MORE BUTTON */
#moreButton {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 68px;
	height: 22px;
	
	}
	#moreButton a{
		width: 68px;
		height: 22px;
		text-indent: -9999px;
		float: left;
		background: url(images/more.png) bottom center no-repeat;
	}
	#moreButton a:hover{
		background: url(images/more.png) top center no-repeat;
	}
	
	
	
	
/* GALLERY STYLE*/
#sidebar #myPhotos #photo-gallery, #vid-gallery{
	width: 150px;
}
#photo-gallery ul, #vid-gallery ul { 
	list-style: none; 
}
#photo-gallery ul li , #vid-gallery ul li{ 
	padding: 0 5px 5px 0;
	display: inline; 
}
#photo-gallery ul img , #vid-gallery ul img{
	border: 1px solid #3e3e3e;
	width: 40px;
	height: 40px;
	border-width: 1px 1px 1px;
}
#photo-gallery ul a:hover img , #vid-gallery ul a:hover img{
	border: 1px solid #dfad00;
	border-width: 1px 1px 1px;
	color: #dfad00;
}
#photo-gallery ul a:hover , #vid-gallery ul a:hover{ 
	color: #dfad00; 
}

#sidebar #myVideos , #myArchives{
	width: 150px;
	padding-top: 15px;
}

/*END GALLERY STYLES*/
	
	
	
/* PORTFOLIO PAGE */
#work-history {
	list-style: none;
	#margin-left: -17px;
	}
	#work-history li{
		height: 57px;
		width: 393px;
		margin: 0px;
		padding:0px;
		}
		#work-history li a{
			float: left;
			display: block;
			height: 57px;
			width: 393px;
		}
		#work-history #sloutdoors{
			background: url(portfolio/sloutdoors.jpg) bottom center no-repeat;
		}
		#work-history #sloutdoors:hover{
			background: url(portfolio/sloutdoors.jpg) top center no-repeat;
		}
		#work-history #my{
			background: url(portfolio/my.jpg) bottom center no-repeat;
		}
		#work-history #my:hover{
			background: url(portfolio/my.jpg) top center no-repeat;
		}
		#work-history #clockit{
			background: url(portfolio/clockIt.jpg) bottom center no-repeat;
		}
		#work-history #clockit:hover{
			background: url(portfolio/clockIt.jpg) top center no-repeat;
		}
		#work-history #asulearn{
			background: url(portfolio/asulearn.jpg) bottom center no-repeat;
		}
		#work-history #asulearn:hover{
			background: url(portfolio/asulearn.jpg) top center no-repeat;
		}
		#work-history #endmtr{
			background: url(portfolio/endmtr.jpg) bottom center no-repeat;
		}
		#work-history #endmtr:hover{
			background: url(portfolio/endmtr.jpg) top center no-repeat;
		}
		#work-history #casa{
			background: url(portfolio/casa.jpg) bottom center no-repeat;
		}
		#work-history #casa:hover{
			background: url(portfolio/casa.jpg) top center no-repeat;
		}
/* END PORTFOLIO PAGE */