/* CSS Stylesheet */


/* html, body */
/* Here we set default font for entire page, background and foreground colors and instruct browser to show scrollbars on demand */

html { overflow: auto; }
body { margin: 0; padding: 0; background: #222; color: #ddd; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, sans-serif; }


/* hrefs */
/* These are style definitions for anchor links and their hover states. We don't want borders around linked
images and/or those ugly dotted focus rings */

a { color: #f70; text-decoration: none; outline: none; }
a:hover { text-decoration: underline; }
a.external { color: #3a0; text-decoration: none; outline: none; }
a.external:hover { text-decoration: underline; }
ul.topmenu li a { color: #aaa; text-decoration: none; outline: none; text-shadow: #000 1px 1px 0px; }
ul.topmenu li a:hover { color: #f70; text-decoration: underline; }
.footer_links a { color: #222; text-decoration: none; outline: none; }
.footer_links a:hover { text-decoration: underline; }
a img { border: none; }
a:hover .thumb { background: #f70 !important; }
:focus { outline: none; }
#rss a { color: #aaa; text-decoration: none; outline: none; }
#rss a:hover { color: #f70; text-decoration: underline; }


/* divs */
/* Layer (DIVs) styles help in layouting the page. This layout is fixed in width and centered in window,
but fluid in height. Only that nice Web 2.0 style footer has the width of the window. */

div { margin: 0; padding: 0; }
div#header_container { width: 100%; height: 144px; background: #222; z-index: -1; }
div#header { width: 900px; height: 144px; background: url(images/header-glow.jpg) right top no-repeat; margin: 0 auto; }
div#logo { width: 460px; height: 100px; left: 25px; top: 25px; position: relative; }
div#topmenu { width: 375px; height: 40px; margin-top: 4px; float: right; }
div#content_container { width: 100%; background: #444 url(images/content-bg.png) top left repeat-x; z-index: 0;  }
div#content { width: 840px; padding: 30px; margin: 0px auto; }
div#footer_container { width: 100%; background: #f70 url(images/footer-bg.png) top left repeat-x; height: 144px; }
div#footer { width: 900px; background: url(images/footer-glow.jpg) 5px top no-repeat; height: 144px; margin: 0px auto; }
div#footer_content { width: 840px; top: 13px; left: 135px; position: relative; }
div#quick_links { float: left; width: 140px; margin-right: 40px; }
div#syndication { float: left; width: 250px; margin-right: 50px; }
div#searchbox { float: left; width: 250px; }
div#copyright { width: 100%; height: 22px; background: url(images/copyright-divider.png) top left repeat-x; text-align: center; font-size: 10px; color: #aaa; line-height: 22px; }
div#flash_pano, div#flash_pageflip { text-align: center; border-top: 1px solid #171717; border-left: 1px solid #171717; border-bottom: 1px solid #9b9b9b; border-right: 1px solid #9b9b9b; padding: 5px; width: 840px; margin-bottom: 15px; }
div#flash_pageflip_container { margin-top: -28px; }
div.hor_half { width: 405px; float: left; padding-right: 15px; }
div#rss { font-size: 10px; float: right; padding: 5px; background: url(images/rss-bg.png) no-repeat; }

/* classes */
/* This are styles for elements that repeat themselves several times on the page, hence they are instance of the same class. */

.clearer { clear: both; }
.white { color: #fff; }
.orange { color: #f70; }
.thumb { border-top: 1px solid #171717; border-left: 1px solid #171717; border-bottom: 1px solid #9b9b9b; border-right: 1px solid #9b9b9b; padding: 5px; }
.thumbs { width: 780px; margin: 15px auto; }
.active { background: #f70 !important; }
.float_left { float: left; margin: 0px 15px 15px 0px; }
.float_right { float: right; margin: 0px 0px 15px 15px; }
.small { font-size: 10px; }
.external { background: url(images/external.png) center right no-repeat; padding-right: 13px; }
.download_link { background: url(images/download.png) center right no-repeat; padding-right: 11px; }
.fine_print { color: #aaa; font-style: italic; font-size: 10px; }
.download { padding: 15px; width: 300px; }
.gray { color: #aaa; }
span.caption { display: block; line-height: 18px; }

/* elements */
/* Styles for HTML elements: headings, paragraphs and so on. */

h1, h2, h3 { font-family: "Trebuchet MS", Trebuchet, Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 24px; margin: 0; padding: 0; font-weight: bold; line-height: 24px; color: #aaa; text-shadow: #000 1px 1px 0px; }
h2 { font-size: 18px; line-height: 18px; color: #fff; font-weight: normal; text-shadow: #000 1px 1px 0px; }
h3 { font-size: 14px; line-height: 14px; color: #fff; font-weight: normal; text-shadow: #000 1px 1px 0px; }
hr { border: none; background: url(images/hr.png) top left repeat-x; height: 2px; }
pre, .code { padding: 15px; border-top: 1px solid #171717; border-left: 1px solid #171717; border-bottom: 1px solid #9b9b9b; border-right: 1px solid #9b9b9b; background: #000852; }
input[type=text] { border-top: 1px solid #171717; border-left: 1px solid #171717; border-bottom: 1px solid #9b9b9b; border-right: 1px solid #9b9b9b; padding: 3px; background: #666; margin: 5px; color: #fff; font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; }
input[type=submit], input[type=button] { border-top: 1px solid #9b9b9b; border-left: 1px solid #9b9b9b; border-bottom: 1px solid #171717; border-right: 1px solid #171717; padding: 3px; background: #666; margin: 5px; color: #fff; font-family: "Trebuchet MS", Trebuchet, Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; }
input:hover, input:focus { background: #f70; color: #000; }


/* unordered lists */
/* Used primarily for menu structure and albums. */

ul.topmenu { margin: 0; padding: 0; list-style-type: none; }
ul.topmenu li { display: block; float: left; margin: 0; padding: 0; height: 40px; text-align: center; background: url(images/topmenu-divider.png) top left no-repeat; }
ul.topmenu li.last { background: none; }
ul.topmenu li a { display: block; width: 90px; line-height: 40px; }
ul.topmenu li span { display: block; width: 90px; line-height: 40px; background: url(images/topmenu-active.png); color: #f70; cursor: default;  text-shadow: #000 1px 1px 0px; }
ul.footer_links { margin: 0px 0px 0px 15px; padding: 0; list-style-image: url(images/bullet-arrow-gray.png); list-style-type: square; }
ul { list-style-image: url(images/bullet-arrow-orange.png); list-style-type: square; }
ul.panos { margin: 0px; padding: 0px; width: 816px; margin-left: auto; margin-right: auto; }
ul.panos li { padding: 5px; text-align: center; display: inline; position: relative; height: 160px; float: left; }
ul.panos li a.caption { display: block; line-height: 18px; }
ul.albums { margin: 0px; padding: 0px; width: 730px; margin-left: auto; margin-right: auto; }
ul.albums li { padding: 5px; text-align: center; display: inline; position: relative; float: left; }
ul.albums li .caption { display: block; line-height: 18px; }


/* code & syntax highlighting */

.code .de1, .code .de2 { font: normal normal 1em/1.2em monospace; margin: 0; padding: 0; background: none; vertical-align: top; }
.code  { font-family: monospace; }
.code .imp { color: red;}
.code li, .code .li1 { vertical-align: top; }
.code .ln { width: 1px; text-align: right; margin: 0; padding: 0 2px; vertical-align: top; }
.code .li2 { vertical-align: top; }
.code .kw1 { color: #ff8080; }
.code .kw2 { color: #ff8080; }
.code .kw3 { color: #50aaff; }
.code .kw4 { color: #a0a0ff; }
.code .co1 { color: #a0a0a0; }
.code .co2 { color: #a0a0a0; }
.code .co3 { color: #a0a0a0; }
.code .co4 { color: #a0a0a0; }
.code .coMULTI { color: #666666; }
.code .es0 { color: #ffda31; }
.code .es1 { color: #ffda31; }
.code .es2 { color: #660099; }
.code .es3 { color: #660099; }
.code .es4 { color: #ffda31; }
.code .es5 { color: #006699;  }
.code .es6 { color: #009933; }
.code .es_h { color: #000099; }
.code .br0 { color: #a0a0ff; }
.code .sy0 { color: #a0a0ff; }
.code .sy1 { color: #fe4e4e; }
.code .st0 { color: #ffffa0; }
.code .st_h { color: #0000ff; }
.code .nu0 { color: #d2ffa0; }
.code .nu8 { color: #208080; }
.code .nu12 { color: #208080; }
.code .nu19 { color:#800080; }
.code .me1 { color: #50aaff; }
.code .me2 { color: #004000; }
.code .re0 { color: #00c4c4; }


/* google enhanced 404 page */

#goog-wm { margin-top: 15px; }
#goog-wm h3.closest-match { }
#goog-wm h3.closest-match a { }
#goog-wm h3.other-things { }
#goog-wm ul li { }
#goog-wm li.search-goog { display: list-item; }