/*======================================================================*/
/*  CSS For blakelyons.com																							*/
/*  																																		*/
/*  Year: 2008																													*/
/*  Author: Blake Lyons																									*/
/*  Email: blake@blakelyons.com																					*/
/*  Concept & Design: Blake Lyons																				*/
/*  HTML, CSS, PHP, XTML: Blake Lyons																		*/
/*======================================================================*/



/*----------------------------------------------------------------------*/
/*  Table of Contents																										*/
/*  																																		*/
/*  Containers																													*/
/*																																			*/
/*----------------------------------------------------------------------*/


html {
  margin: 0;
  padding: 0;
  background: url('../images/htmlBG.jpg') top left repeat;
}

body {
  margin: 0;
  padding: 0;
  background: url('../images/bodyBG.jpg') top left repeat-x;
}

.clear { clear: both; }

#wrapper {
  position: relative;
  width: 1020px;
  margin: 0;
  padding: 0;
  background: none;
}

/*----- Headers, Text & Global Styles -----*/

.green { color: #7cd300; }
.fblue { color: #0063dc; }
.fpink { color: #ff0084; }
.red { color: #ff0000; }

/* ----- Fixes dotted outline border on Firefix ----- */
a:active { outline: none; }
a:focus { -moz-outline-style: none; }

#mainbody	a.hiddenlink { color: #fff; text-decoration: none; }

.whiteborder { border: 2px solid #fff; }

p.strong { font-weight: bold; }

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #fff;
	margin: 13px 0 0 0;
	line-height: 1.5em;
	text-decoration: none;
}

.paddingdiv {
	padding: 20px;
}

/*----- Header -----*/

#headerwrapper {
  float: left;
  width: 1020px;
  height: 216px;
  margin: 0;
  padding: 0;
  background: url('../images/headerBG.jpg') top left no-repeat;
}

#headerwrapper .headercontainer {
  width: 780px;
  margin: 5px 120px 0 120px;
  padding: 0;
  /*border: 1px solid #fff;*/
}

/*----- Logo -----*/

#logo {
  float: left;
  width: 285px;
  height: 33px;
  background: url('../images/blakelyons_logo.png') top left no-repeat;
  margin: 50px 0 0 0;
  padding: 0;
}

#logo a {
	width: 285px;
	height: 33px;
	display: block;
	text-indent: -5000px;
	margin: 0;
	cursor: pointer;
}

/*----- Tag Line -----*/

#tagline {
  float: right;
  width: 302px;
  height: 52px;
  background: url('../images/blakelyons_tagline.png') top left no-repeat;
  margin: 40px 20px 0 0;
  text-indent: -5000px;
}

/*----- Navigation -----*/

#main-nav {
  float: left;
  width: 920px;
  height: 50px;
  margin: 0;
  padding: 0;
  /*border: 1px solid #fff;*/
}

#main-nav ul {
  margin: 5px 0 0 0;
  padding: 0;
}

#main-nav li {
  float: left;
  list-style: none;
}

#main-nav a {
  height: 39px;
  display: block;
  text-indent: -5000px;
}

/*----- Main-Nav Buttons -----*/

#main-nav #btnHome {
  width: 98px;
  height: 39px;
  margin-right: 60px;
  background: transparent url('../images/btnHome.png') top left no-repeat;
  cursor: pointer;
}

#main-nav #btnHome:hover, #main-nav #btnHome.current {
  background-position: bottom left;
}

#main-nav #btnAboutMe {
  width: 129px;
  height: 39px;
  margin-right: 60px;
  background: transparent url('../images/btnAboutMe.png') top left no-repeat;
  cursor: pointer;
}

#main-nav #btnAboutMe:hover, #main-nav #btnAboutMe.current {
  background-position: bottom left;
}

#main-nav #btnPortfolio {
  width: 107px;
  height: 39px;
  margin-right: 60px;
  background: url('../images/btnPortfolio.png') top left no-repeat;
  cursor: pointer;
}

#main-nav #btnPortfolio:hover, #main-nav #btnPortfolio.current {
  background-position: bottom left;
}

#main-nav #btnContact {
  width: 103px;
  height: 39px;
  margin-right: 60px;
  background: transparent url('../images/btnContact.png') top left no-repeat;
  cursor: pointer;
}

#main-nav #btnContact:hover, #main-nav #btnContact.current {
  background-position: bottom left;
}

#main-nav #btnLinks {
  width: 100px;
  height: 39px;
  margin: 0;
  background: transparent url('../images/btnLinks.png') top left no-repeat;
  cursor: pointer;
}

#main-nav #btnLinks:hover, #main-nav #btnLinks.current {
  background-position: bottom left;
}

/*==============================================================
	Contact Me
===============================================================*/

form#email_form {
	width: 100%;
}

#emailform {
	padding: 20px 60px 60px 60px;
}

.spacer {
	height: 10px;
	clear: both;
}

span.required { position: relative; color: #ff0000; font-weight: bold; font-size: 14px; margin: -20px 0 0 3px; }

h1#headercontactme {
	width: 128px;
	height: 28px;
	display: block;
	background: url('../images/h1_contactme.png') top left no-repeat;
	text-indent: -5000px;
	margin: 5px 0 5px 0;
	padding: 0;
}

h1#headerthankyou {
	width: 128px;
	height: 28px;
	display: block;
	background: url('../images/h1_thankyou.png') top left no-repeat;
	text-indent: -5000px;
	margin: 5px 0 5px 0;
	padding: 0;
}

#emailform label {
	float: left;
	width: 75px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #fff;
	font-weight: normal;
	padding: 5px;
}

#emailform label#main-label {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #fff;
	font-weight: normal;
	padding: 5px;
}

#emailform label.error {
	width: 175px;
	color: #ff0000;
}

#emailform input {
	float: left;
	width: 175px;
	margin: 0 0 0 10px;
	padding: 2px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	border: 2px solid #7cd300;
	background: #333;
	color: #7cd300;
}

#emailform input:focus {
	border: 2px solid #7cd300;
	background: #000;
	color: #7cd300;
}	

#emailform textarea {
	float: left;
	width: 350px;
	height: 100px;
	margin: 5px 0 0 5px;
	padding: 2px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	border: 2px solid #7cd300;
	background: #333;
	color: #7cd300;
}

#emailform textarea:focus {
	border: 2px solid #7cd300;
	background: #000;
	color: #7cd300;
}

#emailform #submit input {
	float: right;
	width: 75px;
	margin: 20px 10px 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	padding: 2px;
	background: #333;
	color: #7cd300;
	cursor: pointer;
}

#emailform #reset input:hover {
	background: #000;
}

#emailform #reset input {
	float: right;
	width: 75px;
	margin: 20px 10px 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	padding: 2px;
	background: #333;
	color: #7cd300;
	cursor: pointer;
}

#emailform #submit input:hover {
	background: #000;
}

div.error { display: none; }

/*================================================================
	Main Body
=================================================================*/

#mainbody {
	position: relative;
	width: 800px;
	margin: 0;
	padding: 0;
}

#mainbody a {
	color: #7cd300;
	text-decoration: none;
}

#mainbody a:hover {
	color: #fff;
	text-decoration: underline;
}

#mainbody ul {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #fff;
}

#mainbody li {
	line-height: 1.5em;
}

#leftcontent {
	float: left;
	width: 536px;
	margin: 0 25px 0 0;
	text-align: left;
}

/*================================================================
	Welcome to my Site!
=================================================================*/

h1#h1-welcome {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: normal;
	color: #7cd300;
	margin: 10px 0 0 0;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #fff;
	font-weight: normal;
	margin: 0 0 0 0px;
	line-height: 1.2em;
}

/*==============================================================
	About Me
===============================================================*/

h1#headeraboutme {
	width: 111px;
	height: 28px;
	display: block;
	background: url('../images/h1_aboutme.png') top left no-repeat;
	text-indent: -5000px;
	margin: 5px 0 5px 0;
	padding: 0;
}

/*==============================================================
	Links Page
===============================================================*/

h1#headerlinks {
	width: 111px;
	height: 28px;
	display: block;
	background: url('../images/h1_links.png') top left no-repeat;
	text-indent: -5000px;
	margin: 5px 0 5px 0;
	padding: 0;
}

h1#headerwebdesign {
	width: 135px;
	height: 28px;
	display: block;
	background: url('../images/h1_webdesign.png') top left no-repeat;
	text-indent: -5000px;
	margin: 5px 0 5px 0;
	padding: 0;
}

h1#headerprint {
	width: 135px;
	height: 28px;
	display: block;
	background: url('../images/h1_print.png') top left no-repeat;
	text-indent: -5000px;
	margin: 5px 0 5px 0;
	padding: 0;
}

h1#headerphotography {
	width: 140px;
	height: 28px;
	display: block;
	background: url('../images/h1_photography.png') top left no-repeat;
	text-indent: -5000px;
	margin: 5px 0 5px 0;
	padding: 0;
}

/*==============================================================
	Portfolio
===============================================================*/

h1#headerportfolio {
	width: 140px;
	height: 28px;
	display: block;
	background: url('../images/h1_portfolio.png') top left no-repeat;
	text-indent: -5000px;	
	margin: 5px 0 5px 0;
	padding: 0;
}

.sectionblock {
	margin: 0 0 100px 0;
}

#visitsite {
	margin-top: 20px;
	margin-left: -10px;
}

#visitsite a {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #ccc;
	padding: 5px;
	background: #272727;
	text-decoration: none;
	margin: 0 0 0 10px;
}

#visitsite a:hover {
	color: #000;
	background: #7cd300;
	text-decoration: none;
}


#visitsite {
	margin-top: 0px;
	margin-left: -10px;
}

#forsale a {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #ccc;
	padding: 5px;
	background: #272727;
	text-decoration: none;
	margin: 0 0 0 10px;
}

#forsale a:hover {
	color: #000;
	background: #7cd300;
	text-decoration: none;
}

/*==============================================================
	Featured Work
===============================================================*/

h1#headerfeaturedwork {
	width: 171px;
	height: 28px;
	display: block;
	background: url('../images/h1_featuredwork.png') top left no-repeat;
	text-indent: -5000px;
	margin: 5px 0 5px 0;
	padding: 0;
}

/*----- Image Hover -----*/

.imagehover p {
	position: absolute;
	margin: 0px;
	margin-left: 2px;
	margin-top: 2px;
	z-index:2;
	background-Color: #000;
	color: #ffffff;
	width: 100%;
	text-align: left;
	padding: 10px;
	padding-bottom: 10px;
	opacity:.9;
	display: none;
	clear: none;
	font-size: 10pt;
	text-decoration: none;
}

/*----- Featured Work Image Slider -----*/

#cycle-images {
	float: left;
	width: 536px;
	height: 260px;
	display: block;
	overflow: hidden;
	margin: 10px 0 0 0;
}

#img1desc {
	position: absolute;
	width: 400px;
	height: 40px;
	background: #000;
}

/*----- btnNumber1 -----*/

#numbers {
	float: right;
	width: auto;
	height: 14px;
}

#number1 {
	float: left;
	width: 14px;
	height: 14px;
	display: block;
	overflow: hidden;
	margin: 5px 0 0 0;
}

#number1 a {
	width: 14px;
	height: 14px;
	display: block;
	background: url('../images/btnNumber1.jpg') top left no-repeat;
	text-indent: -5000px;
	cursor: pointer;
}

#btnNumber1 a:hover {
	background-position: bottom;
}

#number2 {
	float: left;
	width: 14px;
	height: 14px;
	overflow: hidden;
	margin: 5px 0 0 5px;
}

#number2 a {
	width: 14px;
	height: 14px;
	display: block;
	background: url('../images/btnNumber2.jpg') top left no-repeat;
	text-indent: -5000px;
	cursor: pointer;
}

#btnNumber2 a:hover {
	background-position: bottom;
}

#number3 {
	float: left;
	width: 14px;
	height: 14px;
	overflow: hidden;
	margin: 5px 0 0 5px;
}

#number3 a {
	width: 14px;
	height: 14px;
	display: block;
	background: url('../images/btnNumber3.jpg') top left no-repeat;
	text-indent: -5000px;
	cursor: pointer;
}

#btnNumber3 a:hover {
	background-position: bottom;
}

#number4 {
	float: left;
	width: 14px;
	height: 14px;
	overflow: hidden;
	margin: 5px 0 0 5px;
}

#number4 a {
	width: 14px;
	height: 14px;
	display: block;
	background: url('../images/btnNumber4.jpg') top left no-repeat;
	text-indent: -5000px;
	cursor: pointer;
}

#btnNumber4 a:hover {
	background-position: bottom;
}


/*================================================================
	Right Content & Navigation
=================================================================*/

#rightcontent {
	float: left;
	width: 228px;
	margin: 0;
	padding: 0;
	text-align: left;
}

/*----- Menu Contact Info -----*/

#menu-contactinfo {
	float: left;
	width: 227px;
	margin: 15px 0 10px 0;
}

/*----- Menu Wicked Links -----*/

#menu-wickedlinks {
	float: left;
	width: 227px;
	margin: 15px 0 10px 0;
}

/*----- Menu MyFlickr -----*/

#menu-myflickr {
	float: left;
	width: 227px;
	margin: 15px 0 10px 0;
}

#menu-middle img {
	float: left;
	margin: 10px;
	border: 0;
}

.flickrimages {
	width: auto;
	margin-left: 17px;
}

/*----- Menu Container Styles -----*/

#menu-top {
	float: left;
	width: 227px;
	height: 4px;
	margin: 0;
	padding: 0;
	display: block;
	background: url('../images/navBG_top.png') top left no-repeat;
}

#menu-middle {
	float: left;
	width: 227px;
	margin: 0;
	padding: 0 0 10px 0;
	background: url('../images/navBG_middle.png') top left repeat-y;
}

#menu-middle h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #fff;
	margin: 5px 0 10px 10px;
}

#menu-middle p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #fff;
	margin: 10px 0 0 10px;
	text-indent: 15px;
}

#menu-middle a {
	color: #7cd300;
	text-decoration: none;
	font-weight: normal;
}

#menu-middle a:hover {
	color: #fff;
}

#menu-bottom {
	float: left;
	width: 227px;
	height: 4px;
	margin: 0;
	padding: 0;
	display: block;
	background: url('../images/navBG_bottom.png') top left no-repeat;
}

/*================================================================
	`
=================================================================*/

#twentyspacer {
	width: 100%;
	height: 20px;
	display: block;
}

#footer {
	position: relative;
	width: 100%;
	height: 186px;
	display: block;
	background: url('../images/footerBG_2.jpg') top left repeat-x;
}

#footer-container {
	width: 800px;
	height: 176px;
	display: block;
	margin-top: 10px;
}

#footernav {
	float: right;
	margin: 10px 0 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #4b4b4b;
}

#footernav ul {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #4b4b4b;
	margin: 10px 0 2px 0;
}

#footernav li {
	display: inline;
	height: 12px;
	overflow: hidden;
	line-height: 1.2em;
	font-weight: normal;
	margin: 0;
	padding: 0;
	border-right: 1px solid #4b4b4b;
}

#footernav li.noborder {
	border: none;
}

#footernav a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #4b4b4b;
	padding: 0 5px 0 5px;
	text-decoration: none;
}

#footernav a:hover {
	color: #fff;
}

#copyright {
	float: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #4b4b4b;
	margin: 0;
}

#copyright a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #4b4b4b;
	padding: 0 5px 0 5px;
	text-decoration: none;
}

#copyright a:hover {
	color: #fff;
}