/* Optic Swerve, opticswerve.com
----------------------------------*/

/* Reset, based on Meyer Reset
-------------------------------*/
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, font, 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 {
	margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
	vertical-align: baseline; background: transparent;

}

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

/* Remember! Define focus style */
:focus { outline: 0; }

/* Remember! Highlight inserts */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* Tables need cellspacing='0' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

/* Generic Style
-----------------*/
html { -webkit-text-size-adjust: none; }
body { background: #fff; color: #222; font-family: Georgia, Helvetica, Arial, sans-serif; font-size: 62.5%; line-height: 1.6; }

a { color: #f0f; cursor: pointer; padding-bottom: 1px; text-decoration: none; }
a:link { color: #f0f; }
a:visited { color: #f0f; }
a:hover, a:active { color: #58d; }
a:focus { outline: 1px dotted black; }

table { border: 1px solid #111; margin-bottom: 1.4em; width: 100%; }
thead { border-bottom: 1px solid #111; }
tfoot { border-top: 1px solid #666; font-style: italic; }
thead th { background: #222 url(../data/artwork/menuRepeat.png) 0 -32px repeat-x; border-bottom: 1px solid #000; color: white; text-align: left; }
tfoot th { background: #444; border-top: 1px solid #000; color: white; text-align: left; font-weight: normal; }
th, td, caption { padding: 5px 10px 5px 6px; }
td { border-right: 1px dashed #ddd; }
caption { background: #eee; }
tr.even td  { background: #f4f4f4; }

#header { width: 100%; max-width: 980px; margin: 0 auto; overflow: hidden; }
#header h1 { width: 100%; }
#header a { border-bottom: 1px dotted #ddd; color: #333; display: block; padding-left: 28px; width: 100%; }
#header a:hover { border-color: #ff00ff; }

#wrapper { background: #fff; margin: 0 auto; width: 980px; font-size: 1.6em; overflow: hidden; }
#subWrapper { position: relative; width: 100%; }
.content0 { float: left; width: 600px; min-height: 800px; border-right: 1px dotted #ddd; padding: 30px 30px 0; }
.content1 { float: left; width: 260px; padding: 30px 0 0 30px; }

form { margin-bottom: 1em; }

ol { list-style: decimal; margin-bottom: 10px; }
ol li { margin: 5px 0; margin-left: 20px; }
ul { list-style: disc; margin: 0 0 1.5em 2em; }
ul li { margin: 0.25em 0 0.25em; }
dl { margin: 0 0 1.5em; }
dt { font-weight: bold; }
dd { margin: 0 0 0.5em 1em; }
p { margin: 0 0 1.5em; }

h1, h2, h3 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; text-rendering: optimizeLegibility; }
h1 { color: #282828; font-size: 6em; line-height: 1.1; text-shadow: 1px 1px 2px #aaa; }
h2 { color: #282828; font-size: 2.4em; line-height: 1.1; margin-bottom: 0.5em; text-shadow: 1px 1px 2px #aaa; }
h3 { color: #000; font-size: 1.8em; line-height: 1.2; margin-bottom: 0.5em; text-shadow: 1px 1px 2px #bbb; }

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited { border: none; color: #282828; display: block; width: 100%; }

hr { background: #ddd; border: none; color:#ddd; float: none; clear: both; width: 100%; height: .1em; margin: 0 0 1.45em; }
strong { font-weight: bold; }
abbr, acronym { border-bottom: 1px dotted #333; cursor: help; }

/* Preformatted, Teletype and 'Code' monospace text */
code { background: #f9f9f9; border: 1px dashed #d9d9d9; display: block; white-space: pre; margin: 1.5em 0; padding: 0.8em 2.0em 2em; overflow: auto; }
pre { margin: 1.5em 0; white-space: pre; }
pre, code, tt { font-family: 'andale mono', 'lucida console', monospace; font-size: 12px; line-height: 1.2; }

/* Sub and superscript */
sup, sub { font-size: 0.75em; line-height: 0; position: relative; }
sub { top: 0.4em; }
sup { bottom: 0.5em; }

blockquote { font-style: italic; margin: 0 2em 1.5em 1em; padding: 0; }

/* Basic Menu
--------------*/
#menu { position: absolute; top: 8px; right: 20px; }
#menu li { float: left; margin: 0 5px; }

/* Notifications
-----------------*/
#notify { background: #eee; padding: 10px 0; border-bottom: 1px solid #555; font-size: 1.2em; position: absolute; top: 0; left: 0; width: 100%; z-index: 1; text-align: center; display: none; }

/* Site Specific Style
-----------------------*/
.advert { margin-bottom: 10px; }
.article { margin-bottom: 2.4em; padding-bottom: 2em; border-bottom: 1px dotted #bbb; }
.articleInfo { color: #999; }
.callout { background: #eee; border: 1px solid #eaeaea; border-radius: 8px; color: #000; margin-bottom: 1em; padding: 12px 16px 12px; }

#zoom { background: #eee; }
img.highRes:hover, img.highRes:active { width: auto; height: auto; }

/* Transitions
---------------*/
#header a, #wrapper a {
	transition-property: border-color, color; transition-duration: 1s, 1s;
	-moz-transition-property: border-color, color; -moz-transition-duration: 1s, 1s;
	-o-transition-property: border-color, color; -o-transition-duration: 1s, 1s;
	-webkit-transition-property: border-color, color; -webkit-transition-duration: 1s, 1s;

}

/* Pretty Print
----------------*/
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
 
}

/* 980
-------*/
@media only screen and (max-width: 980px) { }

/* iPad
---------*/
@media only screen and (max-width: 768px) {
	#header a { padding: 0 5% 0; width: 90%; }
	#wrapper { width: 100%; }
	#subWrapper { padding: 0; }
	.content0 { border: none; width: 90%; margin: 0; padding: 5%; }
	.content1 { display: none; }

}

/* iPhone
----------*/
@media only screen and (max-width: 480px) {
	h2 { font-size: 1.8em; }
	h3 { font-size: 1.6em; }
	img { max-width: 100%; }

}

@media only screen and (max-width: 320px) {
	#header h1 { font-size: 3.2em; }

}