/* Global definitions ------------------------------------------------------ */

body {
	background: #d2e2ef url(../i/bg-body.gif) no-repeat fixed bottom right;
	font-family: "segoe ui", "lucida grande", tahoma, verdana, arial, helvetica, sans-serif;
	font-size: 0.8125em;
	line-height: 1.3em;
	
	margin: 0;
	padding: 10px;
	text-align: center;
}

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
}

#content h3 {
	margin-bottom: 1em;
}


/* Wrapping container ------------------------------------------------------ */

#container {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 820px;
}

/* Fullsize Image Container ------------------------------------------------ */

#overlay {
   background: #000;
   filter: alpha(opacity=60);  
   opacity: 0.6;
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 1;
   width: 100%;
   height: 100%;
   display: none;
}

/* Navigation -------------------------------------------------------------- */

#nav {
	background: url(../i/bg-nav.gif) repeat-y;
	float: left;
	overflow: hidden;
}

#nav ul {
	list-style-type: none;
	margin: 0;
	padding: 11px;
}

#nav li {
	width: 180px;
}

#nav a {
	text-decoration: none;
	padding: 2px 2px 2px 14px;
	display: block;
	border-bottom: 1px solid #ddd;
}

#nav a:link, #nav a:visited {
	color: #7C96A6;
}

#nav a:link:hover, #nav a:visited:hover {
	color: #8f9da6;
	background: #F4F8FB url(../i/arrow-blue.gif) no-repeat 3px;
}


/* Navigation || Current Item ---------------------------------------------- */

#nav li.current {
	font-weight: bold;
}

#nav li.current ul {
	padding: 0;
	font-size: 0.9em;
}

#nav li.current li {
	background: #fff;
	font-weight: normal;
}

#nav li.current a {
	border-bottom: 1px solid #ccc;
}

#nav li.current li a {
	padding: 1px 1px 1px 24px;
}

#nav li.current a:link, #nav li.current a:visited, #nav li.current a:link:hover {
	background: #e8f3fB url(../i/arrow-grey.gif) no-repeat 3px;
	color: #454B4F;
}

#nav li.current.has_children a:link, #nav li.current.has_children a:visited, #nav li.current.has_children a:link:hover {
	background: #e8f3fB url(../i/arrow-grey-down.gif) no-repeat 3px;
	color: #454B4F;
}

#nav li.current.has_children li a:link, #nav li.current.has_children li a:visited {
	background: #F4F8FB;
	color: #454B4F;
}

#nav li.current.has_children li a:link:hover, #nav li.current.has_children li a:visited:hover {
	background: #e8f3fB url(../i/arrow-grey.gif) no-repeat 13px;
	color: #4f4f4f;
}

/* Navigation || Current Item (Second Level)-------------------------------- */

#nav li.current li.current a:link, #nav li.current li.current a:visited, #nav li.current li.current a:link:visited {
	background: #e8f3fB url(../i/arrow-grey.gif) no-repeat 13px;
}

/* Content || Wrapper ------------------------------------------------------ */

#content_wrap {
	margin-left: 220px;
	background: url(../i/bg-content.gif) repeat-y;
	width: 580px;
}

/* Content || Header ------------------------------------------------------- */

#content_header {
	color: #304C5A;
	background: url(../i/header-content.jpg) no-repeat top left;
	height: 141px;
	padding: 10px;
	font-size: 90%;
	overflow: hidden;
}

#content_header h1 {
	font-size: 2.0em;
}

#content_header p {
	margin-top: 0.3em;
	font-style: italic;
}

/* Content ----------------------------------------------------------------- */

#content {
	margin: 0 11px 11px 11px;
	width: 555px;
	color: #454B4F;
	overflow: hidden;
}

#content p {
	margin-top: 0;
	margin-bottom: 10px;
}

#content a:link, #content a:visited {
	color: #6582a0;
}

#content a:link:hover, #content a:visited:hover {
	color: #4f7c79;
}

#content a:link:active, #content a:visited:active {
	color: #3c5f5d;
}

/* Content || Web Spot ----------------------------------------------------- */

#content .web_spot {
	padding-bottom: 5px;
	margin-bottom: 10px;
	background: url(../i/bg-web_spot-p.gif) bottom left no-repeat;
}

#content .web_spot p {
	padding: 10px;
	margin-bottom: 0;
	font-size: 0.9em;
}

#content .web_spot h2 {
	font-size: 1.1em;
	background: #e8f3fB;
	border: 1px solid #ccc;
	padding: 4px 7px 4px 7px;
}

#content .web_spot h3 {
	font-size: 0.9em;
	padding: 4px 7px 4px 7px;
	margin-bottom: 0;
}

#content .web_spot h2 a:link, #content .web_spot h2 a:visited, #content .web_spot h3 a:link, #content .web_spot h3 a:visited {
	color: #4270a0;
}

#content .web_spot h2 a:link:hover, #content .web_spot h2 a:visited:hover, #content .web_spot h3 a:link:hover, #content .web_spot h3 a:visited:hover {
	color: #2f5173;
}

#content .web_spot h2 a:link:active, #content .web_spot h2 a:visited:active, #content .web_spot h3 a:link:active, #content .web_spot h3 a:visited:active {
	color: #223a53;
}

/* Content || Image Frame -------------------------------------------------- */

#content .small_frame {
	background: #fff;
	border: 1px solid #bbb;
	margin: 7px;
	padding: 5px;
}

#content .caption {
	text-align: center;
	font-weight: bold;
	font-size: 0.8em;
}

.small_frame img {
	border: 1px solid #ddd;
}

.big_frame {
	border: 1px solid #000;
	display: none;
}

/* Content || PRE ---------------------------------------------------------- */
#content pre {
	font-family: consolas, "courier new", courier;
	
	border: 3px double #DDDDDD;
	font-size: 0.8125em;
	line-height: 1.0em;
	overflow: auto;
	padding: 3px;
}

#content pre ol.numbered {
	background: #eee;
	margin-top: 0;
	margin-bottom: 0;
}

#content pre ol.numbered li {
	color: #666;
}

#content pre ol.numbered li span {
	color: #000;
	background: #fff;
	display: block;
	padding-left: 1em;
}

#content pre ol.numbered li span.new_code {
	color: #060;
}

/* Content || Contact Form ------------------------------------------------- */

#content #contact li {
	margin-bottom: 0.5em;
	padding-left: 0.5em;
}

#content #contact li span, #content #contact li label {
	display: block;
	float: left;
	width: 4em;
	text-align: right;
	margin-right: 1em;
}

#content #contact li label {
	margin-left: 3em;
}

#content #contact #wlm {
	list-style-image: url(http://messenger.services.live.com/users/47a18d2eeb1600b9@apps.messenger.live.com/presenceimage?mkt=en-US);
}

#content #contact #wlm iframe {
	border: solid 1px #bdcbd7; 
	width: 506px;
	height: 300px;
	display: block;
}


#content #contact #mobile {
	list-style-image: url(../i/icon-mobile.gif);
}

#content #contact #email {
	list-style-image: url(../i/icon-email.gif);
}

#content #contact input, #content #contact textarea {
	width: 20em;
}

#content #contact input.btn {
	width: 5em;
}

#content #contact input#submit_btn {

	margin-left: 8em;
}

#content #contact br {
	clear: left;
}

/* Photogallery  ----------------------------------------------------------- */

#content #photography {
	padding: 0;
	margin: 0;
}

#content #photography li {
	margin: 0 5px 5px 0;
	padding: 8px;

	border: 1px outset #ccc;
	background: #f3f3f3;
	text-align: center;
	position: relative;
	float: left;
	display: inline;
}

#content #photography li:hover {
	background: #fff;
}

#content #photography img {
	margin: 0;
	padding: 0;
	vertical-align: middle;
	border: 1px solid #aaa;
}

#content #photography br {
	clear: left;
}

/* Table Stripe ------------------------------------------------------------ */

.stripe_me {
	border-collapse: collapse;
	border: 1px solid #D9D9D9;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.stripe_me td, .stripe_me th  {
	background: #fcfcfe;
	border-right: 1px solid #D9D9D9;
	padding: 5px;
}

.stripe_me th  {
	border-bottom: 1px solid #D9D9D9;
	background: #eee;
}

.stripe_me tr.alt td {
	background: #F1F5FA;
}

.stripe_me tr.over td, .stripe_me tr:hover td {
	background: #eee;
}

.del_row {
	width: 15px;
}

/* Copyright Information  -------------------------------------------------- */

#copy {
	margin-left: 220px;
	width: 480px;
	text-align: center;
	margin-top: 10px;
	
	font-size: 0.8em;
	color: #5E656B;
}

#copy a:link, #copy a:visited {
	color: #454B4F;
}

#copy a:link:hover, #copy a:visited:hover {
	color: #272A2C;
}

#copy a:link:active, #copy a:visited:active {
	color: #272A2C;
}

/* Extra Classes  ---------------------------------------------------------- */

.frame {
	border: 1px dotted #ccc;
}

.frame img {
	border: 1px solid #ccc;
	margin: 3px;
}

.float_right {
	float: right;
	margin-left: 10px;
}

.float_left {
	float: left;
	margin-right: 10px;
}

.clear_right {
	clear: right;
}

.clear_left {
	clear: left;
}

.clear_both {
	clear: both;
}

/* Accessibility Classes  -------------------------------------------------- */

.skip_to_content {
	display: none;
}

a img {
	border: 0;
}