/*
	imagehat.com screen styles - the twilight edition
	created: 10.14.2007
------------------------------------------------------------ */

* { margin:0; padding:0; }

body {
	font: normal 10px arial, verdana, sans-serif;
	color: #BFD6ED;
	text-align: center;
	background: #001830;
}

a {
	color: #fff;
	text-decoration: none;
	outline: none;
}
a:hover, a:focus {
	color: #fff;
	text-decoration: underline;
}

img, a img {
	border: 0;
}


/*	page structure
------------------------------------------------------------ */

#wrap {
	position: relative;
	min-height: 763px;
	padding-bottom: 150px;
	background: url(../images/twilight/wrap-bg.gif) repeat-x;
}
#main {
	width: 638px;
	margin: 0 auto;
	text-align: left;
	background: url(../images/twilight/main-bg.gif) repeat-y 0 0;
}
#title {
	width: 638px;
	margin: 0 auto 40px auto;
	text-align: left;
}
#content {
	float: left;
	width: 340px;
}
#sidebar {
	float: right;
	width: 235px;
}


/*	content
------------------------------------------------------------ */

#main p {
	margin: 0 0 1.5em;
	font-size: 1.2em;
	line-height: 1.6em;	
}
#sidebar p {
	font-size: 1.1em;
	line-height: 1.4em;	
}

ul, ol { margin: 0 1.5em 1.5em 1.5em; font-size: 1.2em; line-height: 1.6em; }
ul { list-style-type: square; }
ol { list-style-type: decimal; }

h2 {
	margin: 0 0 18px;
	padding: 0 0 15px;
	border-bottom: 1px solid #396187;
	height: 19px;
	text-indent: -9999px;
}
h2#intro { background: url(../images/twilight/h-intro.gif) no-repeat 0 0; }
h2#work { margin-top: 35px; background: url(../images/twilight/h-work.gif) no-repeat 0 0; }
h2#websmiths { background: url(../images/twilight/h-websmiths.gif) no-repeat 0 0; }
h2#h-mike-hello { margin-top: 4em; background: url(../images/twilight/h-mike-hello.gif) no-repeat 0 0; }
h2#h-mike-work { margin-top: 4em; background: url(../images/twilight/h-mike-work.gif) no-repeat 0 0; }
h2#h-mike-resume { margin-top: 4em; background: url(../images/twilight/h-mike-resume.gif) no-repeat 0 0; }

img.photo, img.photo-right, img.photo-left {
	border: 4px solid #D5E5F4;
	background: #9BB9D4;
}
img.photo-left {
	float: left;
	margin: 0 10px 10px 0;
}
img.photo-right {
	float: right;
	margin: 0 0 10px 10px;
}

/* the peeps */

.entry {
	margin: 0 0 18px;
	border-bottom: 1px solid #396187;
}
.last {
	border: 0;
}
.entry h3 {
	font-size: 1.2em;
	line-height: 1.6em;
	font-weight: normal;
	color: #fff;
	margin: 0;
}
.entry h3 img {
	float: left;
}
.entry h3 a {
	float: left;
	margin: 0 10px 0 0;
	border: 4px solid #D5E5F4;
	background: #9BB9D4;
	text-decoration: none;
}
.entry h3 a img {
	visibility: hidden;
}
.entry h3 a:hover img {
	visibility: visible;
	text-decoration: none;
}
.entry h3 a#mike { background: #9BB9D4 url(../images/twilight/pic-bg-man.gif) no-repeat 0 0; }
.entry h3 a#carol { background: #9BB9D4 url(../images/twilight/pic-bg-lady.gif) no-repeat 0 0; }
.entry h3 a#lulu { background: #9BB9D4 url(../images/twilight/pic-bg-dog.gif) no-repeat 0 0; }

/* the goods */

dl.work-list {
	line-height: 1.2em;
}
.work-list dt {
	margin: 0 0 6px;
}
.work-list dt img {
	border: 4px solid #D5E5F4;
}
.work-list dd {
	font-size: 1.1em;
	font-style: italic;
	margin: 0 0 18px;
}
.work-list dd strong {
	font-style: normal;
	font-weight: normal;
	color: #fff;
}
a.more-link {
	padding: 2px 4px; 
	font-size: 1em; 
	color: #8AAED1;
	background: #244A6F;
	text-decoration: none;
}
a:hover.more-link {
	color: #fff;
	background: #547FA9;
	text-decoration: none;
}


/*	work section
------------------------------------------------------------ */

body.alt #main {
	background: none;
}

ul.work-links {
	margin: 0 0 35px;
	list-style: none;
	font-size: 1.1em;
	line-height: 1.2em;
	
}
.work-links li {
	float: left;	
}
.work-links a {
	float: left;
	width: 196px;
	margin: 0 0 5px;
	padding: 9px 0 9px 15px;
	font-style: italic;
	color: #BFD6ED;
	border-left: 1px solid #396187;
	text-decoration: none;
}
.work-links a:hover,
.work-links a.active {
	background: #396187;
	color: #fff;
	border-left: 1px solid #D5E5F4;
	text-decoration: none;
}
.work-links a strong {
	font-style: normal;
	font-weight: bold;
	display: block;
}
#work-sample {
	padding: 18px 0 0;
	border-top: 1px solid #396187;
}
#work-sample h3 {
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 4px;
}
#work-sample p {
	font-style: italic;
}
#work-sample p strong {
	font-style: normal;
}
#work-sample img {
	border: 4px solid #396187;
}


/*	header
------------------------------------------------------------ */

#header {
	width: 638px;
	margin: 0 auto;
	text-align: left;	
	position: relative;
}
#branding {
	padding: 21px 0 0;
}
#branding a {
	display: block;
	width: 417px;
	height: 73px;
	text-indent: -9999px;
	background: url(../images/twilight/logo-twilight.gif) no-repeat 0 0;
}
#branding a:hover {
	background-position: 0 -73px;
}
body.alt #branding a {
	width: 170px;
}
body.plain #title {
	padding-top: 70px;
}

/*	banners
------------------------------------------------------------ */

#banner-home {
	height: 115px;	
	background: url(../images/twilight/banner-home.gif) no-repeat 0 0;
	text-indent: -9999px;
}
#banner-home a {
	height: 115px; width: 638px;
	border: 0;
	text-decoration: none;
	display:block;
}
#banner-work {
	height: 88px;
	background: url(../images/twilight/banner-work.gif) no-repeat 0 0;
	text-indent: -9999px;
}
#banner-mike {
	height: 88px;
	background: url(../images/twilight/banner-mike.gif) no-repeat 0 0;
	text-indent: -9999px;	
}
#title a {
	display: block;
	width: 100%; height: 100%;
	border: 0; text-decoration: none;
}


/*	footer
------------------------------------------------------------ */

#footer {
	clear: both;
	padding: 301px 0 0 0;
	background: transparent url(../images/twilight/footer-bg.gif) no-repeat top center;	
}
#footer-inner {
	padding: 130px 0 100px 0;
	background: #000B16;	
}
#footer a {
	font-size: 1em;
	color: #BFD6ED;
	margin: 0 3px;
	padding: 2px 4px;
	background: #0A243D;
	text-decoration: none;
}
#footer a:hover {
	background: #20456B;
	text-decoration: none;
}


/*	contact form window shade
------------------------------------------------------------ */

#windowshade {
	padding-bottom: 4px;
	min-height: 4px;
	background: #D5E5F4 url(../images/twilight/contact-bg.gif) repeat-x bottom left;
	line-height: 1.2em;
	font-size: 1.2em;
}
#windowshade-tab {
	position: absolute;
	top: -1px;
	right: 8px;
	width: 88px;
	height: 21px;
	display: block;
	background: url(../images/twilight/contact-tab.gif) no-repeat 0 0;
	text-indent: -9999px;
}
#windowshade-inner {
	background: url(../images/twilight/contact-inner-bg.gif) repeat-x bottom left;
}

/* form */

#windowshade fieldset {
	width: 638px;
	margin: 0 auto;
	padding: 15px 0;
	text-align: left;
	color: #001830;
	border: 0;
	line-height: 1.2em;
}
#windowshade .col-1 {
	float: left;
	width: 45%;
}
#windowshade .col-2 {
	float: right;
	width: 45%;
}
#windowshade p {
	margin: 0 0 10px;
}
#windowshade label {
	display: block;
	margin: 0 0 4px;
}
#windowshade .input-txt, #windowshade .input-area {
	width: 100%;
}
#windowshade .input-area {
	height: 50px;
}
.alert {
	margin: 0 0 1.5em;
	padding: 18px 15px 8px 42px;
	border: 4px solid #F2D4A5;
	color: #E27D01;
	background: #F4F4D5 url(../images/twilight/icn-note.gif) no-repeat 15px 16px;
}
.error {
	margin: 0 0 1.5em;
	padding: 18px 15px 8px 42px;
	border: 4px solid #E25A3A;
	color: #E25A3A;
	background: #FFECE7 url(../images/twilight/icn-error.gif) no-repeat 15px 16px;
}

/* no form  */
#windowshade .alert-wrap {
	width: 638px;
	margin: 0 auto;
	padding: 15px 0;
	text-align: left;
	color: #001830;
	border: 0;
	line-height: 1.2em;
}
#windowshade .alert-wrap a { color:#ebba6d;
	text-decoration:underline; 
}

/*	misc
------------------------------------------------------------ */

hr, .hide {
	display: none;
}

/* self-clearing floats */

#main:after,
.entry:after,
#windowshade fieldset:after,
ul.work-links:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}