/* 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 {
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:#fff;
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--------------
---------------------------------- */



p {
font-size:10px;
color:#000;
}


h1 {
font-size:50px;
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:25px;
color:#f09;
line-height: 1.4;
}


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


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


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


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


a.links:hover {
color:#f09;
border:none;
text-decoration:none;

}


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


a:visited {
color:#666;
border:none;
text-decoration:none;
padding-bottom:5px;
}


a:on {
color:#666;
border:none;
text-decoration:none;
padding-bottom:5px;
}

a:hover {
color:#000;
border:none;
text-decoration:none;
padding-bottom: 5px;
border-bottom: 5px solid #6cf;
}


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;
}


input.button {
width:auto;
font-size:22px;
background:#6cf;
color: #000;
margin-top:0px;
cursor:pointer;
border:none;
}


input.button:hover {
font-size:22px;
background:#f09;
color: #000;
cursor:pointer;
border:none;
}


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;
}

* {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-tab {
position:fixed; 
display: block;
width:47px;
height:140px;
top:180px; 
right:-1px;
background-color:Transparent;
overflow:hidden;
border-right:1px solid #ff0099;
}


.feedback-tab:hover {
cursor:pointer;
text-decoration:none;
border-right:20px solid #ff0099;
}


.feedback-tab span {
 display: none;
}

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





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