/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.3;
}
ul {
	list-style: disc outside none;
	padding-left: 15px;
}
ol {
	list-style: decimal outside none;
	padding-left: 15px;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* END of CSS Reset */

body {
padding:5px 15px;
background-color:#f4f2ee;
font-family:sans-serif;
}

p {
padding:15px 5px;
}

ul, ol {
margin-left:20px;
}

.sample-1{
background:url('img/sample-1.png') transparent top left no-repeat;
width:160px;
height:160px;
padding:20px;
margin:10px;
clear:both;
background-color: transparent;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='img/sample-1.png');
}
.scroll {
width:210px;
height:225px;
padding:70px 50px 50px;
margin:10px;
overflow:auto;
float:left;
color:#fff;
text-shadow: 0px 0px 2px #000;
}
.sample-1-scroll {
background:url('img/eye1.jpg') transparent top left no-repeat scroll;
}
.sample-1-no-scroll {
background:url('img/eye2.jpg') transparent 375px 310px no-repeat fixed;
}

.sample-2 {
clear:both;
background:url('img/sample-2.png') transparent top left repeat-x;
width:400px;
height:100px;
margin:10px;
}

.sample-3 {
background:url('img/sample-3.png') transparent top left repeat-y;
width:100px;
height:200px;
margin:10px;
}

.sample-4{
display:block;
background:url('img/off-button.jpg') transparent 0 -183px no-repeat;
width:200px;
height:183px;
border:0 solid transparent;
text-indent:-9999px;
}

.sample-4:hover{
background:url('img/off-button.jpg') transparent 0 0 no-repeat;
width:200px;
height:183px;
border:0 solid transparent;
}

.sample-5{
background:url('img/sprites.png') transparent 0 0 no-repeat;
width:100px;
height:190px;
border:0 solid transparent;
}
.sample-6{
background:url('img/sprites.png') transparent -440px -22px no-repeat;
width:140px;
height:170px;
border:0 solid transparent;
}
.sample-7{
background:url('img/sprites.png') transparent -473px -259px no-repeat;
width:96px;
height:96px;
border:0 solid transparent;
}

/* adapted from from http://kailoon.com/example/sliding-door/css-sliding-door-blue.html */
.sample-8{
background: url(img/blue.png) no-repeat top right;
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 10px;
clear:both;
}
.sample-8 span{
background: url(img/blue.png) no-repeat top left;
margin: 0 10px 0 -10px;
padding: 1px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;

}

ul.blue-sliding {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	background-color: #fff;
	border-bottom: 1px solid #e7e7e7;
	float: left;
	clear: left;
}

ul.blue-sliding li {
	float: left;
	display: inline; /*For ignore double margin in IE6*/
	margin: 0 10px;
}

ul.blue-sliding li a {
	text-decoration: none;
	float:left;
	color: #999;
	cursor: pointer;
	font: 900 14px/22px "Arial", Helvetica, sans-serif;
}

ul.blue-sliding li a span {
	margin: 0 10px 0 -10px;
	padding: 1px 8px 5px 18px;
	position: relative; /*To fix IE6 problem (not displaying)*/
	float:left;
}

/*BLUE*/
ul.blue-sliding li a.current, ul.blue-sliding li a:hover {
	background: url(img/blue.png) no-repeat top right;
 	color: #0d5f83;
}

ul.blue-sliding li a.current span, ul.blue-sliding li a:hover span {
	background: url(img/blue.png) no-repeat top left;
}

/* Links */
a {
color:#737f8f;
text-decoration:none;
}
a:visited {
color:#526072;
}
a:hover {
color:#8ba4c5;
text-decoration:underline;
}

/* Main content areas */
.header {
border:1px solid #d9d7d2;
background:#1b2e4d url('img/header-bg.png') repeat-x top left;
color:#c6d8f5;
margin-bottom:10px;
height:60px
}
.header h1{
padding:12px 10px;
font-size: 26px;
font-weight: bold;
width:40%;
float:left;
}
.header h1 a, .header h1 a:visited{
color:#c6d8f5;
text-transform: lowercase;
}
.header h1 a:hover{
color:#c6d8f5;
}

header {
font-size:120%;
font-weight:bold;
text-transform: lowercase;
}

.content  {
border:1px solid #d9d7d2;
background-color:#fff;
padding:15px 0;
margin-top:0px;
margin-bottom:10px;
padding:5px 10px;
}

/* ul li menu adapted from http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html */
.menu {
width:56%;
float:right;
padding-top:5px;
text-transform: none;
margin-right:10px;
}
.menu ul {
list-style-type: none;
height: 50px;
float:right;
}

.menu li {
float: left;
}

.menu ul a {
background-image: url(navi_bg_divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 50px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #ccc;
}

.menu ul a:hover {
color:#fff;
background-color:#4f627b;
}
.clear {
display:block;
clear:both;
}