/* <><><><><><><><><><>
	BROWSER RESET
<><><><><><><><><><> */
* {	margin: 0; padding: 0; }
img { vertical-align: bottom; border: none; }
a { text-decoration: none; }

/* <><><><><><><><><><>
	SITE LAYOUT
<><><><><><><><><><> */
html, body { height: 100%; }
#header {
	max-width: 70em;
	margin: 0 auto;
}
#banner {
	height: 500px;
	margin: 0 10px;
	position: relative; /* for absolute h1 */
}
#logo {
	right: 50%;
	margin-right: -125px;
	position: fixed;
	top: 2.1em;
	z-index: 20;
}
#scrollarea {
	min-height: 100%;
	position: relative;
}
#wrapper {
	max-width: 60em;
	margin: -250px auto 0;
}
#content {
	padding: 2em 5em 10px;
	margin: 0 10px;	
	text-align: left;
}
body.index #content { padding-top: 0px; }
#footer {
	position: fixed;
	height: 20px;
	background: url(../images/hollow-circle_6px.png);
	bottom: 0;
	width: 100%;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}



#valid { 
	float: right;
	clear: all;
}
#weather { float: left; }
#weather img {
	border: 1px solid #999;
	width: 20px;
}

#zoom {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 20;
}
#design, #logos {
	float: left;
}
#art, #manage {
	float: right;
}
.box {
	min-height: 6em;
	width: 48%;
	margin: 1em 0;
	position: relative; /* for absolute positioned image */
}
.box a {
	display: block;
	min-height: 4em;
	padding: 1em 1.5em;
}
.box img {
	position: absolute;
	top: -45px;
	right: 10px;
	z-index: 5; /* for ie */
}
.box img {
	top: 10px;
	right: 20px;
}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
	Font & Layout Size Changer Classes
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
body.small { font-size: 80%; }
body.medium { font-size: 100%; }
body.large { font-size: 120%; }
body.max { font-size: 140%; }
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
	layout classes
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
.clear { clear: both; }
.left { float: left; }
.right { float: right; }
.hr {
	background: #f60 url(../images/hollow-circle_6px.png);
	clear: both;
	height: 1em;
	line-height: 1em;
	margin: 1em 0;
}
.kayakers {
	border: none;
	background: url(../images/kayakers_1700x40.gif) no-repeat 50% 100%;
	height: 40px;
	line-height: 40px;
}
.topofpage {
	clear: both;
	width: 100%;
	float: left;
	text-align: center;
	padding: 1em 0;
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
	PIE easy clearing
	-the IE height fix will trigger MS's proprietary and illegal Float Model
	-can invoke IE/Win Guillotine Bug
	http://www.positioniseverything.net/easyclearing.html
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */




















#menu li.index a:hover { background: #000 url(../images/icons/home-22.png) no-repeat 2px 50%; }
#menu li.design a:hover{ background: #000 url(../images/icons/epiphany-22.png) no-repeat 2px 50%; }
#menu li.art a:hover { background: #000 url(../images/icons/gimp-22.png) no-repeat 2px 50%; }
#menu li.logos a:hover { background: #000 url(../images/icons/desktop-22.png) no-repeat 2px 50%; }
#menu li.manage a:hover { background: #000 url(../images/icons/SessionManager-22.png) no-repeat 2px 50%; }
#menu li.contact a:hover { background: #000 url(../images/icons/xfmail-16.png) no-repeat 2px 50%; }

#menu li.index span { background: #000 url(../images/icons/home-32.png) no-repeat 50% 50%; }
#menu li.design span { background: #000 url(../images/icons/epiphany-32.png) no-repeat 50% 50%; }
#menu li.art span { background: #000 url(../images/icons/gimp-32.png) no-repeat 50% 50%; }
#menu li.logos span { background: #000 url(../images/icons/desktop-32.png) no-repeat 50% 50%; }
#menu li.manage span { background: #000 url(../images/icons/SessionManager-48.png) no-repeat 50% 50%; }
#menu li.contact span { background: #000 url(../images/icons/xfmail-32.png) no-repeat 50% 50%; }



#menu li span {
	
	
	color: #f60;
	border: 1px solid #000;
	
	padding: 1em 0 .2em 0;
	letter-spacing: 0;
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight: bold;
	display: block;
}