/*layout -------------------------------- */
body
{
	background-color: #63634e;
	font-size: small;
	line-height: 140%;
	margin: 0;
	text-align:center;
	padding: 0;
	background-image: url(../images/bkgd-body.png);

}

div.container
{
	width: 920px;
	margin: 0 auto; 
	background: url(../images/bkgd-main.png) repeat-y center top;
	font-family: Verdana, sans-serif;
	font-size: 90%;
	text-align:left;
}

div.topbar
{
	font-size: 90%;
	background-color: black;
	height: 2.5em;
	font-family: Georgia, serif;
	color: #666;
		text-align:left;

}

div.topbar a, div.topbar a:visited
{
	color: #ccc;
	line-height: 2.5em;
	margin: 0 10px;
}

div.topbar a:hover { color: #cc9; }

div.controls
{
	width: 890px;
	margin: 0 auto;
}

div.controls p
{
	margin: 0;
	padding: 0;
}

a#turn-off { display: inline; }
a#turn-on { display: none; }


div.content
{
	font-family: Verdana, sans-serif;
	font-size: 90%;
}

div.main
{
	padding: 0 0 0 56px;
	width: 565px;
	float: left;
	color: #ccc;
}

div.footer
{
	font-size: 90%;
	line-height: 140%;
	clear: both;
	background: url(../images/bkgd-sub.png) repeat-y center top; 
	padding-bottom: 15px;
}

div.footertop
{
	height: 40px;
	background: url(../images/bkgd-middle.png) no-repeat center bottom;
}

div.footer ul
{
	padding: 0;
	margin: 0;
	list-style-type: none;
}
div.footer p { margin: 0 0 1em; }

div#linklist
{
	float: left;
	width: 375px;
	padding: 0 25px 0 50px;
}

div#linklist a { font-weight: bold; }
div#linklist ul li { padding-bottom: 4px; }

div#featured { display: none;}
/*{
	float: right;
	width: 280px;
	_width: 310px;
	padding: 0 50px 0 20px;


div#featured img
{
	border: 8px solid #282828;
	float: right;
	margin: -20px 0 0 10px;
}

div#featured p
{
	margin: 0;
	padding: 0 0 .5em;
}
}*/
div#news { padding: 0 50px;  }


div.meta
{
	font-size: 90%;
	background: url(../images/bkgd-bottom.png) no-repeat center bottom;
	text-align: center;
	padding: 15px 0 45px;
	font-family: Georgia, serif;
	color: #ccc;
	clear: both;
}

div.sidebar
{
	width: 205px;
		_width: 245px;

	padding: 0 35px 0 40px;
			_padding: 0 0 0 40px;

	margin-left: 625px;
	color: #ccc;
	font-size: 90%;
	background:  url(../images/bkgd-sidehead.png) no-repeat 11px top;
	_background: none;

}
/*links -------------------------------- 
a { color: #cc9; }
a:visited { color: #996; }
a:hover { background-color: #cc9; color: black;}
*/


a {
	text-decoration: none;
	}

a:link {
	color: #cc9;
	text-decoration: none;
	border-bottom: 1px solid #888;
	padding: 3px 0px 2px 0px;
	background-color: inherit;
}

a:visited {
	color: #996; 
	text-decoration: none;
	border-bottom: 1px dotted #888;
	padding: 3px 0px 2px 0px;
	background-color: inherit;
	}

a:hover {
	color: white;
	text-decoration: none;
	background-color: #666;
	border-color: #666;
	}



div.footer a, div.footer a { color: #900; border-color: #900;}
div.footer a:visited { color: #600; border-color: #900;}
div.footer a:hover { background-color: white; border-color: #900; color: #900; }
div.meta a { padding: 3px 2px 2px 2px;}

h1 a, h1 a:hover, h1 a:visited,
#nav ul li, #nav ul li a,  #nav ul li a:hover, #nav ul li a:visited { border-bottom: none !important; padding: 0; background-color: transparent; text-decoration: none; }




/*topnav -------------------------------- */

div#nav
{
	height: 130px;
	background: url(../images/bkgd-top.png) no-repeat center top;
	position: relative;
}

#nav ul
{
	margin: 0;
	float: right;
	position: relative;
	top: 42px;
	right: 23px;
}

#nav ul li
{
	display: block;
	float: left;
	list-style: none;
}

#nav ul li a
{
	display: block;
	height: 25px;
	border-bottom:none;
}

#nav ul li a span { display: none; }

#nav ul li#nav-home a
{
	width: 66px;
	background: url(../images/nav-home.png) no-repeat;
}

#nav ul li#nav-about a
{
	width: 76px;
	background: url(../images/nav-about.png) no-repeat;
}

#nav ul li#nav-portfolio a
{
	width: 100px;
	background: url(../images/nav-portfolio.png) no-repeat;
}

#nav ul li#nav-tips a
{
	width: 107px;
	background: url(../images/nav-tips.png) no-repeat;
}

#nav ul li#nav-contact a
{
	width: 77px;
	background: url(../images/nav-contact.png) no-repeat;
}

#nav ul li#nav-home a:hover,
#nav ul li#nav-about a:hover,
#nav ul li#nav-portfolio a:hover,
#nav ul li#nav-tips  a:hover,
#nav ul li#nav-contact  a:hover { background-position: 0 -28px; }
body.home #nav ul li#nav-home a, 
body.about #nav ul li#nav-about a, 
body.portfolio #nav ul li#nav-portfolio a, 
body.tips #nav ul li#nav-tips a, 
body.contact #nav ul li#nav-contact a { background-position: 0 -28px; }






body.home div.main p { line-height: 200%; }
div.main p { line-height: 170%; }


div.beforeafter { background: transparent url(../images/beforeandafter.gif) 415px 12px no-repeat; padding: 10px 435px 0 0; height: 185px;}

div.sidebar h3.sidehead  { margin: 0; padding:0; }
div.sidebar p { margin-bottom: 0; padding-bottom:0; }
div.sidebar ul
{
	padding: 0;
	margin: 0;
	list-style-type: none;
}

div.sidebar ul li
{
	background: url(../images/list-marker.gif) no-repeat left 50%;
	padding-left: 10px;
}

div#nav img#logo
{
position: absolute; top: 68px; left: 56px;
}

div#nav h1 span { margin:0; padding: 0; display: none; }


div.main p strong { color:white; }


h1, h2, h3, h4
{
	font-family: Georgia, serif;
	font-weight: normal;
}

div.main h2, div.main h3, div.main h4 { color: #996; }
div.footer h1, div.footer h2, div.footer h3, div.footer h4 { color: black; }
div.sidebar h2, div.sidebar h3, div.sidebar h4 { color: #b76e55; }

h2 em
{
	color: white;
	font-style: normal;
	font-size: 110%;
}

h2
{
	font-size: 180%;
	line-height: 120%;
	margin: 0;
	padding: .5em 0 0;
}

h3
{
	font-size: 170%;
	margin: 10px 0 .5em;
}

h4
{
	font-size: 150%;
	margin: 20px 0 .5em;
}

div.footer h4 { margin-top: 10px; }
img.highlight
{
	padding: 10px;
	border: 1px solid #666;
	margin: 0;
}

div.clear { clear: both; }
a img { border: none; }
img#before, img#after { border: 4px solid black; }
.center { text-align: center; }



div.sites img { margin: 15px 17px 5px 0; border: 1px solid #ccc; }

h2 em
{
	color: white;
	font-style: normal;
	font-size: 100%;
}


/*portfolio popups -------------------------------- */

body.siteview { background-color: #444; }

body.siteview div.nav-mini
{
	width: 100%;
	height: 35px;
	margin: 0;
	text-align: right;
	color: white;
	background: #000 url(../images/10sharp-sm.gif) no-repeat 18px top; 
}

body.siteview div.nav-mini img
{
	margin: 5px 10px;
}

body.siteview h2 { padding: 10px 20px; color: #cc9; }
body.siteview p { padding: 0 20px; color: #cc9; font-family: Verdana, sans-serif; font-size: 80%; line-height: 140%; color: #ccc;}


body.portfolio div.main h2 { margin-bottom: 12px; }
div.screenshots { text-align: center; padding: 20px; }



/*temp -------------------------------- */

div.notice { width: 23em; height: 2em; position: absolute; right: 10px; top: 0;  border-top:none; text-align: center;}
div.notice a, div.notice a:visited { text-decoration: none; background-color: #cc9; border: 2px solid #63634D; border-top: 1px solid black; color:black; font-weight: bold; font-size: 120%; font-family: Georgia, serif; line-height: 150%; padding: .5em;  }
div.notice a:hover { color:white;  background-color: #b76e55; text-decoration: underline;}

.preslink { text-align: center; font-size: 135%; background: #333;}

ul.raquo
{
	list-style-type: none;
}

ul.raquo li
{
	background: url(../images/list-marker.gif) no-repeat left 50%;
	padding-left: 10px;
}


ul.links { 	list-style-type: none; }
ul.links li { margin-top: 1em; font-weight: bold;}
ul.links ul { margin-top: .2em; }
ul.links ul li { list-style-type: disc; margin-top: 0; padding: 4px 0; font-weight: normal;}