/*
File:			custom.css
Description:	Custom styles for Your Theme

HOW TO USE THIS FILE:

Override any class you want and it will change default styling to suit your needs.

For example, if you wish to change the default text blog title to grey, you would add the 
following declarations to this file:

	#header .blog-title a{ background:#cccccc }     <--- This makes blog title background grey

*/
/*=== Logo Spot ===*/
#header .blog-title{ line-height:45px; display:inline }
#header .blog-title a{ background:#6fbe63; color:#ffffff; font-size:14px; font-weight:bold; padding:10px 15px; text-transform:uppercase }
  #header .blog-title a:hover{ text-decoration:none; background:#34a428}
#header .blog-description{ display:inline; color:#6fbe63; font-style:oblique; font-size:14px; font-weight:bold; padding:0 15px; text-transform:lowercase }
#header h1.logo a:hover{ background:none }

/*=== Search Spot ===*/
#search-spot .search-form{ padding:15px 0 0 0; position:relative }
  #search-spot .search-form input{ border:1px solid #C0C0C0; width:248px; padding:6px 10px 5px 10px; color:#C0C0C0; font-size:14px }
  #search-spot .search-form button{ background:url(images/search-btn-trans.png) #C0C0C0 no-repeat; border:none; position:absolute; width:30px; height:30px; top:15px; right:0 }

/*=== Footer ===*/
#footer .copyright{ font:normal 11px Georgia; background:transarent; padding:10px 25px 20px 25px }
  #footer a{ color:#000; text-decoration: none; border-bottom:1px dotted; padding:2px 1px }
    #footer a:hover{ color:#FFFFFF; text-decoration:none; border:none; background:#32a524 }

/*---------GENERAL STYLING--------- */
body{ background: url(images/bgr.gif) #F9F9F2 repeat-x top; font-family:Georgia }
a{ color:#000; text-decoration: none; }
  a:hover{ color:#FFFFFF; text-decoration:none; background:#34a428 }
input,select,textarea{ border: #e6e6e6 1px solid; font-size: 12px; padding: 2px }
li{ list-style: none }
.fix{ clear: both; height: 1px; margin: -1px 0 0; overflow: hidden }
.fl{ float: left }
.fr{ float: right }
.ac{ text-align: center }
.ar{ text-align: right }
img.centered{ display: block; margin-left: auto; margin-right: auto }
img.alignright{ padding: 4px; margin: 3px 0 2px 10px; display: inline }
img.alignleft{ padding: 4px; margin: 3px 10px 2px 0; display: inline }
.alignleft{ float: left }
.alignright{ float: right }