body {
	background:#C19A6B url("/jay-gilliford/_img/JG_background_gradient_01.gif") repeat-x 0 0;
	margin-top:0;
	margin-bottom:0;
	 }
	 
h1,h2,h3,h4,h5,h6,legend {
    font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
    color: #846E51;
    font-weight: bold;
}
	
h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #846E51;
	padding: 5px 0 19px;
    font-size: 28px;
    line-height: 39px;
}
h2,legend {
    padding: 14px 0 15px;
    font-size: 24px;
    line-height: 34px;
}
h3,fieldset fieldset legend {
    padding: 7px 0 8px;
    font-size: 20px;
    line-height: 27px;
}
h4,h5,h6 {
    padding: 10px 0;
    font-size: 16px;
    line-height: 22px;
}

p,li,pre {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	color: #846E51; 
	font-size: 14px;
    line-height: 21px;
}

a {
    border-bottom: 1px solid #846E51;
    color: #846E51;
    text-decoration: none;
    outline: none;
}
a:hover,
a:focus {
    border-bottom: 1px solid #B79F7F;
    color:#B79F7F;
    cursor: pointer;
}
a:active {
    -webkit-transition: 0s !important;
       -moz-transition: 0s !important;
        -ms-transition: 0s !important;
         -o-transition: 0s !important;
            transition: 0s !important;
	border-bottom: 1px solid #D2BEA4;
	color: #D2BEA4;
}



ul,ol,dl,dd {margin:0; padding:0;}  /* this resets all lists padding, margins, etc... to zero so that the user agent/browser/webkit can't add its own*/

ul {margin:0 0 21px 10px;}
ol {margin:0 0 21px 30px;}
li {
    background: none;
    margin: 0 0 10px;
    padding: 0 0 0 20px;
    list-style: none;
}
ol li {
    background: none; /* (note on bullets) here is where I can put in my own image or sprite for a bullet*/
    padding: 0;
    list-style: decimal;
}
ul ul,
ol ol {margin-top:10px;}



.widget {padding:15px;}
.widget-title,
.widget li{
	color:#669966;
}

/* 	NOTE on Bullets --> don't use the standard bullets because they change so much from browser to browser.
	Instead change the list-style to none and use an image of my own. see above (note on bullets) */

.widget a { /* using ".widget a" designates that I'm styling the links within the widget class */
	border-bottom: 1px solid #669966;
	color:#669966;} 

/* If using ".widget a:visited" - visited inherits, so I don't need it unless it's different */
/* a:active also inherits hover so I don't need it unless I want active to be different */

.widget a:hover, 
.widget a:focus {
	border-bottom: 1px solid #B3CCB3;
	color:#B3CCB3;} /* making hover slightly different is important to distinguish that feature */
	
/* order for anchors/ links must be: 1) link, 2) hover/focus, 3)active, 4)visited -- otherwise not all feature will work */

.widget a:active {
	border-bottom: 1px solid #CCFFCC;
	color:#CCFFCC;}
	

.sep,
.sep a,
.entry-meta,
.entry-meta a {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 12px;
	color: #669966; 
}

.sep a,
.entry-meta a {border-bottom: 1px solid #669966;}

.sep a:hover,
.sep a:focus,
.entry-meta a:hover,
.enrty-meta a:focus {
	border-bottom: 1px solid #336633;
    color:#336633;
    cursor: pointer;
}


	 
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style4 {color: #724416}
.style5 {
	color: #669966;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
		}
.style8 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #724416; font-size: 18px; }
.style10 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #724416; font-size: 16px; }
.style11 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #724416;
	font-weight: bold;
	font-size: 20px;
}

.background-01-lightgreen-gradient {
background-image: url(/jay-gilliford/_img/light_green_gradient_01.gif);
background-repeat: repeat-x;
z-index:-2;
} 

#home
{
  display: block;
  width: 170px;
  height: 50px;
  background: url("/jay-gilliford/_img/sprites/button-home.gif") no-repeat 0 0;
  border-top:solid #336633;
  border-top-width:10px;
  border-bottom:solid #336633;
  border-bottom-width:10px;
}

#home:hover
{ 
  background-position: 0 -50px;
}

#home span
{
  position: absolute;
  top: -999em;
}

#about
{
  display: block;
  width: 170px;
  height: 50px;
  background: url("/jay-gilliford/_img/sprites/button-about.gif") no-repeat 0 0;
  border-bottom:solid #336633; 
  border-bottom-width:10px;
}

#about:hover
{ 
  background-position: 0 -50px;
}

#about span
{
  position: absolute;
  top: -999em;
}

#projects
{
  display: block;
  width: 170px;
  height: 50px;
  background: url("/jay-gilliford/_img/sprites/button-projects.gif") no-repeat 0 0;
  border-bottom:solid #336633; 
  border-bottom-width:10px;
}

#projects:hover
{ 
  background-position: 0 -50px;
}

#projects span
{
  position: absolute;
  top: -999em;
}

#galleries
{
  display: block;
  width: 170px;
  height: 50px;
  background: url("/jay-gilliford/_img/sprites/button-galleries.gif") no-repeat 0 0;
  border-bottom:solid #336633; 
  border-bottom-width:10px;
}

#galleries:hover
{ 
  background-position: 0 -50px;
}

#galleries span
{
  position: absolute;
  top: -999em;
}

#blog
{
  display: block;
  width: 170px;
  height: 50px;
  background: url("/jay-gilliford/_img/sprites/button-blog.gif") no-repeat 0 0;
  border-bottom:solid #336633; 
  border-bottom-width:10px;
}

#blog:hover
{ 
  background-position: 0 -50px;
}

#blog span
{
  position: absolute;
  top: -999em;
}

#contact
{
  display: block;
  width: 170px;
  height: 50px;
  background: url("/jay-gilliford/_img/sprites/button-contact.gif") no-repeat 0 0;
  border-bottom:solid #336633; 
  border-bottom-width:10px;
}

#contact:hover
{ 
  background-position: 0 -50px;
}

#contact span
{
  position: absolute;
  top: -999em;
}