/*

navy: #1D2F68
light blue: #476EB1
yellow: #F9DD55

ITC Garamond Light Condensed
Helvetica Neue Bold
Helvetica Neue Medium Condensed
Helvetica Neue Regular

*/

/* Browser 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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* remember to define focus styles! */

:focus {
	outline: 0;
}

ol,ul {
	list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */

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

caption,th,td {
	text-align: left;
	font-weight: normal;
}

blockquote:before,blockquote:after,
q:before,q:after {
	content: "";
}

blockquote,q {
	quotes: "" "";
}

a img {
	border: none;
}

/* Style below here */

body {
	margin: auto 2em;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	min-width: 960px;
	color: #3f3f3f;
	background: #dad0b6 url(../img/all_background.gif);
}

div#wrapper {
	background: #FFFFFF;
	padding: 4px;
	margin: 10px 0;
	border: 1px solid #000;
	_height:1%;
	_margin-left:-12px; 
	_margin-right:-12px;
}

/* Header */

div#header {
	margin: 2px 0 1em 0;
	background-color: #FFFFFF;
}

#header-ad {
	float: right;
	width: 340px;
	margin: 2px;
}

div#logo {
	width: 450px;
	float: left;
}

div#logo img {
	//margin-top: 15px;
	margin-left: 15px;
}

/* Nav Bar */

div#nav-bar {
	width: 100%;
	clear: both;
}

div#main-nav {
	text-align: center;
}

div#main-nav a {
	text-decoration: none;
	padding: 5px;
}

div#main-nav a.on {
	color: #af2d00;
}

div#main-nav a, div#sub-nav a {
	color: #3f3f3f;
}

div#main-nav a:hover, div#sub-nav a:hover {
	text-decoration: underline;
}

div#sub-nav {
	text-align: center;
	padding: 10px 0;
	font-size: 13px;
}

div#sub-nav a {
	text-decoration: none;
	margin: 0 8px;
}

/* Left Column */

div#left-column {
	background: #FFFFFF;
	margin: 0 1em 1em 0;
	padding: 0.5em;
	width: 200px;
	float: left;
	border-right: 1px dotted #CCCCCC;
}

#left-column div.left-column-links ul li a {
	text-decoration: none;
}

div#mf-links {
	margin: 1em 0;
}

#mf-links h3, #left-column-title h2 {
	color: #1D2F68;
	margin: 0.5em 0;
}

#mf-links ul, #left-column div.left-column-links ul {
	margin-left: 10px;
	font-size: 0.8em;
}

#mf-links ul li, #left-column div.left-column-links ul li {
	margin: 0.5em 0;
}

#mf-links h4 {
	margin: 1em 0;
	color: #3f3f3f;
}

.left-column-ad {
	text-align: center;
}

.left-column-ad img {
	margin: 1em 0.5em;
}

/* Main Content */

div#content {
	margin: 0 0 1em 230px;
	padding: 0.5em 0.5em 0.5em 1em;
	background: #FFFFFF;
}

div#callout {
	width: 250px;
	background: #e6e6e6;
	margin: 0.7em 0 0.7em 0.7em;
	padding: 0.5em;
	float: right;
	line-height: 1.5em;
}

#callout a, #callout a:visited {
	text-decoration: none;
	font-size: 0.9em;
	margin-left: 15px;
	color: #1D2F68;
	padding: 2px;
}

#callout a:hover {
	border-bottom: 1px dotted #999999;
}

#page-content {
	position: relative; /* peekaboo bug fix for IE6 */
	min-width: 0; /* peekaboo bug fix for IE7 */
}

#page-content h1 {
	color: #1D2F68;
	font-size: 24px;
	margin-bottom: 15px;
}

#page-content h3 a, #page-content h3 a:visited {
	font-size: 12px;
	color: #af2d00;
}

#page-content h3 a:hover {
	color: #1D2F68;
}

#page-content p {
	line-height: 1.4em;
	margin: 1em 0;
}

#page-content p {
	display: block;
	margin: 1em auto;
}

#page-content ol {
	line-height: 1.4em;
	margin: 1.3em;
	list-style-position: outside;
	list-style-type: decimal;
}

#page-content ul {
	line-height: 1.5em;
	margin: 1.5em;
	list-style-position: outside;
	list-style-type: disc;
}



p.notes {
	font-size: 0.8em;
	padding: 1em;
}

#page-content p em {
	font-style: italic;
}

#page-content p strong {
	font-weight: bold;
}

div#column-left {
	width: 45%;
	float: left;
	border-right: 1px solid #CCCCCC;
	padding-right: 10px;
}

div#column-right {
	width: 45%;
	float: left;
	padding-left: 10px;
}

#form form ol li span.required {
	font-weight: bold;
	margin-right: 0.4em;
	color: #941c26;
	font-size: 1.1em;
}

#form form ol li img {
	margin: 1em 5em;
}

#form form ol li {
	margin-left: 5em;
}

#form form ol li label {
	display: inline-block;
	line-height: 1.8;
	vertical-align: top;
	width: 140px;
}

#form form ol li {
	list-style-type: none;
	padding: 5px;
	margin: 0;
}

#form form ol {
	margin: 0;
	padding: 1em;
	background-color: #f0f9e5;
	width: 600px;
}

#form form ol li h4 {
	margin: 0;
}

#form form ol li p {
	margin: -25px 10px 20px 140px;
	padding: 4px;
	background: #FFF;
}

input#puzzle-title, input#puzzle-answer {
	width: 283px;
	height: 20px;
}

#answerCheck ul {
	list-style-position:inside;
	list-style-type:disc;
}

/* Footer */

div#footer {
	background: #FFFFFF;
	padding: 0.5em;
	clear: both;
	text-align: center;
	margin-bottom: 1em;
	border-top: 1px dotted #ccc;
}

div.misc-footer-links a {
	text-decoration: none;
	margin: 1em;
	font-size: 0.9em;
}

div.copyright {
	margin: 0.6em;
	font-size: 0.8em;
}

/* Queue */

#page-content table {
	margin: 0em;
	border: 0px solid #bfbfbf;
	padding: 0px;
	overflow: hidden;
}

#queue th {
	background: #ECF1EF;
}

#queue td {
	font-size: 12px;
	padding: 3px;
	vertical-align: middle;
	border-left: 1px solid #e0e5e3;
	border-right: 1px solid #e0e5e3;
}

#queue tr.even td {
	background: #fff;
}

#queue tr.odd  td {
	background: #FBF5E6;
}

#queue th.sorted a, #queue th.sortable a {
	text-align: left;
	text-decoration: none;
	font-size: 14px;
	color: #1D2F68;
}

#queue tbody tr th.sortable {
	border-bottom: 1px dotted #bfbfbf;
	vertical-align: middle;
	border-left: 1px solid #e0e5e3;
	border-right: 1px solid #e0e5e3;
	padding: 3px;
	text-align: left;
	text-decoration: none;
	font-size: 14px;
	color: #1D2F68;
}

#queue th.sortable a {
	background-image: url(/products/img/arrow_off.png);
}

#queue th.order1 a {
	background-image: url(/products/img/arrow_up.png);
}
/* Print Style */

div.for-print {
	display: none;
}

/* Admin Styles */

#admin {
	font-size: 14px;
	color: #3f3f3f;
}

#admin form#command {
	margin: 1em;
}

#admin h3 {
	margin: 1em;
	font-weight: bold;
}

#admin span.pagebanner, #admin p {
	margin: 1em;
	color: #1D2F68;
}

#admin table {
	margin: 1em;
	border: 1px solid #bfbfbf;
	padding: 4px;
	overflow: hidden;
}

#admin th {
	background: #ECF1EF;
}

#admin td {
	font-size: 12px;
	padding: 3px;
	vertical-align: middle;
	border-left: 1px solid #e0e5e3;
	border-right: 1px solid #e0e5e3;
}

#admin tr.even td {
	background: #fff;
}

#admin tr.odd  td {
	background: #FBF5E6;
}

#admin th.sorted a, #admin th.sortable a {
	text-align: left;
	text-decoration: none;
	font-size: 14px;
	color: #1D2F68;
}

#admin th.sortable {
	border-bottom: 1px dotted #bfbfbf;
	vertical-align: middle;
	border-left: 1px solid #e0e5e3;
	border-right: 1px solid #e0e5e3;
	padding: 3px;
}

#admin th.sortable a {
	background-image: url(/products/img/arrow_off.png);
}

#admin th.order1 a {
	background-image: url(/products/img/arrow_up.png);
}

#admin th.order2 a {
	background-image: url(/products/img/arrow_down.png);
}

.error {
    	color: red;
}

.debug {
	display: none !important;
	/* background-color: pink; */
}

label {
  color: black;
}

dt { 
  font-weight: bold 
}

h1 {
	color: #1D2F68;
	font-size: 24px;
	margin-bottom: 15px;
}

h2 {
	color: #1D2F68;
	font-size: 20px;
	margin-bottom: 10px;
}

h3 {
	color:#1D2F68;
	font-size:16px;
	margin-bottom:6px;
}

.meta {
	font-size: x-small;
}

.action {
	font-size: smaller;
}

.notice {
	border: 1px dashed blue;
	border-left: 10px solid blue; 
	background: #FFFF99; 
	padding: 5px; 
	margin: 5px;
}

.notice > em {
	display: block;
	font-weight: bold;
}

textarea {
  width: 600px;
  height: 100px;
}

/* blueLinkBox is used to display support materials and action links for 
puzzles in a few places. It wraps a list into two columns and floats the 
whole box to the right.  */
div.blueLinkBox {
	float:right;
    font-size: 0.75em;
    margin-left: 5px;
    padding:5px;
    background-color: #D3E4F2; /* blue like the wrapper tabs */
}

.blueLinkBox ul, .blueLinkBox ol {
    width:420px;
    _width:400px;
    margin:0px !important;
}

.blueLinkBox li {
    list-style-type: none;
    line-height:1.5em;
    width:205px; /* wide enough for the widest item in the list */
    _width:195px;
    float: left;
}

div.blueLinkBox ul li a {
	display:block;
    width:205px; /* wide enough for the widest item in the list */
    _width:195px;
    text-decoration: none !important;
    margin-left: 5px;
}

td.blueLinkBox {
	width:20%; /* this is intentionally too small for the blue box so that it will stay on the right of a two column table (the puzzle title is generally on the left)*/
}

/* Rebasing the css style for things that we want to isolate from the site's css (i.e. puzzle text) */
.isolated  blockquote, .isolated dd, .isolated div, .isolated dl, .isolated dt, .isolated h1, .isolated h2, .isolated h3, .isolated h4, .isolated h5, .isolated h6, .isolated ol, .isolated p, .isolated ul, .isolated center, .isolated hr, .isolated pre   { display: block }
.isolated li              { display: list-item }
.isolated head            { display: none }
.isolated table           { display: table }
.isolated tr              { display: table-row }
.isolated thead           { display: table-header-group }
.isolated tbody           { display: table-row-group }
.isolated tfoot           { display: table-footer-group }
.isolated col             { display: table-column }
.isolated colgroup        { display: table-column-group }
.isolated td, .isolated th          { display: table-cell; font-family: "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif; font-size: 100%; color: #3f3f3f; padding: 0px !important;}
.isolated caption         { display: table-caption }
.isolated th              { font-weight: bolder; text-align: center }
.isolated caption         { text-align: center }
.isolated body            { margin: 8px }
.isolated h1              { font-size: 2em; margin: .67em 0 }
.isolated h2              { font-size: 1.5em; margin: .75em 0 }
.isolated h3              { font-size: 1.17em; margin: .83em 0 }
.isolated h4, .isolated p, .isolated blockquote, .isolated ul, .isolated fieldset, .isolated form, .isolated ol, .isolated dl, .isolated dir, .isolated menu            { margin: 1.12em 0 }
.isolated h5              { font-size: .83em; margin: 1.5em 0 }
.isolated h6              { font-size: .75em; margin: 1.67em 0 }
.isolated h1, .isolated h2, .isolated h3, .isolated h4, .isolated h5, .isolated h6, .isolated b, .isolated strong          { font-weight: bolder }
.isolated blockquote      { margin-left: 40px; margin-right: 40px }
.isolated i, .isolated cite, .isolated em, .isolated var, .isolated address    { font-style: italic }
.isolated pre, .isolated tt, .isolated code, .isolated kbd, .isolated samp       { font-family: monospace }
.isolated pre             { white-space: pre }
.isolated button, .isolated textarea, .isolated input, .isolated select   { display: inline-block }
.isolated big             { font-size: 1.17em }
.isolated small, .isolated sub, .isolated sup { font-size: .83em }
.isolated sub             { vertical-align: sub }
.isolated sup             { vertical-align: super }
.isolated table           { border-spacing: 2px; }
.isolated thead, .isolated tbody, .isolated tfoot           { vertical-align: middle }
.isolated s, .isolated strike, .isolated del  { text-decoration: line-through }
.isolated hr              { border: 1px inset }
.isolated ol, .isolated ul, .isolated dir, .isolated menu, .isolated dd        { margin-left: 40px }
.isolated ol              { list-style-type: decimal }
.isolated ol ul, .isolated ul ol, .isolated ul ul, .isolated ol ol    { margin-top: 0; margin-bottom: 0 }
.isolated ul 			  {list-style-type:disc;}
.isolated li              {list-style-position:outside;margin-left:1em;}
.isolated u, .isolated ins          { text-decoration: underline }
.isolated br:before       { content: "\A"; white-space: pre-line }
.isolated center          { text-align: center }

.greyedOut {color:#999999;}

/* This fixes the pre problems in IE */
pre {
_width: 600px;
overflow-x: auto;
padding-bottom: 20px;
white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
}