/*** SITE CSS ***/

* { padding:0; margin:0; }

html { min-height: 100%; margin-bottom: 1px; }  /* FireFox Page-Shift Fix */

body {
	margin: 0;
	text-align: center;
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.75em;
	color:#ccc;
	background-color: #000000;
	background-image: url(images/bg_body.jpg);
	background-repeat:repeat-y;
	background-position: center top;
}

/*** USEFUL ***/

.clear {clear: both;}
.clear_fusion {clear: both;line-height: 1px;height: 1px;font-size: 1px;}
.float_left {float:left;}
.float_right {float:right;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.img_left {float: left; margin: 0 15px 5px 0; border:5px solid #202020}
.img_right {float: right; margin: 0 0 5px 15px; border:5px solid #202020}
.vertical_align {display: inline;vertical-align: middle;}
.vertical_align_all * {display: inline;vertical-align: middle;}
a img {border: 0px none;}

/*** STRUCTURE ***/
#background {
	background-image: url(images/bg_top.jpg);
	background-repeat:no-repeat;
	background-position: center top;
	height:500px;
}

#wrapper {
	margin:0 auto;
	text-align: left;
	padding: 15px 0 9px 0;
	width:800px;
	}
#header {
	background-image: url(images/bg_header.png);
	background-repeat:no-repeat;
	background-position: center top;
	height:65px;
	margin-bottom:8px;
	padding:23px;
}

#content {
	background-image: url(images/bg_content.png);
	background-repeat:repeat-y;
	background-position: left top;
	padding:0px 5px 0 20px;
}

#navigation {
	background-image: url(images/bg_navigation.png);
	background-repeat:no-repeat;
	background-position: left top;
	height:46px;
}

#footer {
	background-image: url(images/bg_footer.png);
	background-repeat:no-repeat;
	background-position: left top;
	height:19px;
	padding:10px 20px;
	font-size:0.95em;
	color:#aaa;
}

.left_col {
	width:505px;
	float:left;
	margin-top:11px;
}

.right_col {
	width:233px;
	float:left;
	margin-left:15px;
	background-color:#333333;
	border:1px solid #262626;
	padding:5px 7px;
	margin-top:5px;
}

/*** GENERAL FORMATTING ***/

p {
	line-height: 150%;
	padding: 0 0 1em 0;
	font-size:0.95em;
}

ul, ol {
	line-height: 160%;
	padding: 0 0 1em 25px;
}

h1 {
	border-bottom:none;
	font-size:1.7em;
	color:#ffffff;
}

h2 {
	font-size: 1.45em;
	color: #ffffff;
	padding: 0 0 0.25em 0;
	margin: 0 0 0.5em 0;
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	width:100%;
	border-bottom:4px solid #e41b5b;
}

h3, h4 {
	font-size:1.2em;
	padding:0 0 0.5em 0;
	line-height:140%;
}

.right_col h3 {
	font-size:1.1em;
	color:#ffffff;
}

h4 {
	color:#ffffff;
	border-bottom:2px solid #eb1b5b;
	margin-bottom:1em;
	padding-bottom:3px;
}

h5 {
	color:#eb1b5b;
	font-size:1em;
	padding-bottom:0.5em;
}

a, a:visited, a:active {
	color: #e41b5b;
	text-decoration:none;
}

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

span {
	color:#e41b5b;
}

/*** FORMATTING ***/

.example_wrapper {
	border-bottom:2px dotted #eb1b5b;
	padding-bottom:0.5em;
	margin-bottom:1em;
}

.callout {
	margin-bottom:8px;
}

/*** HEADERS ***/

.welcome {
	display:block;
	width:100%;
	text-indent:-3000px;
	background-image:url(images/welcome.gif);
	background-position:left top;
	background-repeat:no-repeat;
}

.freelance_header {
	display:block;
	text-indent:-3000px;
	width:264px;
	height:52px;
	background-image:url(images/freelance_web_developer.gif);
	background-repeat:no-repeat;
	background-position:left top;
	float:right;
}

/*** FORMS ***/

.contact_form{
	width:481px;
	float:left;
	padding-right:2em;
	text-align:right;
	padding-top:1em;
}
.contact_form form {
	border:0;
	width:400px;
}
.contact_form form fieldset{
	border:0;
}
.contact_form input, .contact_form textarea{
	vertical-align:top;
	width:17em;
	border: 1px solid #C42661;
	background-color:#222222;
	color:#FFFFFF;
	margin-left:10px;
	padding:5px;
	font-size:13px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
}
.contact_form input:hover, .contact_form textarea:hover, .contact_form input:focus, .contact_form textarea:focus {
background-color:#333333;
color: #FFFFFF;
border: 1px solid #C42661;
}

.contact_form label{
	display:block;
	padding-bottom:1em;
	line-height:2em;
	font-size:12px;
}
.contact_form .form_button{
	width:75px;
	display:inline;
	margin-left:5px;
	border: 0px none;
	color:#ffffff;
	height:28px;
	background-image:url(images/button.jpg);
	background-position:left top;
	background-repeat:no-repeat;
}
.contact_form .form_button:hover{
	color: #ffffff;
	border: 0px none;
	background-color: #d75082;
	cursor:pointer;
	background-position: 0 -28px;
}

/*** MENUS ***/

/*** SITE MENUS CSS ***/

#navigation ul {
	list-style-type:none;
	padding:0;
	padding-left:3px;
	padding-top:10px;
}

#navigation ul li {
	float:left;
	padding-right:2px;
	text-align:center;
	text-transform:capitalize;
	font-weight:bold;
}

#navigation ul li a {	
	display:block;
	padding-bottom:16px;
	color:#ffffff;
	width:80px;
}

#navigation ul li a:hover, #home .home, #about .about, #portfolio .portfolio, #links .links, #contact .contact, .current_page_item {
	background-image:url(images/bg_hover.png);
	background-position:left bottom;
	background-repeat:no-repeat;
	text-decoration:none;
}