/* 

jFlow Plus Demo CSS 

Description: Demo styles NOT for use with jFlow Plus

Creator: Devin Walker

Date: October 4, 2011

*/

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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

body { margin: 0; padding: 0 50px 50px 50px; /*background: url("../images/bg.png") repeat top left transparent;*/ font-family: Arial, Helvetica, sans-serif; }

a { color:#838c1c; text-decoration: none; }

#container { background: #FFF; width: 940px; margin: 0 auto; -moz-box-shadow: 0 0 10px 5px #c3c3c3; -webkit-box-shadow:0 0 10px 5px #c3c3c3; box-shadow:0 0 10px 5px #c3c3c3; }

/* header */

#header {  overflow: hidden; }

#logoWrap { background:url('../images/demo-page/jflow-logo.png') no-repeat top left transparent; margin: 5px auto 10px; width: 310px; height: 100px; position: relative; }

#logoWrap h1 { font: 56px/1em 'Rokkitt', serif; color:#4f4e4e; text-shadow: 1px 1px 2px #9f9f9f; margin: 0px; text-indent: -9999px;}

#logoWrap h1 span { font-size: 18px; line-height: 30px; text-transform: uppercase; text-shadow: 0px 0px 0px; text-indent: -9999px;}

#headerSocials { overflow: hidden; position: absolute; bottom: 15px; left: 0; }

.socialItem { float: left; }

#adWrap { float: right; margin: 25px 30px 15px; background: #DDD; }

#downloadWrap { float: right; text-align: center; margin: 0 30px 0 0; }

#downloadWrap a { background: url('../images/download-sprite.png') no-repeat right top transparent; padding: 0 40px 0 0; font-style: italic; font-size: 14px; float: left; line-height: 30px; }

#downloadWrap a:hover { background-position: right -31px; color:#5d6410; }

/* content */

#content { padding: 20px 20px 60px; overflow: hidden; }

#content p { font-size: 14px; color:#646464; line-height: 18px; margin: 0 0 10px; }

#content h2, #content h3, #content h4 { font-size: 16px; font-weight: bold;padding: 15px 0; }

#main { float: left; width: 600px; }

#sidebar { float: right; width: 250px; }

/* intro */

#content .intro-heading { font:30px/42px 'Rokkitt', serif; color:#4f4e4e; border-bottom: 1px solid #d6d6d6; margin: 0 0 15px; padding: 0; }

#content .intro-p { font-size: 18px; line-height: 22px; font-style: italic;  }

/* sidebar */

.sidebar-widget { margin: 10px 0 20px; }

#sidebar .widgettitle { font:24px/30px 'Rokkitt', serif; color:#4f4e4e; margin: 0 0 15px; padding: 0; }

.ad-widget { padding: 20px 0 0; }

/* checklist */

.check-list { margin: 0; }

.check-list li { background: url('../images/demo-page/checkmark.png') no-repeat 0px 0px transparent; padding: 0 0 12px 20px; font-size: 14px; line-height: 20px; font-style: italic; }

#w3c { padding-bottom: 0px; }

#w3c span { position: relative; top: -15px; }

#w3c a { padding: 0 0 0 5px; position: relative; top: -5px; }

/* options table */

.option-name { font-weight: bold;   }

.option-type { font-style: italic; }

table td { padding:10px; line-height:18px; }

tr:nth-child(odd)		{ background-color:#eee; }

tr:nth-child(even)		{ background-color:#fff; }

/* code */

pre { background: #EEE; margin:0 0 15px; padding: 10px; overflow: auto; font-size: 12px; }