/*
Theme Name: Essentially Useless
Theme URI: http://essentiallyuseless.com
Description: A foundation for creative exploration
Version: 2.0
Author: Marc Kimmel
Author URI: http://marckimmel.com
Tags:
*/

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


/* GENERAL */
/* ----------------------------------------- */
body { 
font-family: Calibri, "Myriad Pro", "Lucida Grande", "Lucida Sans", Verdana, sans-serif;
color: #444444;
background-color: #f1f1f1; 
background-image: url(images/bg.gif);
background-repeat: repeat-x; 
}

h1 { 
color: #333333;
font-size: 34px; 
line-height: 32px; 
font-weight: normal; 
} /* Post Titles */

h2 { 
font-size: 24px; 
line-height: 32px; 
font-weight: normal;
margin: 35px 0px 20px 0px;
} /* Comments Title */

h3 { 
font-size: 24px; 
line-height: 32px; 
font-weight: normal;
margin: 10px 0px 25px 0px;
} /* Page Sub Title */

a, a:visited {
  color: #666666;
  border-bottom: 1px #dcdcdc solid;
  text-decoration: none;
}
a:hover, a:focus {
  color: #6c6c6c;
  border-bottom: 1px #6c6c6c solid;
  outline: none;
}
a:active {
  color: #4a4a4a;
  border-bottom: 1px #4a4a4a solid;
  outline: none;
}
.tag-link {
  margin: 0px 5px 0px 0px;
}

/* STRUCTURE */
/* ----------------------------------------- */
#header {
  position: relative;
  margin: 0px auto;
  width: 450px;
  height: 95px;
  z-index: 100;
}
#logo a { 
  position: absolute;
  display: block;
  height: 60px;
  width: 132px;
  top: -1px;
  background-image: url(images/logo.png);
  background-color: transparent;
  background-repeat: no-repeat;
  border-bottom: 0px;
  z-index: 100;
}
#sidebar {
  position: relative;
  margin: auto 0px;
  top: 200px;
  left: 100px;
  width: 200px;
  height:300px;
  border: 0px #000000 solid;
  font-size: 15px;
  line-height: 21px;
  z-index:100;
}
#index {
  position: relative;
  margin: 0px auto;
  width: 425px;
  font-size: 14px; 
  border: 0px #000000 solid;
}
#index ol {
	list-style-type:decimal-leading-zero;
}
#index li a, #index li a:visited {
  display: block;
  width: 425px;
  height: 45px;
  font-size: 24px; 
  border-bottom: 2px #e7e7e7 solid;
  margin: 0px 0px 15px 0px;
}
#index li a:hover {
  height: 45px;
  color: #8a8a8a;
  border-bottom: 2px #d6d6d6 solid;
}
#index li a:active {
  height: 44px;
  padding-top: 1px;
  border-bottom: 2px #d6d6d6 solid;
}
#holder {
  position: relative;
  margin: 0px auto;
  width: 425px;
  padding: 0px 10px 0px 10px;
}
#content {
  position: relative;
  font-size: 15px;
  line-height: 21px;  
}
#footer {
  position: relative;    
  margin: 150px auto 0px auto;
  width: 100%;
  height: 225px;
  background: rgba(40, 40, 40, 0.05);
  font-size: 13px;
  line-height: 19px;
  z-index: 150;
}
#footer-holder {
  position: relative;
  padding: 25px; 
  margin: 75px auto 0px auto;
  width: 425px;
  color: #111111;
}
#footer-holder a {
  border-bottom: 1px rgba(40, 40, 40, 0.35) solid;
  color: rgba(17, 17, 17, 0.80);
}
#footer-holder a:hover {
  border-bottom: 1px rgba(40, 40, 40, 0.75) solid;
  color: rgba(17, 17, 17, 1.0);
}

/* POST CONTENT */
/* ----------------------------------------- */
#title {
  position: relative;
  margin: 5px auto 0px auto;
  width: 425px;
  height: 75px;
}
#postinfo {
  position: relative;
  font-size: 12px;
  line-height: 20px;
  border-top: 1px #d3d3d3 solid;
  padding-top: 15px;
}
#postnav-next a {
  position: fixed;
  left: 75px;
  top: 50%;
  margin-top: -50px;
  width: 50px;
  height: 50px;
  background-image: url(images/next.png);
  background-position: 0px -55px;
  background-color: transparent;
  background-repeat: no-repeat;
  border-bottom: 0px;
  z-index: 999;
}
#postnav-next a:active {
  background-position: 0px 0px;
}
#postnav-previous a {
  position: fixed;
  right: 75px;
  top: 50%;
  margin-top: -50px;
  width: 50px;
  height: 50px;
  background-image: url(images/previous.png);
  background-position: 0px -55px;
  background-color: transparent;
  background-repeat: no-repeat;
  border-bottom: 0px;
  z-index: 999;
}
#postnav-previous a:active {
  background-position: 0px 0px;
}
#pagenav {
  width: 425px;
  text-align:center;
}
#pagenav a {
  color: #333333;
  font-size:40px;
  border:0px;
}
#pagenav a:hover {
	color: #82a5bf;
  font-size:40px;
}
.searchform {
  margin-top: 25px;
}
.search-button {
  cursor: pointer;
  background-color: transparent;
  background-image: url(images/submit-search.png);
  background-position: 0px -22px; 
  height: 22px;
  width: 24px;
  border: 0px #000000 solid;
  margin: 0px;
}
.search-button:hover, .search-button:active, .search-button:visited {
  display: inline;
  background-image: url(images/submit-search.png);
  background-position: 0px 0px; 
}
.search-field {
	color: #888888;
	font-family: inherit;
	font-size: inherit;
  width: 387px;
	padding-left: 4px;
	-moz-border-radius: 3px;
  -webkit-border-radius: 3px;
	border: 1px #999999 solid;
	background-image: url(images/form-bg.png);
	background-color: transparent;
}
.search-field:focus {
	color: #444444;
	border: 1px #333333 solid;
}


/* CONTACT ME PAGE */
/* ----------------------------------------- */
.contactform {
	font-size: 15px;
	line-height: 24px;
	font-weight: normal;
	z-index: 100;
	margin-top: 9px;
}
.contactform-error {
  font-size: 24px; 
  line-height: 14px; 
  font-weight: normal;
	color: #CC0000;
}
.contactform-success {
  font-size: 24px; 
  line-height: 14px; 
  font-weight: normal;
  color: #444444;
}
.contactform-cc {
  display: block;
  margin-top: 15px;
  font-size: 12px;
  font-weight: normal;
}
.contactform-holder {
  float: left;
  margin: 5px 21px 5px 0px;
}
.contactform-holder2 {
  float: right;
  margin: 5px 0px 5px 0px;
}
.contactform-field {
	color: #888888;
	font-family: inherit;
	font-size: inherit;
  width: 190px;
	padding-left: 4px;
	-moz-border-radius: 3px;
  -webkit-border-radius: 3px;
	border: 1px #999999 solid;
	background-image: url(images/form-bg.png);
	background-color: transparent;
}
.contactform-field:focus {
	color: #444444;
	border: 1px #333333 solid;
}
.contactform-fieldname {
	color: #888888;
	font-family: inherit;
	font-size: inherit;
  width: 419px;
	padding-left: 4px;
	-moz-border-radius: 3px;
  -webkit-border-radius: 3px;
	border: 1px #999999 solid;
	background-image: url(images/form-bg.png);
	background-color: transparent;
}
.contactform-fieldname:focus {
	color: #444444;
	border: 1px #333333 solid;
}
.contactform-area {
  line-height: 24px;
	color: #888888;
	font-family: inherit;
	font-size: inherit;
  width: 415px;
  height: 150px;
	padding: 4px;
	-moz-border-radius: 3px;
  -webkit-border-radius: 3px;
	border: 1px #999999 solid;
	background-image: url(images/form-bg.png);
	background-color: transparent;
	overflow: auto;
}
.contactform-area:focus {
	color: #444444;
	border: 1px #333333 solid;
}

.contactform-requiredfield {
	color: #444444;
	font-family: inherit;
	font-size: inherit;
  width: 190px;
	padding-left: 4px;
	-moz-border-radius: 3px;
  -webkit-border-radius: 3px;
	border: 1px #cc0000 solid;
	background-image: url(images/form-bg.png);
	background-color: transparent;
}
.contactform-requiredfieldname {
	color: #444444;
	font-family: inherit;
	font-size: inherit;
  width: 415px;
	padding-left: 4px;
	-moz-border-radius: 3px;
  -webkit-border-radius: 3px;
	border: 1px #cc0000 solid;
	background-image: url(images/form-bg.png);
	background-color: transparent;
}
.contactform-requiredarea {
	color: #444444;
	font-family: inherit;
	font-size: inherit;
  width: 415px;
  height: 150px;
	padding: 4px;
	-moz-border-radius: 3px;
  -webkit-border-radius: 3px;
	border: 1px #cc0000 solid;
	background-image: url(images/form-bg.png);
	background-color: transparent;
	overflow: auto;
}

.contact-button {
  position: relative;
  cursor: pointer;
  background-color:transparent;
  background-image: url(images/submit-contact.png);
  background-position: 0px -24px; 
  height: 24px;
  width: 44px;
  border: 0px;
  margin-top: 0px;
}
.contact-button:hover, .contact-button:active {
  position: relative;
  background-image: url(images/submit-contact.png);
  background-position: 0px 0px; 
}