/**********************************************************
*                                                         *
*   2008 CSS Style for grum.com by Mike Smith             *
*                                                         *
**********************************************************/

/****************************
*                           *
*   main styles             *
*                           *
****************************/

html, body, h1, h2, h3, p, ul, li {
	margin: 0;
	padding: 0;
}

html {
	overflow: scroll;
}

body {
	font-family: "Trebuchet MS", Georgia, Helvetica, sans-serif;
	font-size: medium;
	text-align: center;
	background: #71a871;
	color: #333;
}

a {
	text-decoration: none;
	color: #00f;
}

a:hover {
	text-decoration: underline;
}

strong {
	color: #00f;
}

ul {
	line-height: 150%;
}

/****************************
*                           *
*   skip nav                *
*                           *
****************************/

#skipnav {
	height: 0;
	width: 0;
	left: -19000px;
	overflow: hidden;
	position: absolute;
}

/****************************
*                           *
*   banner                  *
*                           *
****************************/

#banner {
	width: 100%;
	height: 6em;
	background: #fff url(../images/banner.gif) no-repeat top left;
}

#banner h1 {
	font-size: 400%;
	float: left;
	margin-left: 5px;
}


#banner a:hover {
	text-decoration: none;
}

/****************************
*                           *
*   menu                    *
*                           *
****************************/

#gMenu {
	float: right;
	list-style: none;
}

#gMenu li {
	float: left;
}

#gMenu li a {
	padding: 25px 10px 15px 10px;
	display: block;
	font-size: 150%;
}

#gMenu li a:hover {
	background: url(../images/menuHover.gif) repeat-x top left;
	text-decoration: none;
}

body#home #t-home a, body#port #t-port a, body#mike #t-mike a, body#fam #t-fam a, body#links #t-links a, body#mail #t-mail a {
	background: url(../images/menuSelected.gif) repeat-x top left;
	color: #fff;
}

body#home #t-home a:hover, body#port #t-port a:hover, body#mike #t-mike a:hover, body#fam #t-fam a:hover, body#links #t-links a:hover, body#mail #t-mail a:hover {
	text-decoration: underline;
}


/****************************
*                           *
*   content                 *
*                           *
****************************/

#content {
	background: #d0e9ff url(../images/bannerDS.gif) repeat-x top left;
	min-height: 650px;
}

/* for Internet Explorer */
/*\*/
* html #content {
	height: 650px;
}
/**/

#contentArea {
	clear: both;
	padding-bottom: 40px;
	padding-top: 20px;
}

#contentArea:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	padding-bottom: 10px;
}

/*********************
*                    *
*   crumbs           *
*                    *
*********************/

#crumbs {
	text-align: left;
	font-size: 80%;
	list-style: none;
	padding-top: 20px;
	padding-left: 20%;
	height: 1%;
}

#crumbs li {
	float: left;
	padding-right: 5px;
}

#crumbs li:after {
	content: " > ";
}


#crumbs li#last:after {
	content: "";
}

/*********************
*                    *
*   side window      *
*                    *
*********************/

#sideWindow {
	width: 25%;
	margin: 0 0 0 70%;
	border: 2px #000 solid;
	background: #efefef;
	text-align: left;
}

#sideWindow h2 {
	color: #00f;
	font-size: 120%;
	padding: 15px 0;
	margin: 0 0 20px 0;
	border: 0;
	border-bottom: 1px #ddd solid;
	text-align: center;
}

#sideWindow ul {
	list-style: none;
	padding: 0 20px 20px 20px;
}

#sideWindow ul li a {
	padding-left: 15px;
	background: url(../images/li-off.gif) no-repeat left 50%;
}

#sideWindow ul li a.here {
	background: url(../images/li-on.gif) no-repeat left 50%;
}

#sideWindow ul li a:hover {
	background: url(../images/li-hover.gif) no-repeat left 50%;
}

#sideWindow ul li ul li a {
	padding-left: 15px;
	background: url(../images/li-off.gif) no-repeat left 50%;
}

#sideWindow ul li ul li a.here {
	background: url(../images/li-on.gif) no-repeat left 50%;
}

#sideWindow ul li ul li a:hover {
	background: url(../images/li-hover.gif) no-repeat left 50%;
}

#sideWindow dl {
	padding: 0 15px 15px 15px;
	font-size: 90%;
	line-height: 150%;
}

/*********************
*                    *
*   main window      *
*                    *
*********************/

#mainWindow {
	float: left;
	width: 65%;
	margin: 0 0 0 2%;
	border: 2px #000 solid;
	background: #efefef;
	min-height: 450px;
	text-align: left;
}

/* for Internet Explorer */
/*\*/
* html #mainWindow {
	height: 450px;
}
/**/

#mainWindow h2 {
	color: #00f;
	font-size: 200%;
	padding: 15px 20px;
	padding: 15px 0 15px 30px;
	text-align: left;
	border: 0;
	border-bottom: 1px #ddd solid;
}


#mainWindow p {
	text-align: left;
	margin: 30px;
	line-height: 150%;
}


#mainWindow ul {
	margin: 30px 0 10px 50px;
	list-style: none;
}

#mainWindow ul li a {
	padding-left: 15px;
	background: url(../images/li-off.gif) no-repeat left 50%;
}

#mainWindow ul li a:hover {
	background: url(../images/li-hover.gif) no-repeat left 50%;
}

#mainWindow ul li ul {
	margin: 0 0 0 20px;
}


#mainWindow:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

/*********************
*                    *
*   portfolio Items  *
*                    *
*********************/

ul#portfolioList {
	list-style: none;
	width: 100%;
	text-align: left;
	margin: 0;
}

ul#portfolioList li a {
	display: block;
	height: 160px;
	border: 0;
	border-bottom: 1px #ddd solid;
	background: none;
}


ul#portfolioList li a:hover {
	background: url(../images/portItem-hover.gif) repeat-y top left;
	text-decoration: none;
}

span.portTitle {
	margin: 0 0 0 200px;
	padding: 20px 0;
	font-weight: bold;
	font-size: 110%;
	line-height: 250%;
}


span.portDescription {
	margin: 0 0 0 50px;
	padding: 20px 0;
}

ul#portfolioList li img {
	float: left;
	margin-left: 50px;
	padding: 3px 3px 5px 3px;
	background: #fff;
	border: 1px #00f dotted;
}


#wpmow {
	float: left;
	margin: 20px 40px;
}

.moIMG {
	margin: 20px 10px 0 10px;
}

/****************************
*                           *
*   footer                  *
*                           *
****************************/

#footer {
	background: #71a871 url(../images/footerDS.gif) repeat-x top left;
	height: 100px;
	width: 100%;
	font-size: 70%;
	clear: both;
	text-align: left;
}

#footer p {
	padding: 20px 0 0 20px;
}


#footer img {
	border: 0;
}