/* -------------- Globals ----------------------------- */

/* ---- The Basics ---- */

html, body {
    margin: 0; padding: 0;
    font: normal 12px/20px Verdana, sans-serif; 
    color: #525252;
}
/* Headings */
h1, h2, h3 {
    font-family: Lucida Grande, Helvetica, Arial, sans-serif; 
    color:#4082BA !important;
    margin: 0; padding:0;
    line-height: 160%;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size:17px; 
    margin-top: .5em; /* JM added 23 June */
}
h3 {
    font-size: 13px;
    margin-top: .5em;
    margin-bottom: .5em;
}
/* Lists */
dt {
    color: #373; font-weight: bold; margin-top: .5em; font-size: 13px; 
}
dd {
    padding-left: 2em; 
}
li {
     margin-bottom: 1em; 
}
/* Hyperlinks */
a {
    color: #4082BA; 
    text-decoration: none;
    font-weight:bold;
    border-bottom:1px dotted #4082BA;
}
a:visited {
    color: #4082BA;
    border-bottom:1px dotted #4082BA;
}
a:hover {
    color: #555; 
    border-bottom: 1px dotted black; 
}
/* Code */
pre {
	padding: .5em; 
	margin: 0; 
	font-size: 13px;
	line-height: 17px;
}
pre em {            /* emphasized code */
    color: red;
    font-style: normal;
}
pre.console {       /* used to show console commands */
    margin-left: 2em; 
    width: 80%; 
    color: #333; 
}
span.console_out {   /* used to show console output */
    color: #888; 
}

fieldset label span {
    display: block;
    width: 200px;    
    float: left;
}
fieldset div {
    clear: left;
    margin: .5em;
}

/* Hidden by default */
.accessibility_offscreen {
    position: absolute;
    top: -9999em;
}


/* ---- Top Navigation Bar ---- */

/* Main title bar navigation across the top of the page */
#mainnav {
	margin: 0; 
	padding: 0;
	border: 1px solid #000; /* disable collapsing margins */
    border-width: 0 0 1px 0;
    background: #eee;
}
#mainnav div {
    clear: left; 
    margin: 0; 
    padding: 0; 
}
    /* Small "JITSU" on title bar */
#mainnav h1 {
    float: left;
    font-size: 10px;
    line-height: 10px;
    margin: 0; padding: 0;
    width:51px;
    height:30px;
    text-indent:-99999em;
    margin:5px 15px;    
    background:transparent url(/jitsu/images/small_logo.gif) 50% 50% no-repeat;
}

#mainnav ul {     /* menu list */
    float: left;
	padding:10px 0;
	margin:0 0 0 65px;
    display: inline;
}
#mainnav li {     /* menu optin */
	list-style-type: none;
	float: left; 
	margin:0;
	padding: 0;
}

/* a little bit of Fitt's law applied to the main nav */
#mainnav li a{
    display:block;
    float:left;
    margin:0;
    padding:0 0.5em;
    border:0;
}

#mainnav .navbar_current {
	border:0;
	background: #4082BA;
    color:#fff;
}

/* ---- Secondary Navigation Bar ---- */

#secondarynav {         /* on left side of page */
	position: absolute;
    left: 10px;
    top: 11em;
    width: 170px;
}
#secondarynav h2 {
    color: black; 
    margin-bottom: 0; 
    text-align: center;
}
#secondarynav h3 {
	/* border-top: 1px solid #ccc; */
	margin-right: .5em; 
	margin-left: .5em;
	margin-bottom: 0;
}
#secondarynav ul, #secondarynav li {
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
}
#secondarynav ul {
    margin-bottom: 1em; 
}
#secondarynav li {
    margin-left: .7em; 
    padding-top: 10px;
}
#secondarynav a {
    font-family: arial; 
    font-size: 12px; 
    border-bottom: none;
}
#secondarynav .padded {
    padding-left: 0; 
    padding-right: 0; 
}
#secondarynav .navbar_current {
	color: black;
	border-bottom: none;
	font-weight: bold;

	background: #4082BA;
    color:#fff;
    padding: 0px 2px;
}
/* Expand/collapse buttons on Secondary nav on the quicktours / reference */
.accordian {
    margin-bottom: .5em;
    line-height: 10px;
}
.accordian a {
    font-weight: normal !important;
    color: gray !important; /* ie6 needs important here */
    border: none;
}
.accordian img {
    border: none;
}
.accordian_items {
    padding-left: 20px !important;
    line-height: 15px;
}

/* chunky buttons */
.bigmenu {
    display: block;
    height: 30px;
    line-height:30px;
    margin-top: 10px;
    padding:0 5px;
    background:transparent url(/jitsu/images/chunky_button1.png) 50% 50% no-repeat;
}
.bigmenu_current {
    background:transparent url(/jitsu/images/chunky_button.png) 50% 50% no-repeat !important;
}
.bigmenu a, .bigmenu a:hover{
    color:#fff !important; /* ie6 needs important here */
    margin-left:10px;
}
.bigmenu a.navbar_current{
    color:black !important; /* ie6 needs important here */
}
.bigmenu a:hover.navbar_current{
    color:black !important; /* ie6 needs important here */
}

/* ---- Content ---- */

/* make the main column of content a fixed width */
#content {
	margin-top: 4em;
	margin-left: 210px;
	width: 550px;
}
/*
#content h1 {
    margin-top: 0; 
    margin-bottom: .5em;  
}
#content h2 {
    margin-bottom: .5em; 
}*/

/* for one-column pages with no secondary nav */
.medium_content {
    margin-left: 170px !important; 
    margin-top: 70px !important;
    width: 570px !important; 
}

/* ---- Useful Classes ---- */

/* Gray box technical note in documentation */
/*.technote {
	background-color: #eee; 
	border: 1px solid #333; 
    margin:1em 0;
    padding: 0;
}*/
.technote {
    margin:1em 0;
    padding: 0;
}

.technote_note {
    background: #ecf3f8 url(/jitsu/images/technote.png) 5px 50% no-repeat;
    margin: 0; 
    padding: 1px;
}
.technote_early_access {
    background: #E9F7C0 url(/jitsu/images/technote_ea.png) 5px 50% no-repeat;
    margin: 0;
    padding: 0;
}
.technote .padded {
    margin: 0;
    margin-left: 90px;
    padding: 1px;
}

/* Boxes with rounded corners */
.line {
    overflow: hidden; 
    padding: 0; 
    height: 1px; 
}
.lightgray {
    background-color: #eee;
}
.mediumgray {
    background-color: #ccc;
}
.lightblue {
    background-color: #ecf3f8;
}

.lightgreen{
    background:#E9F7C0;
}
.mediumgreen {
    background:#c9d7a0;
}

.white 
{
    background-color: #fff;
}
.blue {
    background-color: #20801c; /*#1c208b;*/
}
.paddedlight 
{
    padding: 8px;
    margin: 0;
}
.padded {
    padding: 1em;
    margin: 0;
}
.unpadded {
    margin: 0; 
    padding: 0; 
}

/* Contents with descriptions for e.g. the Guide index */



/* -------------- Jitsu Home Page ----------------------------- */

/* Logo on background */
body.jitsu_intro{
    background:#fff url(/jitsu/images/logo.png) 0 75px no-repeat;
}

/* style overrides for home page */
body.jitsu_intro #content{
    margin:0;
    margin-right:30px;
    margin-left:175px; /* oxton - this must be here NOT on the wrapper */
    _margin-left:100px; /* JM - ie6 hack */
    padding-top:120px; /*line it up with the Ninja's eye space*/
    width:360px;
    float:left;
}
body.jitsu_intro #wrapper{
    margin:0;
}
.jitsu_intro #content h3{
    margin-bottom:0;
}
.jitsu_intro #content h3+p{
    margin-top:0;
}

/* Early access message */
p.early_access{
    padding:0 10px 0 95px;
    background:transparent url(/jitsu/images/early_access.png) 0 20% no-repeat;
}

/* Download button */
p.download a{
    border:0;
}
p.download a img{
    border:0;
}

/* Tick List on home page */
ul.ticklist{
    margin:20px 0;
    padding:0;
    color:#333;
    font-size:13px;
    font-weight: bold;
    list-style: none;
}
ul.ticklist li{
    /* oxton - added !important fix for IE, would like to keep the hanging bullets for those browsers that can */
    margin:5px 0 5px -15px !important;
    margin:5px 0 5px 0;
    text-indent: 15px;
    background: transparent url(/jitsu/images/tick.png) 0 50% no-repeat;
}

/* ---- Sidebar on home page ---- */

.sidebar{
    width:200px;
    float:left;
    margin:0;
    padding-top:120px;
    font-size:11px;
    line-height: 160%;
    color:#663;
}
.sidebar h1{
    font-size:16px;
}
.sidebar h2{
    font-size:14px;
    margin:17px 0 7px 0;
    color:#663;
}
.sidebar #mainnav{
    border:0;
}
.sidebar #mainnav h1{
    display: none;
}
.sidebar #mainnav ul#navbar{
    margin:0;
    padding:0;
}
.sidebar #mainnav ul#navbar li{
    margin:0;
    _height:1px; /*nasty IE fix*/
    padding:0;
    border:0;
    display: block;
    float:none;
}
.sidebar #mainnav ul#navbar li a{
    border:0;
    margin:0;
    display: block;
    padding:2px;
}
.sidebar ul{
    margin:0;
    padding:0;
    list-style: none;
}
.sidebar ul li b{
    color:#333;
}
.sidebar p.download{
    margin:0 0 20px 0;
    padding:0;
}

/* -------------- Quick Tours ----------------------------- */

/* Title and subtitle */
#tour_title {       /* h1 - header for current tour */
    margin: 0; 
    padding: 0; 
    line-height: .8em; 
}
#tour_subtitle {    /* div - subtitle for current tour */
    color: gray; 
    margin: 0; 
    padding: 0;
    line-height: .8em;
    text-align: right;
    
}

/* Div containing the running tour app */
#tour_app_container {
    border: 1px solid gray; 
    margin: 0; 
    padding: 0;
}


/* Tab buttons above Source Code region of the quicktour */

#tour_source_tabs  {
	margin-bottom: 4px; 
	/* margin-top: 1em;  */
	padding: 0; 
	font-family: lucida grande, verdana, helvetica, arial, sans-serif; 
	font-family: Arial;
	font-size: 11px; 
	/* Work around IE layout problem with changing the height of IFrames
        on the fly */
	height: 25px;
}
#tour_source_tabs .tour_bold_tab 
{
    font-size: 14px;
}
#tour_source_tabs .tour_light_tab {
    font-weight: normal;
}

#tour_source_tabs a {
	margin: 0; 
	padding: 1px; 	
	text-decoration: none; 
	border-bottom: none;  
}

#tour_source_tabs a:visited {
    text-decoration: none; 
    border-bottom: none;
}
#tour_source_tabs a:hover {
    text-decoration: none;
    border-bottom: none; 
}
#tour_source_tabs .current {
	border-bottom: none;
	color: Black; 
}

/* Shows source code for current tour */
#tour_sourcecode_container {
    clear: both; 
	margin: 0; 
	background-color:  White;
	padding: .5em;
	width: 528px;
}

#tour_sourcecode
{
	overflow-x: auto;
	background-color: White;
}

/* used in popup.src.html to make a bordered box */
.graybox
{
    margin: 0px;
    padding: 0px;
    background: #eee; padding: .5em; border: 1px solid gray; 
    font-family: Verdana, sans;
}

.whitebox
{
    margin: 0px;
    padding: .5em; 
    border: 1px solid gray; 
    background-color: white;
}

.warmbox {
    margin: 0px;
    padding: .5em; 
    background: #F7E9C0; 
    border: 1px solid gray; 
}

.thinborder
{
	border: solid 1px gray;
}


/* used in code/output lists, e.g. binding_converters.src.html */

.examples div { 
    background: #ECF3F8; padding: .5em; border: 1px solid gray;
    font-family: courier, mono;
    font-size: small;
    white-space: pre;
}


.examples p {
    background: #eee; padding: .5em; border: 1px solid gray; 
    font-family: Verdana, sans;
}

/* used in output to tighten the title around a box */
.examples2 h3, .examples h3 {
    margin: 8px 0px 2px 0px;
    padding: 0px;
}

/* used in controls.src.html to make a bordered box */
.examples2 div {
    margin: 0px;
    padding: 0px;
    background: #F7E9C0; padding: .5em; border: 1px solid gray; 
    font-family: Verdana, sans;
}


/* Used for HTML Source Code */
.source_html {
	color: #aaa;
	list-style-type: none;
	white-space: nowrap;
	margin: 0; padding: 0;
}
.source_html li {
	margin: 0;
	font-family: "Courier New", "Courier";
	line-height: 17px;
	font-size: 14px;
}
.source_html code {
    color: black; 
}
.tour_markup
{
    line-height: 10px;
}

/* -------------- Glossary ----------------------------- */

/* Used in glossary for links to other docs */
.seealso {
	margin-left: 0;
	padding-left: 0;
	
}
.seealso li {
	margin: 0;
	margin-left: 1em;
	padding-left: 0;
	list-style-type: square;
}
.seealso span {
    color: #333;
}

/* -------------- Reference ----------------------------- */

/* General API fonts */
.ref p, .ref div {
	font-family: verdana, Sans-Serif;
	font-size: 11px;
}

/* Force a scrollbar on all ref pages - TODO: figure out a better way to do this. */
.ref_blankspace {
    height: 1000px; 
}

/* List of nested li's showing the subclass/superclass hierarchy */
.ref_classhier {
    margin-top: 0; padding-top: 0;
    margin-bottom: 0; padding-bottom: 0;
	list-style-type: square;
	font-size: 13px;
	line-height: 24px;
	font-family: Arial;
}
.ref_classhier li {
    margin-top: 0; padding-top: 0;
    margin-bottom: 0; padding-bottom: 0;
}

/* Two column table listing Name / Description pairs in the reference section */
.ref_table a {
	color: #44c;
}
.ref_table, .ref_table td, .ref_table p {
    font-family: arial;
    font-size: 12px;
    margin: 0;
    padding: 0;
}
.ref_table p {
    margin-bottom: .5em; 
}
.ref_table_head {
	background-color: #ccc;
	font-weight: bold;
}
.ref_table {
	font-size: 12px;
	border: 1px solid #aaa;
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 1em;
}
.ref_table tr {
    vertical-align:middle; 
}
.ref_table td {
	border: 1px solid #aaa;
	width: 49%;
	padding: .5em;
}

/* Member box - holds detailed description of a method / property */
.ref_member {
    margin-top: 20px;
	border: solid 1px #55a;
}
.ref_member h2 {        /* title bar of member box */
	background-color: #55a;
	color: white !important;
	font-size: 12px;
	padding: .2em 1em;
	margin: 0;
}
.ref_membercontent {    /* nested div inside a ref_member */
    margin: 0;
    padding: .3em;
}
.ref_membersummary {    /* inside ref_membercontent - shows summary */
	font-size: 14px !important;
	margin-bottom: 1em;
}
.ref_proto {            /* inside ref_membercontent - shows a prototype for a reference member */
	margin: .5em;
	padding: .5em;
	background-color: #eee;
	font-size: 12px;
}
.ref_protoheader {      /* inside ref_membercontent - the "JavaScript" or "Xml" header above a proto */
	margin: 0;
	padding: 0;
	line-height: normal;	
}

/* -------------- Table-of-Contents ----------------------------- */

/* Guide Contents */
.toc h2 {            /* remove margings before paras in tocs */
    margin: 0;
    margin-top: 2em;
    padding: 0;
}
.toc p {            /* remove margings before paras in tocs */
    margin: 0;
    padding: 0;
}

/* FAQ Contents */
.toc {
    padding-bottom: 1em;
}
.toc ul {
    list-style-type: none;
    margin: 0; padding: 0;
}
.toc li {
    margin: 0;
    padding-left: 2em;
}
.toc a {
    color: #333 !important;
    border-bottom: none !important;
}
.toc h3 {           /* h3 used in the TOC for group headers */
    color: #333;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0; padding: 0;
    margin-top: 1em;
}
h3.toc_group {       /* Used in the body for group headers */
    color: #888 !important;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0; padding: 0;
    margin-top: 1em;
    border-top: 1px solid #eee;
    margin-top: 3em;
    margin-bottom: 1em;
}

/* -------------- Footer ----------------------------- */

/* Standard styling for the footer */
#footer{
    margin-top: 50px;
    padding-left:185px;
    font: 11px/19px lucida grande, verdana, helvetica, arial, sans-serif;
    text-align:left;
    clear:both;
    margin-bottom:20px;
}
#footer img {
	border:0;
	vertical-align:middle;
}
.footerlogo {
	float: left;
	width:55px;
	display:block;
}
#footer a {
	text-decoration: none;
	font-weight: bold;
    border:0;
}
#footer p {
	padding: 8px 0 0 0;	
}

/* Vertical Centered Text */
/* From http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-en.html */

.vert1{
    display: table; _position: relative; overflow: hidden;
}
.vert2{
    _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;
}
.vert3{
    _position: relative; _top: -50%;
    color: Green !important;
}

/* Tab Controls */
.tab_button {
    float: left;
    width: 100px;
    background-color: #b7c297;
    margin:0;
    margin-left: 10px;
    text-align: center;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 15px;
    padding: 3px;
}
.tab_box {
    clear: left;
    height: 200px;
    font-size: 10px;
    background-color: #E9F7C0;
    padding: 3px;
    margin:0;
}
.tab_box img { padding: 3px;}
.tab_button.selected {
    background-color: #E9F7C0;
}
.tab_button a {
    color: #d0e0b8 !important;
}
.tab_button.selected a {
    color: black !important;
}

.list_box {
    border: 1px solid gray;
    width: 150px;
    margin: 1em 0;
}
.list_box a, .list_box a:hover {
	display: block;
    font-family: arial;
    font-size: 12px;
	color: black;
    margin: 0;
    padding: 0;
	font-weight: normal;
	line-height: 16px;
	text-decoration: none;
	border: none;
}
.list_box .selected {
    background-color: #316ac5 !important;
    color: white !important;
}
.list_thumb 
{
    float: left; 
    width: 140px; 
    height: 200px; 
    border: 1px solid gray;  
    padding: 5px;
    margin: 3px;
}
.list_thumb_title
{
    position: relative;
    left: 10px;
    top: -40px;
    color: white;
    font-family: Arial;
}

.dockpanel {
    position:relative; 
    width:400px;
    height:400px;
}

/* create a box with a border*/
.gradientbox { 
    border: 1px solid gray;
/* todo - this breaks IE6 when you change the 
carddeck 
    background: url(quicktours/images/gradient.gif) repeat-x 0px 0px; */

    margin: 0; 
    padding: 0; 
}

.todo {
    color: #888;
}

.bookmark_header 
{
    font: bold 18px/20px Lucida Grande, Helvetica, Arial, sans-serif; 
    margin-right: 1em;
    
}

/* for some reason in IE, having borders that change on links confuses RoundedPanel,
so we just turn them off... */
a.bookmark_link, a.bookmark_link:hover, a.bookmark_link:visited {
    border: 1px solid #E9F7C0;
}

.bookmark_normal {
}

.bookmark_editbtn {
    float: right;
}

.bookmark_edit {
    background: url(quicktours/images/gradient.gif) repeat-x 0px 0px; 
    padding: .5em;
}