@import url(reset.css);

/* ---------------------------------- 
Project: Kathleen Hill Web Design
Version: 3.0
Author: Kathleen Hill
Latest Update: 2/21/2009
------------------------------------- */

/* ----------------------------------
[Color Codes]
Blues ---->>
Med (main): 	#034c85
dark:			#023964
darkest: 		#022643
bright:			#0aaae4
lighter:		#4279a4
lightest:		#e6eef3

Red ----->>
Med (main)		#a10048
lightest 		#ebeef3

Green ----->>
Med				#20a100

------------------------------------- */

/* ------- =General Tags --------------
----------------------------------- */
html {
background:#034c85 url(../images/bg2.jpg) repeat-x;
}

body {
background:transparent url(../images/scroll_left.png) no-repeat -10px 55px;
font: 100% Verdana, Helvetica, sans-serif;
color:#ebeef3;
height:1022px;
margin:0;
padding:0;
width: 1280px;
}

h1
{font-weight:normal;
font-size:1.3em;}

h2
{font-weight:normal;
font-size:2.0em;
letter-spacing:-.05em;}

h3
{font-weight:normal;
font-size:1.2em;}

h4
{font-weight:normal;
font-size:.9em;}

h4.bolder {
font-weight:bold;
font-size:.9em;
}

p
{font-weight:normal;
font-size:1em;
line-height:1.3em;}

a:link, a:visited
{color:#ebeef3;
cursor:pointer;
text-decoration:none;}

a:hover, a:active
{color:#ebeef3;
text-decoration:underline;}

img {
border:none;
}

span.small {
font-size:small;
}

label, button, input[type="submit"]{cursor:pointer;}

/* ------- =Main Divs --------------
----------------------------------- */
#wrapper {
background:transparent url(../images/scroll_right.png) no-repeat 688px 26px;
margin: 0;
padding: 0;
}

#header {
margin:0;
padding:0;
/* background:url(../images/sunflower_top2.png) no-repeat 158px 8px; */
height:304px;
}

#logo {
margin:0;
padding:3px 0 0 130px;
position:absolute;
}

#logo h1 {
/* mike rundle's text-indent method of image replacement http://phark.typepad.com/phark/2003/08/accessible_imag.html */
text-indent:-100em;
overflow:hidden;
background:url(../images/logo2.png) no-repeat;
line-height:74px;
width:179px;
}

.btt /* back to top styles */ {
margin:25px 0 35px 0;
}

.btt a 
{
font-size:.8em;
font-weight:bold;
padding-left:325px;
}
/* ------- =Nav --------------
----------------------------------- */
/* skip links */
#access {
	color: #046da6;
	font-size:xx-small;
	margin:0 0 0 -110px;
	padding:0;
	}
	
#access a {
	background: transparent;
	color:#046da6;
	}

#nav ul {
	list-style:none;
	margin:11px 0px 0 362px;
	padding:0;
	width: 100%;
}
#nav li {
	float:left;
	margin:0;
	padding:0;
	text-align:center;
}

#nav li a {
	display:block;
	padding:2px 8px;
	margin-right:25px;
	height:100%;
	color:#FFF;
	text-decoration:none;
}

#nav li a {
	background:#0569a7 url(../images/bg_nav2.jpg) repeat 0 0;
}

#nav li a:hover {
	background-position:0 -150px;
	border-bottom:1px solid #85D5F2;
}

#nav li#current a{
text-decoration:none;
font-weight:bold;
border-bottom:1px dashed #0aaae4;
}


/* ------- =Content --------------
----------------------------------- */
#content {
background:url(../images/scroll_bottom.png) no-repeat 0px 13px;
height:706px;
margin:0;
padding:0;
}

#main {
float:left;
background:url(../images/sunflower_left.png) no-repeat 334px 24px;
margin: -24px 0 0 290px;
width:398px;
}

#welcome {
width:430px;
/* border:1px dashed #0aaae4; */
margin:5px 0 15px -121px;
padding:20px;
}

#welcome h2 {
font-size:2.5em;
font-weight:normal;
letter-spacing:-0.06em;
}

#welcome p {
padding-left:5px;
}

#welcome p#intro {
margin:15px 0 15px 0;
}

#welcome ul {
margin: 0 0 15px 55px;
}

#welcome li {
text-indent: -21px;
}

#services {
margin:0 0 0 -232px;
padding:0;
width:600px;
}

#service1, #service2, #service3 {
float:left;
background:url(../images/bg_unterdiv.jpg) repeat-x;
border:3px solid #034c85;
width:148px;
height:256px;
padding:2px;
opacity:.6;
}

#service1 {
margin:-23px 0 15px 98px;
}

#service2 {
margin:-281px 0 15px 266px;
}

#service3 {
margin:-281px 0 15px 434px;
}


#service1:hover, #service2:hover, #service3:hover {
opacity:1.0;
}

#service1 h3, #service2 h3, #service3 h3{
background:url(../images/bg_h3.jpg) repeat-x;
font-size:1.5em;
font-weight:normal;
letter-spacing:-0.04em;
text-align:center;
border-bottom:1px solid #034c85;
padding-bottom:5px;
cursor:pointer;
}

#service1 h3>a, #service2 h3>a, #service3 h3>a{
text-decoration:none;
}

#service1 p, #service2 p, #service3 p{
padding:3px 0 0 5px;
font-size:.78em;
}

#service1 p>a, #service2 p>a, #service3 p>a{
text-decoration:none;
font-weight:bold;
font-style:italic;
}

#service1 p>a:hover, #service2 p>a:hover, #service3 p>a:hover{
text-decoration:underline;
}

img#to_side {
position:absolute;
top:615px;
left:33px;
}


#mid {
float:left;
background:url(../images/sunflower_bottom.png) no-repeat 0px 0px;
width:345px;
height:726px;
}

#work {
	margin:0;
	padding:0;
	float:left;
	width:213px;
	background:url(../images/sunflower_right.png) no-repeat 0px 0px;
}

#work h2 {
	padding:0 0 29px 85px;
	}

#work ul#recent {
	width:200px;
	margin:-28px 0 0 40px;
}

#recent li.project {
	margin-bottom:10px;
	position:relative;
	width:162px;
	height:100px;
	border:2px solid #067FC3;
	cursor:pointer;

}

li.project span.info {
	background:#034C85 url(../images/ss/hover.gif);
	color:#ebeef3;
	width: 152px;
	height: 90px;
	position: absolute;
	top:0;
	left: 0;
	z-index: 6;
	display:none;
	text-align: left;
	font-size:10px;
	padding:5px;
	overflow:hidden;
	text-decoration:none;
}

em.offset {
	 
	}




/* ---- =Sub Page Content ---------
----------------------------------- */
body#sub {
background: transparent url(../images/scroll_left_sub.png) no-repeat -10px 55px;
}

body#sub #wrapper {
background:transparent url(../images/scroll_right_sub.png) no-repeat 689px 139px;
}

body#sub #header {
margin:0;
padding:0;
background:transparent none;
width:100%;
}

body#sub #main {
margin:0 0 0 175px;
padding:0 0 0px 0;
float:left;
width:725px;
background: transparent;
}


body#sub #main h2 {
border-bottom:1px solid #0462a0;
margin:0;
padding:15px;
}

body#sub #main #sideborder {
border-right:1px dashed #4279a4;
}


body#sub #main h3, body#sub #main h4 {
padding:  0 15px 5px 15px;
}

body#sub #main p {
margin:0 0 15px 0;
padding:0 15px 0; 
}

body#sub #sidebar {
float:right;
width:100px;
}

body#sub #a {
width:213px;
margin:67px 0 15px -238px;
padding:0;
}

body#sub #aa {
width:201px;
margin:67px 0 15px -238px;
padding:5px;
background:url(../images/bg_unterdiv.jpg) repeat-x;
border:1px solid #023964;
}

body#sub #b, body#sub #c, body#sub #d {
width:201px;
margin:0 0 15px -238px;
padding:5px;
background:url(../images/bg_unterdiv.jpg) repeat-x;
border:1px solid #023964;
}

body#sub #aa h4, body#sub #b h4, body#sub #c h4, body#sub #d h4 {
font-weight:bold;
text-align:left;
padding-bottom:5px;
}

body#sub #aa p, body#sub #b p, body#sub #c p, body#sub #d p {
font-size:.8em;
}

body#sub #aa ul, body#sub #b ul, body#sub #c ul, body#sub #d ul {
font-size:.8em;
margin:0 0 0 15px;
padding:0 0 10px 0;
}

body#sub #aa li>a, body#sub #b li>a, body#sub #c li>a, body#sub #d li>a {
text-decoration:none;
}

body#sub #aa li>a:hover, body#sub #b li>a:hover, body#sub #c li>a:hover, body#sub #d li>a:hover {
text-decoration: underline;
color:#fff;
}

body#sub div#d ul#social li {
display:inline;
}

/* ---- =Services tables ---------
----------------------------------- */
table#maintenance, table#hosting {
margin:10px 0 0 15px;
font-size:.9em;
border:1px solid #023964;
}

table#maintenance thead th, table#hosting thead th {
background: url(../images/th_bg.gif) repeat-x;
border-right:1px solid #023964;
width:129px;
}

table#maintenance thead th {
width: 115px;
}

table#maintenance thead th.end {
border-right:none;
}

table#maintenance thead th, table#maintenance tbody td, table#maintenance tfoot td, table#hosting thead th, table#hosting tbody td, table#hosting tfoot td {
padding:10px;
text-align:center;
line-height:22px;
border-bottom:1px solid #023964;

}

table#hosting tbody td.feature, table#hosting tfoot td#price  {
text-align:left;
}

table#maintenance td, table#hosting td {
border-right:1px solid #023964;

}

table#maintenance tfoot td, table#hosting tfoot td {
font-weight: bold;
}

/* ---- =Portfolio Slideshow ------
----------------------------------- */
#thumbs {
display:block;
width: 665px;
padding:0 0 0 20px;
}

#slide_nav {
padding:0 0 0 22px;
}

#slide_nav a { 
border: 1px solid #ccc; 
background: #045e9c; 
text-decoration: none; 
margin: 0 3px 0 0; 
padding: 3px 10px;  
}
#slide_nav a.activeSlide, #slide_nav a:hover { background: #0aaae4 }
#slide_nav a:focus { outline: none; }

ul#screenshot {
display:none;
background:transparent;
width:665px;
height:412px;
margin:0 0 0 15px;
padding:0 0 0 15px;
position:relative;
}

ul#screenshot img {
position:absolute;
top:0;
left:0;
display:block;
z-index:8;
}

body#sub ul#screenshot p {
margin-top:420px;
width:648px;
font-size:.9em;
line-height:1.2em;
}

body#sub ul#screenshot span {
display:block;
margin-bottom:-10px;
}

body#sub ul#screenshot span.client {
font-weight:bold;
text-decoration:underline;
}

/* ---- =Contact form -------------
----------------------------------- */
#khwd_contact {
}

#khwd_contact fieldset {
background:url(../images/bg_form.gif) repeat-x;
border:3px solid #067abc;
margin:25px 50px 25px 15px;
padding:10px;
width:475px;
}

#khwd_contact legend {
font-style:italic;
padding-left:7px;
padding-right:7px;
}

#khwd_contact li.section {
margin:0;
padding: 0 0 15px 0;
}

#khwd_contact li.section label {
display:block;
margin:0 0 5px 0;
}

#khwd_contact li.section input, #khwd_contact li.section textarea {
background:transparent;
color: #fff;
border:1px inset #e6eef3;
}

#khwd_contact li.section input:focus, #khwd_contact li.section textarea:focus {
background:#0aaae4;
border:1px outset #023964;
}

#khwd_contact li.submit input {
background:#e6eef3;
color: #034c85;
}

/* ---- =Tooltips -------------
----------------------------------- */
.tooltip{
	position:absolute;
	border:1px solid #333;
	background:#f7f5d1;
	padding:2px 5px;
	color:#333;
	display:none;
	}	


/* ---- =Footer -------------------
----------------------------------- */
div#footer, div#footer_work, div#footer_services {
clear:both;
width:100%;
margin:0 0 25px 50px;
text-align:left;
padding:20px 0 0 0;
}

div#footer_work {
padding-top:200px;
}

div#footer_services {
padding-top:400px;
}

ul#footer {
width:213px;
margin:0 0 0 -10px;
padding:0;
text-align:right;
}

ul#footer li {
display:block;
list-style-type:none;
padding:3px;
font:x-small Verdana, Arial, Helvetica, sans-serif;
}

div#footer li, div#footer_work li, div#footer_services li{
display:inline;
list-style-type:none;
padding:5px;
font:x-small Verdana, Arial, Helvetica, sans-serif;
}

/*--------- =Misc -----------
----------------------------- */
.text {
cursor:text;
}

.check {
background:transparent url(../images/check.png) no-repeat center center;
}