/* Colours
--------------------------------
 * Body Background:     171B20
 * Body Top Stripe:     0D0F10
 * Dark Grey Section:   121519
 * Body Font:           CCC
 * Blue Links:          09F
 * Link Hover:          3CF
 * Headline Green:      96BF55
 * Background Green:    83A94A
 * Section Grey:        1D2128
 * Light Yellow:        FF9
 * Dark Green Links:    33421D
 * Dark Green Hover:    1A210E
 * Color:               74898E 
*/

/* Reset
---------------------------------------------------------------------------------*/
/* Generic
---------------------------------------------------------------------------------*/
body {
	margin: 0px;
	text-align: center;
	font-family: Arial;
	line-height: 1.6;
	background: url(images/background_gray.gif) repeat;
	padding: 0;
	text-shadow: black 0 0 0;
	color: #AAA;
}
a {outline:none;}
a img {border:none;}
strong {font-weight:bold; color:#000;}
code {background:#171B20; padding:1px 2px; font-size:92%; color:#EEE; font-family:Monaco, "Courier New", Courier, mono;}
blockquote {background:#171B20; padding:20px; margin:0 0 1.6em; font-style:italic;}
pre{font-size:86%; width:100%; overflow:auto;}

hr.line {background: url(images/bg-hr-line.gif) repeat-x center center; visibility: visible; height: 2px; border: none; color: transparent; background-color: transparent; width: 100%;}

p {margin:0 0 1.2em;}
#content ul li p {margin:0;}
#footer p {font-size:93%; margin:0;  padding: 100px 0 0;}
#content {overflow: hidden; width: 100%;}
#content p {color: #333;}

p em {font-size:90%; color:#FFF;}
p span {font-size:85%; color:#74898e}
p span a {color: #74898e;}
p span a:hover {color: #FF9;}

/* Layout
---------------------------------------------------------------------------------*/

#websiteheader {}
#websiteheader_topleft {
	border-style: solid;
	border-width: 0px 1px 0px 0px;
	border-color: #000000;
	margin-left: 1px;
	float: left;
	width: 90%;
	height: 10px;
	background: #f5f5f5;
	text-align: left;
}
#websiteheader_topright {
	border-style: solid;
	border-width: 0px;
	border-color: #000000;
	background: url(images/background_gray.gif) repeat;
	height: 10px;
}

#websiteheader_left {
	border: 1px solid #000000;
	float: left;
	width: 90%;
	height: 50px;
	background: url(images/background_lightgray.gif) repeat;
	text-align: left;
}
#websiteheader_right {
	border-style: solid;
	border-width: 1px 1px 1px 0px;
	border-color: #000000;
	background: url(images/background_lightgray.gif) repeat;
	height: 50px;
}
#wrapper {float:left; margin:0 auto; text-align:left; position:relative; top: 1px;}
#header {height:0px; position:relative; padding: 0px 0 0px 0; margin: 0;}
#main {width:60%; float:left;  padding-top: 0px; background: #f5f5f5;}
#sub {
	width: 30%;
	float: left;
	padding-top: 80px;
	text-align: left;
	background: #f5f5f5;
	}
#sub p, #sub h2 {text-align: left;}
#content {background: #f5f5f5; float: left; width: 90%;}
#footer {bottom: 0; background: transparent url(images/bg-footer.png) repeat-x bottom center; }
#breadcrumb {font-size:153.9%; padding:0 0 10px; font-weight:normal; color:#000;}

#website_footer {
 text-align:center; float: none;}
/* Sections */
.section {margin:0 0 5px; background: transparent; clear:both; width: 100%;}

/* .wrapper {overflow: hidden;} */
.section .wrapper {padding:5px 30px; clear:left;}
#photowrapper {}
#photowrapper.section .wrapper {}
.alt {}
.alt .wrapper {padding:5px 10px;}

.notice {margin:0 0 20px; background:#FF9 url(images/notice_top.gif) no-repeat;}
.notice .wrapper {background:url(images/notice_bottom.gif) no-repeat bottom left; padding:5px 10px; color:#171B20;}
.notice div strong {color:#171B20;}
.notice a {color:#333;}
.notice a:hover {color:#39F;}

/* Main Navigation
---------------------------------------------------------------------------------*/
#header h1 {width:426px; height:60px; text-indent:-9999px; position:relative; background:url(images/logo.png) no-repeat;}
#header h1 a {display:block; position:absolute; top:0; left:0; height:100px; width:200px; overflow:hidden; outline:0;}
#header ul {width:530px; height:30px; top:35px; right:0; list-style-type:none; background:url(images/nav.gif) no-repeat; position:absolute;}
#header li {float:left;}
#header ul a {position:absolute; height:30px; top:0; text-indent:-9999px; overflow:hidden; background:url(images/nav.gif) no-repeat top left; outline:0;;}
    
#header #nav_home a {width:53px; left:0; background-position:0 0;}
#header #nav_articles a {width:72px; left:53px; background-position:-53px 0;}
#header #nav_links a {width:52px; left:125px; background-position:-125px 0;}
#header #nav_photos a {width:66px; left:177px; background-position:-177px 0;}
#header #nav_videos a {width:61px; left:243px; background-position:-243px 0;}
#header #nav_downloads a {width:95px; left:304px; background-position:-304px 0;}  
#header #nav_about a {width:59px; left:399px; background-position:-399px 0;}  
#header #nav_contact a {width:72px; left:458px; background-position:-458px 0;}

#header #nav_home a:hover {background-position:0 -30px;}
#header #nav_articles a:hover {background-position:-53px -30px;}
#header #nav_links a:hover {background-position:-125px -30px;}
#header #nav_photos a:hover {background-position:-177px -30px;}
#header #nav_videos a:hover {background-position:-243px -30px;}
#header #nav_downloads a:hover {background-position:-304px -30px;}
#header #nav_about a:hover {background-position:-399px -30px;}
#header #nav_contact a:hover {background-position:-458px -30px;}
  
#page_home #header #nav_home a {background-position:0 -60px;}
#page_articles #header #nav_articles a {background-position:-53px -60px;}
#page_links #header #nav_links a {background-position:-125px -60px;}
#page_photos #header #nav_photos a {background-position:-177px -60px;}
#page_videos #header #nav_videos a {background-position:-243px -60px;}
#page_downloads #header #nav_downloads a {background-position:-304px -60px;}
#page_about #header #nav_about a {background-position:-399px -60px;}
#page_contact #header #nav_contact a {background-position:-458px -60px;}
	
/* Heading
---------------------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6 {text-transform:uppercase;}
h1 {font-size:182%; color:#96BF55; margin:0 0 15px;}
h2 {font-size:153.9%; padding:0 0 10px; font-weight:normal; color:#000;}
h2.underline, #page_photos h2, #page_videos h2, h3.underline {padding:0 0 6px; margin-bottom: 10px; background:transparent url(images/bg-hr-line.gif) repeat-x bottom left;}
h2 em {font-size:60%; font-style:normal; text-transform:none; color:#3399FF;line-height: 100%; vertical-align: middle;}
h2 span {font-size: 50%; color:#6699FF; font-style:normal; text-transform:none; }
h3 {font-size:123.1%; color:#3399FF;}
h3 em {font-size: 80%; color:#FFF; font-style:normal; text-transform:none; }
h3 span {font-size:70%; font-style:italic; font-style:normal; text-transform:none; color:#74898e;}
h4 {font-size:100%; color:#FFF;}

/* Lists
---------------------------------------------------------------------------------*/
ul, ol {margin:0 0 1.6em 8px;}
ol {margin-left:35px;}
ul ul, ol ol {margin:0 0 5px 8px;}
ul {list-style-type:none;}
ul li {margin:0 0 0 5px; padding:0 0 0 20px; background:url(images/bullet.gif) no-repeat 3px 9px;}
#main ul li {list-style-type:disc; list-style-position:inside; margin:0; padding:0 0 0 5px; background: none;}

/* Links
---------------------------------------------------------------------------------*/
a {color:#09F;}
a:link,a:visited {text-decoration:none;}
a:hover {color:#3CF;}

h1 a, h3 a {color:#96BF55;}
h1 a:hover, h3 a:hover {color:#FF9}
h2 a {color:#FFF; text-shadow: #000 0 0 3px;}
h2 em a {color: #FFF;}
h2 a:hover {color:#FF9;}
h2 span a {color:#74898e;}
h3 em a {color: #FFF;}

/* Comments
---------------------------------------------------------------------------------*/
.comments {float:left; width:100%; margin:-35px 0 0; padding:0 0 20px; list-style-type:none;}
.comments li {float:left; width:100%; clear:left; background:#1D2128 url(images/section_bottom.gif) no-repeat bottom left; margin:35px 0 0; padding:0;}
.comments li.untouched {display:none;}
.comments .meta {width:230px; font-size:86%; float:left; padding:25px 0 20px 30px; background:url(images/section_top.gif) no-repeat; margin:0 0 1em;}
.comments .meta a {color:#FFF;}
.comments .meta a:hover {color:#FF9;}
.comments .meta cite {text-transform:uppercase; font-size:110%; font-style:normal; font-weight:bold;}
.comments .date {position:relative;}
.comments .comment {width:490px; overflow:hidden; padding:20px 30px 35px 0; float:right; font-size:110%; background:url(images/section_top.gif) no-repeat top right; margin:0 0 -1em;}
.comments .meta img {float:left; margin:-5px 10px 0 0; border:5px solid #171B20; width:30px; height:30px; overflow:hidden;}
.comments .comment p {margin:0 0 1em;}
.comments li.author {background:#83A94A url(images/section_author_bottom.gif) no-repeat bottom left; color:#171B20;}
.comments li.author .meta,
.comments li.author .comment {background-image:url(images/section_author_top.gif);}
.comments li.author .meta img {background:#171B20;}
.comments li.author strong {color:#FFF;}
.comments li.author blockquote {background:#799D43;}
.comments li.author .comment a {color:#FF9;}
.comments li.author .comment a:hover {color:#FFF;}
  
.comments ul, 
.comments ol {margin:0 0 1.6em 8px;}
.comments ol {margin-left:35px;}
.comments ul {list-style-type:none;}
.comments ul li {margin:0 0 0 5px; float:none; padding:0 0 0 20px; background:url(images/bullet.gif) no-repeat 3px 9px;}

/* Post
---------------------------------------------------------------------------------*/
.post h2 {font-size:165%; font-weight:normal; margin:0; line-height:1.1em;}
.post {font-size:120%; margin:0 0 -1.2em;}
.post p {margin:0 0 1em;}


/* ul Block
---------------------------------------------------------------------------------*/
#sub ul.block {font-size: 90%;}
ul.block  {padding:0 0 1px; margin:10px 0 1.6em; background: url(images/bg-dotted-line.gif) repeat-x bottom left; text-align: left;}
ul.block li {padding:0; margin:0; background: none;}
ul.block li em {}
ul.block li span {}
ul.block li a {height:1%; display:block; padding:10px; background: url(images/bg-dotted-line.gif) repeat-x top left; color: #333; clear:both;}
ul.block li a img {float:left; padding:0 10px 0 0;}
ul.block li a em {font-size: 90%; color:#3399FF;}
ul.block li a span {font-size: 85%; color:#666;}
ul.block li a:hover { background: #F1F1F1 url(images/bg-dotted-line.gif) repeat-x top left; color:#333;}
ul.block li em a:hover {color:#333;}
ul.block li span a:hover {color:#333;}

/* ul Comments
---------------------------------------------------------------------------------*/
ul.comments {padding:0; background: none;}
ul.comments li {display:block; padding:10px; background: url(images/bg-dotted-line.gif) repeat-x top left; clear:both;}
ul.comments li a app
ul.comments li em a {font-size: 90%; color: #FFF;}
ul.comments li span a {font-size: 85%; color:#74898e;}
ul.comments li a:hover {background: none; color: #FF9;}
ul.comments li em a:hover {color: #FF9;}
ul.comments li span a:hover {color: #FF9;}


/* Link Block
---------------------------------------------------------------------------------*/
ul.link-block  {padding:0 0 1px; margin:10px 0 1.6em; background: url(images/bg-dotted-line.gif) repeat-x bottom left;}
ul.link-block li {padding:0; margin:0; background: none;}
ul.link-block li a {height:1%; display:block; padding:10px; background: url(images/bg-dotted-line.gif) repeat-x top left; color: #96BF55; clear:both;}
ul.link-block li a img {float:left; padding:0 10px 0 0;}
ul.link-block li a em {font-size:90%; color:#CCC;}
ul.link-block li a span {font-size:85%; color:#74898e;}
ul.link-block li a:hover {background:#121519 url(images/bg-dotted-line.gif) repeat-x top left; color:#96BF55;}
ul.link-block li em a:hover {color:#CCC;}
ul.link-block li span a:hover {color:#74898e;}
ul.link-block li ul {margin: 0; padding: 1px 0 0 0 !important; background: url(images/bg-dotted-line.gif) repeat-x top left;}
ul.link-block li ul li a {background: none; padding: 5px 10px 5px 20px;}
ul.link-block li ul li a:hover {background-image: none;}

/* List Block
---------------------------------------------------------------------------------*/
ul.list-block {margin: 0; padding: 0;}
ul.list-block li {background: url(images/bg-hr-line.gif) repeat-x bottom left; padding:0 0 10px 0; margin:0;}

/* Stats Block
---------------------------------------------------------------------------------*/
ul.stats-block  {padding:0 0 1px; margin:10px 0 1.6em; background: url(images/bg-dotted-line.gif) repeat-x bottom left;}
ul.stats-block li {padding:0; margin:0; background: none;}
ul.stats-block li a {height:1%; display:block; padding:10px; background: url(images/bg-dotted-line.gif) repeat-x top left; color: #96BF55; clear:both;}
ul.stats-block li a em {font-size:90%; color:#CCC; float: right; padding-left: 10px;}
ul.stats-block li a:hover {background:#121519 url(images/bg-dotted-line.gif) repeat-x top left; color:#96BF55;}
ul.stats-block li em a:hover {color:#CCC;}

/* Comment Block
---------------------------------------------------------------------------------*/
ul.comment-block  {padding:0; margin:10px 0 1.6em; background: none;}
ul.comment-block li {margin:0;display:block; padding:10px; background: url(images/bg-dotted-line.gif) repeat-x top left; clear:both;}
ul.comment-block li a {color: #96BF55;}
ul.comment-block li a:hover {color: #FF9;}
ul.comment-block li img {float:left; padding:0 10px 0 0;}
ul.comment-block li span {font-size:85%;}
ul.comment-block li span a {color:#74898e;}
ul.comment-block li em {font-size:90%;}
ul.comment-block li em a {color: #FFF;}
ul.comment-block li em a:hover {color: #3CF;}

/* App Block
---------------------------------------------------------------------------------*/
ul.app-block  {padding:0; margin:10px 0 1.6em; background: none;}
ul.app-block li {margin:0;display:block; padding:10px; background: url(images/bg-dotted-line.gif) repeat-x top left; clear:both;}
ul.app-block li a {color: #96BF55;}
ul.app-block li a:hover {color: #FF9;}
ul.app-block li img {float:left; padding:0 10px 0 0;}
ul.app-block li span {font-size:85%; color:#74898e;}
ul.app-block li span a {color:#96BF55;}
ul.app-block li em {font-size:90%;}
ul.app-block li em a {color: #FFF;}
ul.app-block li em a:hover {color: #3CF;}
ul.app-block li.even {background: url(images/bg-dotted-line.gif) repeat-x top left;}
ul.app-block li ul {clear: both; margin: 5px 0 0; padding: 0;}
ul.app-block li ul li {background: none; font-size: 85%; padding: 0; margin: 0;}

/* Link List
---------------------------------------------------------------------------------*/
ul.link-list {padding:0; margin:10px 0 1.6em; background: none;}
ul.link-list li {padding:0; margin:0; background: none;}
ul.link-list li a {height:1%; display:block; padding:10px 10px 10px 35px; background: url(images/li-lg-bg.gif) no-repeat top left; margin:0; color:#96BF55;}
ul.link-list li a span {font-size:85%; color:#CCC;}
ul.link-list li a em {font-size:90%; color:#CCC;}
ul.link-list li a:hover { color:#96BF55; background:#121519  url(images/li-lg-bg.gif) no-repeat top left;}
ul.link-block li span a:hover {color:#CCC;}
ul.link-block li em a:hover {color:#CCC;}

/* Links List
---------------------------------------------------------------------------------*/
#links-list ul {list-style:none; padding:0; margin:0; border:none;}
#links-list li {background: none;list-style:none; padding:0; margin:0; border:none;}
#links-list ul {margin:0 0 .5em 0; padding-bottom:1px; background:transparent url(images/bg-dotted-line.gif) repeat-x bottom left;}
#links-list ul li {color:#74898e; padding-top:1px;}
#links-list ul li a {height:1%; display:block; border:0; padding:0;}
#links-list ul li a:link,
#links-list ul li a:visited {color:#74898e; padding:4px 12px 4px 26px;	background:transparent url(images/bg-links.gif) no-repeat top left;}
#links-list ul li a:hover {color:#96BF55; padding:4px 12px 4px 26px; background:url(images/bg-links.gif) no-repeat 0px -150px;}	

#links-list ul.linear-nav {margin:10px 0 20px 0; background:none; width:655px;}	
#links-list  ul.linear-nav li {display:inline; float:left;	margin:0 10px 7px 0; white-space:nowrap;}
#links-list  ul.linear-nav li a {display:inline;}		
#links-list  ul.linear-nav li a:link,
#links-list  ul.linear-nav li a:visited {padding:4px 21px 4px 0; background:transparent url(images/bg-linear-nav.gif) no-repeat right center;}		
#links-list  ul.linear-nav li a:hover  {}  

/* Tabs
---------------------------------------------------------------------------------*/
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em; width: 100%; overflow: hidden;}
.tabbertab {padding: 20px 30px; background:#1D2128 url(images/section_bottom.gif) no-repeat bottom left; margin:0 0 20px; text-align:left; clear:both;}
ul.tabbernav {margin:0 0 4px; padding: 8px 0; font: bold 12px Verdana, sans-serif;}
ul.tabbernav li {list-style: none; margin: 0; display: inline; background:none; padding:0;}
ul.tabbernav li a {padding: 12px 2em; border:none; text-decoration: none; margin:0 1px 0 0}
ul.tabbernav li a:link, ul.tabbernav li a:visited {color: #CCC; background:#121519;}
ul.tabbernav li a:hover {color: #96BF55;}
ul.tabbernav li.tabberactive a {color:#FFF; background:#1D2128;}
ul.tabbernav li.tabberactive a:hover {color: #FFF; background:#1D2128;}

/* Flickr
---------------------------------------------------------------------------------*/
#flickr {padding:0; margin:0 auto; margin-top: 5px;}
#flickr a img {border:none;}
#flickr a:hover,
#flickr a:link,
#flickr a:active,
#flickr a:visited {text-decoration:none !important; background:inherit; border:none; color:transparent;}
#flickr img {float:left; margin:0 0px 6px 6px; background:#0D0F10; padding:8px; width:82px; height: 82px;}
#flickr img.image_link {border:none; padding:8px 0; background:transparent; width:30px;}

div.date {float:left; width: 38px; margin-right:10px;}
div.date img {float: left; border:none; padding:0; margin:0;}

.s1c1, .s2c1, .s2c2, .s3c1, .s3c2, .s3c3, .r2c1, .r1c2 {margin-bottom: 10px; clear: right;}

.s1c1 {width:100%; clear: both;}

.s3c1 {float:left; width:240px; margin-right:10px;}
.s3c2 {float:left; width:240px; margin-right:10px;}
.s3c3 {float:left; width:240px;}

.s2c1 {float:left; width: 358px; margin-right:24px;}
.s2c2 {float:left; width: 358px;}

.l2c1 {float:left; width: 485px; margin-right:25px;}
.l2c2 {float:left; width: 230px;}

.box {background: #121519 url(images/bg-3c-box-top.gif) no-repeat top center; font-size: 95%; margin-bottom: 10px;}
.box p, .box ul, .box h2, .box h3, .box h4, .box h5 {margin-left:8px; margin-right: 8px; padding-top: 3px;}
.box .link-block {margin-top: 5px;}
.box .link-block a:hover {background:color:#96BF55 url(images/bg-dotted-line.gif) repeat-x top left;}
.box a:hover, .box .link-block li a:hover, .box .link-block li a:hover em, .box .link-block li a:hover span  {color: #FF9;}
.box hr {background: url(images/bg-3c-box-bottom.gif) no-repeat bottom center; visibility: visible; margin: 0; height: 5px; border: none; background-color: transparent ; color: #121519; width:100%;}

.switch {background: #121519 url(images/bg-l2c2-top.gif) no-repeat top center; font-size: 95%;}
.switch p, .switch ul, .switch h2, .switch h3, .switch h4, .switch h5 {margin-left:8px; margin-right: 8px; padding-top: 3px;}
.switch .link-block {margin-top: 5px;}
.switch .link-block a:hover {background:color:#96BF55 url(images/bg-dotted-line.gif) repeat-x top left;}
.switch a:hover, .switch .link-block li a:hover, .switch .link-block li a:hover em, .switch .link-block li a:hover span  {color: #FF9;}
.switch hr {background: url(images/bg-l2c2-bottom.gif) no-repeat bottom center; visibility: visible; margin: 0; height: 5px; border: none; background-color: transparent ; color: #121519; width:100%;}

.r2c1 {float:left; width: 230px; margin-right:25px;}
.r2c2 {float:left; width: 485px;}
.debug {border: 1px solid #FF0000;}

/* Image Replacement Technique 
http://wellstyled.com/css-replace-text-by-image.html

#testme a {width:36px; height:45px; background-image: url(/theme/default/images/16x10.png);}
#testme a:hover {background-position: 0 -45px;}

<h2 class="imgr" id="testme"><a href="#" title="link"><span>Hello World</span></a></h2>
---------------------------------------------------------------------------------*/
.imgr  {margin:0; padding:0;float:left; margin-left:5px;}
.imgr a {display:block; margin:0; padding:0; background-repeat: no-repeat; background-position: 0 0; text-decoration: none;}
.imgr a:hover {background-repeat: no-repeat;}
.imgr a span {display:none;}

#btn-4x3 a {width:30px; height:45px; background-image: url(/theme/default/images/btn-4x3.png);}
#btn-4x3 a:hover {background-position: 0 -45px;}

#btn-16x10 a {width:36px; height:45px; background-image: url(/theme/default/images/btn-16x10.png);}
#btn-16x10 a:hover {background-position: 0 -45px;}

#btn-download a {width:57px; height:45px; background-image: url(/theme/default/images/btn-download.png);}
#btn-download a:hover {background-position: 0 -45px;}


/***** Global Classes *****/
.clear         {clear:both;}
.float-left    {float:left;}
.float-right   {float:right;}
 
.text-left     {text-align:left;}
.text-right    {text-align:right;}
.text-center   {text-align:center;}
.text-justify  {text-align:justify;}

.bold          {font-weight:bold;}
.italic        {font-style:italic;}
.rule          {border-bottom:1px solid;}
.highlight     {background:#ffc;}
 
.img-left      {float:left;margin:4px 10px 4px 0;}
.img-right     {float:right; margin:5px 0 15px 20px; padding: 6px; background: #121519; border: 1px solid #262A31; line-height: 0.5em;}
 
.nopadding     {padding:0;}
.noindent      {margin-left:0;padding-left:0;}
.nobullet      {list-style:none;list-style-image:none;}

.expand        {width:100%;}
.nowrap        {white-space: nowrap;}




#dpi ol {width:100%;}
#dpi li {background: url(images/bg-dotted-line.gif) repeat-x bottom center; list-style: decimal;}
#dpi li a {display: block; padding: 2px 6px;}
.dpiTop {}
.dpiBottom {}
li.dpiH2 a {font-size: 110%; color: #FFF;}
li.dpiH3 a {font-size: 100%; color: #999;}
li.dpiH4 a {font-size: 90%; color: #666;}
#dpi a:hover {color: #FF9; !important; background: #121519 url(images/bg-dotted-line.gif) repeat-x bottom center; }
.dpiDIV a {}