@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
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; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }


/* Framework */

html { background: url(../images/bg.png) top left repeat-x; }

body {max-width: 600px; margin-left: auto; margin-right: auto; font-family: Verdana, Arial, Helvetica, sans-serif; color: #002255; font-size: 80%; line-height: 1.4em; letter-spacing: 0.025em; padding-bottom: 30px; }

h1 {display: block; width: 10475px; height: 250px; background: url(../images/logo.png) top right no-repeat; margin-left: -10000px; margin-bottom: -75px;}

hr { display: block; width: 110%; height: 0px; border: solid 1px #3d6186; border-top: solid 1px #003366; margin-left: -5%; margin-bottom: 21px; }

/* Common Elements */

h3 { color: #3d6186; font-size: 2em; font-weight: normal; margin-bottom: 26px; }

h4 { color: #3d6186; font-size: 1.3em; font-weight: normal; margin-bottom: 13px; }

p, small { margin-bottom: 18px; }

a { color: #3d6186; text-decoration: none; }
p a, h3 a, h4 a { border-bottom: solid 1px #3d6186; }
a:hover { color: #1f2257; border-bottom-color: #1f2257; }

p + h3 {margin-top: 48px; }

textarea, input, select { border: solid 1px #dde0e2; background-color: #ffffff; }
textarea:focus, input:focus, select:focus { border: solid 1px #3d6186; background-color: #e9f5fb; }

form { border: solid 1px #3d6186; background-color: #edf0f2; padding: 2em; }

form dt, form dd {width: 40%;}

form dd {margin-bottom: 18px;}

form dl .right {float:right; clear: right;}

form dd textarea, form dd input, form dd select { width: 100%; }

form fieldset legend { display: none; }

button { float:right; clear: right; }

/* Fancy Elements */

/* sample box */
.sample-box { margin-bottom: 48px; }
.sample-box:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.sample-box img {margin-bottom: 14px;}

/* non-js sample box layout*/
ul.sample-box li { margin-left: 136px; margin-bottom: 48px; }
ul.sample-box li img.icon { margin-left: -136px; float:left; }

/* js sample box layout*/
div.sample-box .icons {display: block; float: left; width: 136px; }
div.sample-box .icons li {display: block; cursor: pointer; float: left; margin-right: 14px; opacity:0.4 ;filter:alpha(opacity=40); }
div.sample-box .icons li:hover {opacity:.6 ;filter:alpha(opacity=60);}
div.sample-box .icons li.active {opacity:.8 ;filter:alpha(opacity=80);}
div.sample-box .panels {display: block; width: 464px; margin-left: 136px;}

/* ie hacks */
#ie6wrap { width: 600px; }
#ie6wrap div.sample-box .icons {width: 132px; }
#ie6wrap div.sample-box .icons li { margin-right: 12px; display: inline-block; }
#ie6wrap div.sample-box .panels { width: 440px; margin-left: 140px;}