/* @override 
	http://localhost.local:8888/cms/wp-content/themes/HL1/style.css
	http://dev.mobgfx.com/cms/wp-content/themes/HL1/style.css
	http://hasslunsford.com/cms/wp-content/themes/HL1/style.css
*/

/*
Theme Name: HL1
Theme URI: http://shawncope.com
Description: A theme completely stripped of all styling. Functionality is based on the kubrick theme.
Version: 1.0
Author: Shawn Cope
Author URI: http://shawncope.com
Tags: blankSlate, no style, clean, empty

This theme was designed and built by Shawn Cope,
whose blog you will find at http://shawncope.com/

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php
*/

@import "style/reset.css";
a { text-decoration: none; color: #324855; font-weight: bold; }

/*Utility Styles************************/
.alignright {
	float:right;
}
.alignleft {
	float:left;
}
.aligncenter {
	display:block;
	margin:0 auto;
}
.center {text-align: center; /* border-bottom: 1px solid silver */}
/* CLEAR FLOATS
/* Add class "clear" to elements that contain floated elements and they will hold the height correctly
*******************************************************/
.clear { display: inline-block; }   
.clear:after, .container:after {
content: ".";
display: block;
height: 0; 
clear: both; 
visibility: hidden;
}
.clear { display: block; }
.clearing { clear: both; }
/*******************************************************/

/*Custom Styles************************/



/* BASE LAYOUT */
html,body,#page,#container {
	height:100%;
}

/* BACKGROUND */
html {
	background: #e6e6e6 url(images/htmlbg.png) center top repeat-y;
	position:relative;z-index: -3;
}

body {
	background: transparent url(images/bodybg.png) no-repeat center 120px;
	position:relative;z-index: -2;
	font-size: .9em
}

body > #page {
	height:auto;
	min-height:100%;
	width:974px;
	margin:0 auto;
	background: url(images/vbar.png) repeat-y right top;
}

body #page {
	_width: 974px;
	_height: 100%;
	_margin:0 auto;
	_background: url(images/vbar.png) repeat-y right top;
}


#main {
	overflow:hidden;
	width:960px;
	padding-left: 10px;
	padding-bottom:120px;
	background: transparent
}


	
/* alternatively use [float:left] or apply .clearfix to the containing element */
#header {
	background:transparent;
	color:black;
	height:80px;
}

#header h1#logo {
	width:700px;
	height:100%;
	text-indent:-2000px;
	float:left;
	background: url(images/logo.png) no-repeat center 10px
}

#header h1#logo a {
	display: block;
	width: 100%;
	height: 100%
}

#topBox {
	/* padding: 22px 18px 0 0; */ /* for search box */
	padding: 20px 25px 0 0;
	float:right;
}

#topBox .hidden { display: none; }

/* NAVIGATION */

ul#nav {
	padding-top: 20px;
	float:right;
	text-indent: -3000px;
	height: 542px;
	width: 220px;
	background: url(images/nav.png) no-repeat -440px 20px;
}


ul#nav li.menu {
	height: 40px;
}

ul#nav li.button {
	height: 140px;
}

ul#nav li.cert { text-indent: -3000px; text-align: center; height: 100px; background: url(images/certification_logo_small.gif) no-repeat 40% bottom }

ul#nav li a {
	display:block;
	height: 100%;
}

ul#nav li#about.current a { background: url(images/nav.png) no-repeat -220px top }
ul#nav li#about a:hover {
	background: url(images/nav.png) no-repeat -220px top 
}
ul#nav li#portfolio.current a { background: url(images/nav.png) no-repeat -220px -40px }
ul#nav li#portfolio a:hover {
	background: url(images/nav.png) no-repeat -220px -40px
}
ul#nav li#contact.current a { background: url(images/nav.png) no-repeat -220px -80px }
ul#nav li#contact a:hover {
	background: url(images/nav.png) no-repeat -220px -80px
}
ul#nav li#mobile.Mobile, ul#nav li#mobile.Apps, ul#nav li#mobile.Sites { background: url(images/nav.png) no-repeat -220px -120px }
ul#nav li#mobile a:hover {
	background: url(images/nav.png) no-repeat -220px -120px
}
ul#nav li#web.Web, ul#nav li#web.Websites, ul#nav li#web.Interfaces, ul#nav li#web.Online { background: url(images/nav.png) no-repeat -220px -260px }
ul#nav li#web a:hover {
	background: url(images/nav.png) no-repeat -220px -260px
}
ul#nav li#print.Other, ul#nav li#print.Branding, ul#nav li#print.Print { background: url(images/nav.png) no-repeat -220px -400px; }
ul#nav li#print a:hover {
	background: url(images/nav.png) no-repeat -220px -400px;
}

#web ul#nav li#web a:active {
	background: url(images/nav.png) no-repeat 0px -260px
}

ul#nav li#about a:active {
	background: url(images/nav.png) no-repeat 0px top
}
ul#nav li#portfolio a:active {
	background: url(images/nav.png) no-repeat 0px -40px
}
ul#nav li#contact a:active {
	background: url(images/nav.png) no-repeat 0px -80px
}
ul#nav li#mobile a:active {
	background: url(images/nav.png) no-repeat 0px -120px
}
ul#nav li#web a:active {
	background: url(images/nav.png) no-repeat 0px -260px
}
ul#nav li#print a:active {
	background: url(images/nav.png) no-repeat 0px -400px
}

/* @group Content */

#content {
	background: transparent;
	width:700px;
	overflow: hidden;
	border-bottom: 1px solid white;
	float:left;
	padding: 20px 20px 20px;
	position:relative; z-index:1;
	/*-webkit-box-shadow: silver 0px 0px 10px;
	-moz-box-shadow: gray 0px 0px 10px;*/
}

div#bg { background: white url(images/home_bg.jpg) no-repeat center 1px; width: 740px; float: left }
div#bgcontact { background: white url(images/contact_bg.jpg) no-repeat center 200px; width: 740px; float: left; }
div#bgabout { background: white url(images/about_bg.jpg) no-repeat center top; padding-top: 100px; width: 740px; float: left;  }
div#bgportfolio { background: white url(images/portfolio.png) no-repeat center 3px; padding-top: 0em; padding-bottom: 20px; width: 740px; float: left;  }
#content.hass { background: url(images/graphic_home.png) no-repeat bottom right; }
/*#content.portfolio { background: url(images/portfolio.png) no-repeat center 3px; padding-top: 0em; padding-bottom: 20px; }
#content.aboutpage { background: url(images/about_bg.jpg) no-repeat center top; padding-top: 100px; }*/

#content.page p { padding-top: 1em; }
#content div ul.skills { width: 210px;float: left; padding: 0 1em 0 3em; margin-bottom: 1em; }
.page ul.skills li { font-size: 1em; font-weight: bold; color: /* #44687e */ gray; padding: .25em 0; list-style-image: url(images/checkmark.png); list-style-position: outside; height: ; margin-bottom: .25em; }
.page ul#social li { margin-top: 1em; width: 230px; height: 45px; float: left; text-indent: -4000px;}
.page ul#social li a { display: block; height: 100%; }
li#uno { background: url(images/socialmedia.png) no-repeat left center; }
li#dos { background: url(images/socialmedia.png) no-repeat center center; }
li#tres { background: url(images/socialmedia.png) no-repeat right center; }

ul#dotmobi { float: right; width: 150px; height: 151px; background: url(images/certification_logo_small.jpg) no-repeat right}

.page h3#capabilities { height: 28px; background: url(images/h3_capabilities.png) no-repeat; text-indent: -4000px; margin-bottom: 0.5em; }
.page h3#background { height: 28px; background: url(images/h3_background.png) no-repeat; text-indent: -4000px; margin-top: 1em; }
.page h3#contactlabel { height: 28px; background: url(images/h3_contact.png) no-repeat; text-indent: -4000px; }
.page h3#connect { height: 28px; background: url(images/h3_connect.png) no-repeat; text-indent: -4000px; margin-top: 2em; }

.page div.story { padding: 0 1em 1em; }
.page div.story div { width: 120px; height: 180px; margin-left: 1em; background: url(images/about_hass.png) no-repeat center center; }

#flash { margin-top: 0px; }
#flash img {  }

#module {
	border:1px solid silver;
	background:transparent;
	color:gray;
	width:460px;
	_width:460px;
	padding:10px;
	float:left;
	overflow:hidden;
}

/* @group Contact Form */

div.contactform { padding: 0; }
div#content.page div.post { margin: 0; }
form { width: 480px; padding: 1em; background: #f8f8f8; text-align: center; border-top: 1px solid #324855; border-bottom: 1px solid white; margin: 1em auto }
form label { display: block; margin-top: 1em; }
form input, form textarea { width: 400px; }
form input { height: 20px; font-size: 1.2em; color: gray; text-align: center; }
input#contactsubmit { display: block; margin: 1em auto; width: 152px; height: 40px; background: url(images/btn_contact.png) no-repeat; border: none; color: white; cursor: pointer; }
p.contactform_respons { text-align: center; font-weight: normal; font-size: 1.5em; color: gray; }

/* @end */

/* @end */

#bottomBar {
	border:1px solid black;
}

#footer p { text-align: left; color: white; padding: 1em; }

#footer {
	position:relative;
	margin-top:-60px;
	height:60px;
	clear:both;
	background: #2f4855 url(images/foot.png) center top no-repeat;
}

#footer p span { float: right; }
	
/* POSITIONING */
.clear {
	clear:both;
}

html .floatClear {
}


	
/* placeholder for a working clearfix for IE6 */
.left {
	float:left;
}

.right {
	float:right;
}


	
/* TYPOGRAPHY */
body {
	font-family:"lucida grande", corbel, sans-serif;
	font-size:small;
	line-height:1.4;
	color: gray;
}

h1 {
	font-size:xx-large;
	line-height:1.6;
}

h2.pagetitle { font-size: 1.2em; padding-top: 40px; margin-bottom: -25px }

h1, h2, h3, h4, h5, h6 { color: #324855; }
	
/* NAVIGATION */
ul#topBar li {
	display:inline;
}

#content h1 {
	padding-top: 10px;
	height: 130px;
	text-indent: -9999px;
	background: url(images/headline.png) no-repeat center 10px
}

#content h4 {
	height: 90px;
	text-indent: -9999px;
	background: url(images/headline.png) no-repeat center bottom	
}

/* @group WP Styles */

div.post { margin-top: 20px; border-left: 1px solid silver; border-right: 1px solid silver; border-bottom: 1px solid silver: width: 700px; }
div.post div.desc { clear: both; margin-bottom: 1em; }
/*div.post a:hover,*/ h2.pagetitle a:hover, dd a:hover { color: white; background-color: #324855; }
dd.gallery-caption a { padding: 0 .25em; }
/*div.post div.gallery a { padding: 0; }*/
dl.gallery-item { margin-bottom: 1em; }
div.post div.gallery a:hover img { border: 2px solid #324855; }

div.hentry { background: white url(images/home_bg.jpg) no-repeat center top; overflow: auto; background-color: ; border-bottom: 1px solid silver }

div.postmetadata { border-top: 1px solid #324855; padding: .25em .5em ; text-transform: uppercase; color: #324855; font-size: 1.2em; }
div.postmetadata p.titular { float: left; font-size: 1.1em; }
div.postmetadata p.date { float: right; }
div.singlepost { border-bottom-color: 1px solid #324855; text-transform: uppercase; color: #324855; font-size: 1.2em; }
div.singlepost p.titular { float: left; font-size: 1.1em; }
div.singlepost p.date { float: right; }

div.post h2 { /*background: white url(images/home_bg.jpg) no-repeat center top; border-top: 1px solid #324855;*/ text-align: center; clear: both; /*border-bottom: 1px solid white;*/ font-size: 1.1em; font-weight: normal; padding: 1.5em; }
div.post h2 a { padding: .25em .5em; text-decoration: none; display: block; height: 100%; font-size: 1.4em; color: #1e2e38; }

div.entry { /*border-top: 1px solid silver;*/ padding-top: /* 0.5em */; background: /*#f4f4f4*/ ; overflow-x: hidden; overflow-y: hidden }

div.gallery { margin-bottom: 10px; }

p.client { background: ; color: #324855; text-align: right; border-top: 1px solid silver; padding: .25em .5em;  }
p.clientalt { background: ; color: #324855; text-align: right; border-top: 1px solid silver; padding: .5em 0em; margin-top: 1em;  }
p a.minor, p a.minor:hover { font-weight: normal; color: silver; background-color: transparent; }

div.gallery { margin: 0; }
dd.gallery-caption { margin-top: .25em; padding: 0 .5em }

			.show {
				display: block;
			}
			
			.hide {
				display: none;
			}

div.entry p > img {
	/*width: 700px;*/
}

/* @end */