/* Haatch Creative Design for: Haatch Creative Design */

/* No need to steal, just ask!*/
/* haatch@haatchcreative.com*/

/* Props to:    http://meyerweb.com/eric/tools/css/reset/    for the resets */
/* v1.0 | 20080212 */




/* Resets & Overrides----------------
---------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, center {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}


body {
text-align: left;
background-color:#fff;
}

/* End Resets & Overrides------------
---------------------------------- */




/* Main Page Elements ---------------
---------------------------------- */

#wrap { 
width:900px; 
margin:0 auto; 
} /* "auto" makes the left and right margins center the wrapper */

#header {
position:absolute;
top:0;
text-align: left;
width: 900px;
height:150px;
padding:0px;
background-color:Transparent;
border-left: 0px solid #ddd;
border-right: 0px solid #ddd;
}


#header-inner {
position:absolute;
background:#fff;
left:0%;
top:0;
width:100%;
height:100%;
}

#container {
position:absolute;
top:145px;
text-align: left;
width: 900px;
padding:0px;
background-color:Transparent;
}


#container-inner {
position:absolute;
background:Transparent;
left:0px;
top:45px;
width: 900px;
height:280px;
border: 0px solid #ff0099;
}


#footer {
margin-top:-30px;
float:left;
font-size:16px;
color:#fff;
top:30px;
padding-top:5px;
margin-bottom:0px;
width:600px;
height:15px;
border-top:0px solid #ccc;
background-color: Transparent;
}

#footer2 {
margin-top:-30px;
float:right;
font-size:16px;
color:#fff;
top:30px;
padding-top:5px;
margin-bottom:0px;

height:15px;
border-top:0px solid #ccc;
background-color: Transparent;
}


/* End Main Page Elements -----------
---------------------------------- */



/* Main Inner Elements --------------
---------------------------------- */

#top {
margin-top:30px;
width:900px;
height:295px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}


#home {
margin-top:0px;
margin-bottom:20px;
padding-bottom:20px;
padding-right:0px;
left:0px;
padding-top:0px;
width: 900px;
height:400px;
border-top: 0px solid #ccc;
border-right: 0px solid #ccc;
float:left;
}



.heading {
margin-top:20px;
height:1px; 
background-color:#ccc;
border:0;
z-index:999999999999;
}

#web1 {
margin-top:15px;
margin-bottom:20px;
padding-bottom:20px;
padding-right:30px;
left:0px;
padding-top:5px;
width: 350px;
border-top: 0px solid #ccc;
border-right: 0px solid #ccc;
float:left;
}


#web2 {
margin-right:0px;
margin-top:15px;
margin-bottom:20px;
padding-top:5px;
width: 475px;
float:right;
}


#print1 {
margin-top:15px;
margin-bottom:20px;
padding-bottom:20px;
padding-right:30px;
left:0px;
padding-top:5px;
width: 440px;
border-top: 0px solid #ccc;
border-right: 0px solid #ccc;
float:left;
}


#print2 {
margin-right:0px;
padding-left:0px;
margin-top:15px;
margin-bottom:20px;
padding-top:5px;
width: 430px;
height:150px;
float:right;
}


#marketing1 {
margin-top:15px;
margin-bottom:20px;
padding-bottom:20px;
padding-right:30px;
left:0px;
padding-top:5px;
width: 350px;
border-top: 0px solid #ccc;
border-right: 0px solid #ccc;
float:left;
}


#marketing2 {
margin-right:0px;
padding-left:0px;
margin-top:15px;
margin-bottom:20px;
padding-top:px;
width: 480px;
height:150px;
float:right;
}


#consulting1 {
margin-top:15px;
margin-bottom:20px;
padding-bottom:20px;
padding-right:30px;
left:0px;
padding-top:5px;
width: 275px;
border-top: 0px solid #ccc;
border-right: 0px solid #ccc;
float:left;
}


#consulting2 {
margin-right:0px;
padding-left:0px;
margin-top:15px;
margin-bottom:20px;
padding-top:0px;
width: 545px;
height:150px;
float:right;
}



#about1 {
margin-top:15px;
margin-bottom:20px;
padding-bottom:20px;
padding-right:30px;
left:0px;
padding-top:5px;
width: 350px;
border-top: 0px solid #ccc;
border-right: 0px solid #ccc;
float:left;
}


#about2 {
margin-right:0px;
padding-left:0px;
margin-top:15px;
margin-bottom:20px;
padding-top:0px;
width: 480px;
height:150px;
float:right;
}

#contact1 {
margin-top:30px;
margin-bottom:20px;
padding-bottom:20px;
padding-right:30px;
left:0px;
padding-top:5px;
width: 900px;
border-top: 0px solid #ccc;
border-right: 0px solid #ccc;
float:left;
}


#contact2 {
margin-right:0px;
padding-left:0px;
margin-top:20px;
margin-bottom:20px;
padding-top:0px;
width: 435px;
height:150px;
float:right;
}



.skills {
 /*\**/: height:150px;
margin-top:10px;
}

/* End Main Inner Elements ----------
---------------------------------- */



/* Menu Styling ---------------------
---------------------------------- */
.skills {
background-color:#6cf;
padding:25px 15px 5px 10px;
foat:left;
margin-top:15px;
font-weight:normal;
}


.indent-ul, .indent-ol, indent-ul li {
float:left;
padding-left: 10px;
padding-bottom: 7px;
display: block;
color:#000;
line-height:1.4;
font-size:11px;
list-style-type:none;
font-weight:normal;
}


ul, ol  li{
margin-bottom:17px;
padding: 0px;
font-weight:normal;
}


.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}


.menu ul li {
display: block;
float: right;
padding-left:35px;
margin-right:0px;
margin-top:82px;
height:25px;
}


.menu ul li a {
text-decoration: none;
color: #666;
background: Transparent;
font-weight: normal;
margin-right: 0px;
padding-bottom: 5px;
font-size:18px;
border:none;
}


.menu ul li a:hover {
color: #000;
text-decoration: none;
border:none;
background:Transparent;
border-bottom:0px dashed #000;
overflow:hidden;
padding-bottom: 5px;
border-top:0px solid #6cf;
border-bottom: 7px solid #6cf;
}

/* End Menu Styling -----------------
---------------------------------- */



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

.logo {
position:absolute;
display: block;
width: 225px;
height: 93.9px;
background: url("http://haatchcreative.com/images/haatch-logo225.png") no-repeat 0 0;
top:-1px;
left:0;
text-decoration:none;
border:none;
}


.logo:hover { 
background-position: 0 -94px;
cursor:pointer;
text-decoration:none;
border:none;
}


.logo span
{
display: none;
}

/* End Logo Styling -----------------
---------------------------------- */



/* Links & Font Styling--------------
---------------------------------- */

h1 {
font-size:45px;
letter-spacing:2px;
color:#000;
font-family:Helvetica;
font-weight:bold;
}


h2 {
font-size:30px;
color:#000;
line-height:10%;
font-family:Helvetica;
font-weight:normal;
}


h3 {
font-size:12px;
color:#6df;
font-family:Helvetica;
font-weight:normal;
}


h4 {
font-size:26px;
color:#f09;
line-height: 1.4;
letter-spacing:-1px;
}


h5 {
font-size:12px;
line-height: 1.4;
color:#666;
}


h6 {
font-size:11px;
line-height: 1.4;
color:#000;
}


h7 {
font-size:25px;
color:#f3c;
}


a.links {
text-decoration: none;
color: #666;
background: Transparent;
font-weight: normal;
margin-right: 0px;
padding-bottom: 5px;
font-size:12px;
border:none;
}


a.links:hover {
color: #000;
text-decoration: none;
border:none;
background:Transparent;
border-bottom:0px dashed #000;
overflow:hidden;
padding-bottom: 5px;
border-top:0px solid #6cf;
border-bottom: 7px solid #6cf;
}


a.popup {
text-decoration: none;
color: #666;
background: Transparent;
font-weight: normal;
margin-right: 0px;
padding-bottom: 5px;
font-size:16px;
border:none;
}


a.popup:hover {
color: #000;
text-decoration: none;
border:none;
background:Transparent;
border-bottom:0px dashed #000;
overflow:hidden;
padding-bottom: 5px;
border-top:0px solid #6cf;
border-bottom: 7px solid #6cf;
}


a.skills {
color:#fff;
border:none;
text-decoration:none;
padding-bottom:5px;
}

a.skills:hover {
color:#f3c;
border:none;
}


a.footer-links {
font-size:12px;
color:#666;
border:none;
text-decoration:none;
padding-bottom:5px;
}


a.footer-links:hover {
font-size:12px;
color:#000;
border:none;
text-decoration:none;
padding-bottom: 5px;
border-bottom: 5px solid #6cf;
}


a.logo:link {
color:#FF0000;
font-size:43px;
}


.nav {
font-size:20px;
}


grey:hover {
background-color:#999;
}

/* End Links & Font Styling----------
---------------------------------- */



/* Clear Styling --------------------
---------------------------------- */

.clear {clear:both;float:none;}

/* End Clear Styling ----------------
---------------------------------- */



/* Contact Form Styling -------------
---------------------------------- */
form {
font-size:28px;
color:#f09;
width:900px;
}


input {
font-size: 22px;
background:#6cf;
color:#000;
padding:4px;
border:none;
padding-bottom:1px;
cursor:pointer;
}


input:hover {
font-size: 22px;
background-color:#ff0099;
padding-bottom:1px ;
cursor:pointer;
border:none;
color:#fff;
}


textarea {
background:#6cf;
color:#000;
border:none;
padding:5px;
font-size:22px;
border:none;
cursor:pointer;
}


textarea:hover {
font-size: 22px;
background:#ff0099;
border:none;
cursor:pointer;
color:#000;
}


.submit-button {
width:auto;
font-size:22px;
background:#f09;
color: #fff;
margin-top:0px;
cursor:pointer;
border:none;
padding-top:8px;
padding-bottom:8px;
}


.submit-button:hover {
font-size:22px;
background:#000;
color: #f09;
cursor:pointer;
border:none;
padding-top:8px;
padding-bottom:8px;
}



* {outline: none;}

/* End Contact Form Styling ---------
---------------------------------- */



/* Bubble ToolTips ---------------------
---------------------------------- */

.tooltip { position:relative; z-index:24; }
.tooltip span { display:none;}
.tooltip:hover {z-index:25;}
.tooltip:hover span {
display:block;
position:absolute;
width:250px;
height:104px;
top:-100px;
left:-110px;
background-image:url('http://haatchcreative.com/images/bubble.png');
background-repeat:no-repeat;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
font-size:20px;
color:#fff;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}


.tooltip2 { position:relative; z-index:24; }
.tooltip2 span { display:none;}
.tooltip2:hover {z-index:25;}
.tooltip2:hover span {
display:block;
position:absolute;
width:250px;
height:104px;
top:-100px;
left:-100px;
background-image:url('http://haatchcreative.com/images/bubble.png');
background-repeat:no-repeat;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
font-size:20px;
color:#fff;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.tooltip3 { position:relative; z-index:24; }
.tooltip3 span { display:none;}
.tooltip3:hover {z-index:25;}
.tooltip3:hover span {
display:block;
position:absolute;
width:250px;
height:104px;
top:-232px;
left:-0px;
background-image:url('http://haatchcreative.com/images/bubble.png');
background-repeat:no-repeat;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
font-size:20px;
color:#fff;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* End Bubble ToolTips ------------------
---------------------------------- */



/* Feedback Tab ---------------------
---------------------------------- */

#Feedback {
position:absolute;
top:40%;
left:0;
height:140px;
width:47px;
background: url("http://haatchcreative.com/images/feedback-tab.png") no-repeat 0 0;
}


#Feedback:hover {
padding-left:5px;
}


#fade { /*--Transparent background layer--*/
	display: none; /*--hidden by default--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .82;
	z-index: 9999;
}


.popup_block{
	display: none; /*--hidden by default--*/
	background: #fff;
        padding:20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--CSS3 Box Shadows--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}


.popup_block h2{
margin-left:20px;
margin-top:10px;
font-size:34px;
color:#f09;
}

.popup_block p{
margin-left:20px;
font-size:16px;
color:#000;
}


img.btn_close {
	float: right;
	margin: -60px -60px 0 0;
}


/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
	position: absolute;
}


*html .popup_block {
	position: absolute;
}

/* End Feedback Tab -----------------
---------------------------------- */

.feedback-panel_newsletter {
	       padding-right:20px;
	       width: 350px;
               min-height:195px;
	       background: #fff;
	       position:fixed;
	       top:130px;
	       left:-373px;
          border: 2px solid #333;
z-index:9999;
	   }
	   
	   .feedback-panel_newsletter a.feedback-tab_newsletter {
           background:transparent url(http://geniuscoding.com/img/newsletter_tab.png) no-repeat scroll 0 0;
           display:block;
           height:122px;
           left:64px;
           top:60px;
           padding-left:-20px;
           bottom:21px;
           position:relative;
           float:right;
           text-indent:-9999px;
           width:40px;
           outline:none;
          border: 2px solid #333;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
	   }


.newsletter-info {
width:350px;
}



 

/* End Styling ----------------------
---------------------------------- */