html {
     height: 101%;
}

body {
    margin: 0px;
    padding: 0px;
    background: #EEE;
	color: #666;
	font: 11px/1.3em Arial, Tahoma, sans-serif;
}

/* ---------- DIV Layers ---------- */

#container {
	/* margins at top and bottom are 0px but on the sides, "auto" will center the layout */
    margin: 0px auto;
	padding: 0px;
	/* sets the layout width */
    width: 564px;
	/* add the background to make faux columns */
	background: url(images/rep.jpg) repeat-y;
}
#header {
	width: 100%;
	height: 286px;
	background: #EEE;
	text-align: center;
	background-image: url(images/header.jpg);
}
#rightside {
	width: 120px;
	/* float it to the right of the text */
    float: right;
	padding-right: 50px;
	font: 10px/33px Tahoma, Arial, sans-serif;
	text-transform: lowercase;
}
#body {
	width: 564px;
	background-image: url(images/body.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
}
#text {
	width: 315px;
	padding-left: 51px;
	padding-bottom: 20px;
}
#footer {
	width: 100%;
	height: 52px;
	/* clear: both so that it remains at the bottom of the 3 columns */
    clear: both;
	text-align: center;
}

/* ---------- Paragraph ---------- */

#text p {
	/* font size is 11px and line-height is 15px */
	font: 11px/15px Arial, Verdana, sans-serif;
	text-align: justify;
}

/* ---------- Links ---------- */

#text a:link, a:visited {
 color: #666;
 }
#text a:hover, a:active {
 color: #000;
 }
#text a {
 font-weight: bold;
 text-decoration: none;
 color: #666;
 }
#rightside a:link, a:visited {
 color: #888;
 text-decoration: none;
 }
#rightside a:hover, a:active {
 color: #000;
 }
#footer a:link, a:visited {
 color: #888;
 text-decoration: none;
 }
#footer a:hover, a:active {
 color: #000;
 }

/* ---------- Lists ---------- */

ul {
	border-top: 1px solid #ddd;
	text-align: left;
	list-style: none;
	line-height: 19px;
	padding-left: 0px;
 }
#text li {
	list-style: circle;
	margin-left: 15px;
 }
#rightside li {
	border-bottom: 1px solid #ddd;
	display: block;
	list-style: none;
	text-indent: 20px;
	background-repeat: no-repeat;
    background-position: 6px 5px;
 }
#rightside li:hover {
	background-color: #f3f3f3;
 }
 
#navisite li {
 background-image: url(images/iconsite.gif);
 }
#naviservices li {
 background-image: url(images/iconservices.gif);
 }
#navifolio li {
 background-image: url(images/iconfolio.gif);
 }

/* ---------- Headers ---------- */

h1	{
	font-size: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #999999;
 }
#navisite h1	{
	background-image: url(images/h1_site.gif);
	background-repeat: no-repeat;
	background-position: 0px 10px
 }
 
#naviservices h1	{
	background-image: url(images/h1_services.gif);
	background-repeat: no-repeat;
	background-position: 0px 10px
 }
 #navifolio h1	{
	background-image: url(images/h1_folio.gif);
	background-repeat: no-repeat;
	background-position: 0px 10px
 }
h2	{
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
 }
h3	{
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
 }
 
/* ---------- Table Elements ---------- */

.table {
	font: 11px/1.3em Arial, Tahoma, sans-serif;
	width: 300px;
	color: #666666;
	background: #f8f8f8;
	border: 1px solid #CCCCCC;
}

.table li {
	font: 9px/1.3em Arial, Tahoma, sans-serif;
}

.table td {
	border: 1px solid #CCCCCC;
	padding-left: 3px;
}

.table td:hover {
	background-color: #E7E7E7
}

.formtable {
	font: 11px/1.3em Arial, Tahoma, sans-serif;
}


/* ---------- Form Elements ---------- */

.form {
	font: 11px/1.3em Arial, Tahoma, sans-serif;
	width: 55px;
	height: 20px;
	color: #666666;
	background: #f8f8f8;
	border: 1px solid #CCCCCC;
}

.button {
	font: 10px/1.3em Arial, Tahoma, sans-serif;
	width: 70px;
	height: 25px;
	color: #666666;
	background: #f8f8f8;
	border: 1px solid #CCCCCC;
}

.radiobutton {
	width: auto;
	height: auto;
	background: none;
	border: none;
}

.radiobutton:hover {
	border: none;
}


.form:hover {
	border: 1px solid #666666;

}

input {
	font: 11px/1.3em Arial, Tahoma, sans-serif;
	width: 160px;
	color: #666666;
	background: #f8f8f8;
	border: 1px solid #CCCCCC;
}

input:hover {
	border: 1px solid #666666;
}

select {
	font: 11px/1.3em Arial, Tahoma, sans-serif;
	width: 120px;
	color: #666666;
	background: #f8f8f8;
	border: 1px solid #CCCCCC;
}

select:hover {
	border: 1px solid #666666;
}

textarea {
	font: 11px/1.3em Arial, Tahoma, sans-serif;
	width: 160px;
	color: #666666;
	background: #f8f8f8;
	border: 1px solid #CCCCCC;
}


.ordertextarea {
	font: 11px/1.3em Arial, Tahoma, sans-serif;
	width: 280px;
	color: #666666;
	background: #f8f8f8;
	border: 1px solid #CCCCCC;
}

textarea:hover {
	border: 1px solid #666666;
}