html { overflow: -moz-scrollbars-vertical; }
img  { border: none; }
span { padding:0; margin:0; }
p    { padding: 0; margin: 0 0 10px 0;}
a    { text-decoration: underline; color: #1c74ec; }
a:hover { background: #eee; }
hr { background: #bbb; height: 1px; border: none; }

body {
font-family:       "segoe ui", geneva, verdana, trebuchet, arial, sans-serif;
font-size:         14px;
background-color:  #f0f1f3;
background-repeat: repeat-x;
background-image:  url(/dev/circos/gfx/background-strip.jpg);
margin:  0;
padding: 0;
}

.separator {
border-left: 1px dotted #fff;
margin: 0 !important;
}

#frame {
position: relative;
width:    1000px;
margin:   0 auto;
padding:  0px;
}

#logo {
position:      relative;
left:          50px;
top:           0px;           
}

#logo a       { text-decoration : none; color: #000; }
#logo a:hover { background: none }

#menu0 {
position:    absolute;
left:        150px;
top:         40px;
}

#menu0 a,#menu0 span { 
font-family: arial, sans-serif;
background: inherit;
font-size: 12px;
text-transform: uppercase;
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 5px 6px;
margin: 0 2px 0 0;
padding-bottom: 5px;
letter-spacing: 0.035em;
}
/*#menu0 a:hover { background: #d0d1d4; color: #ec1c24; }*/
#menu0 .active { background: #d0d1d4; color: #2e3035; }

#menu1 {
position: absolute;
top: 68px;
left: 150px;
}

#menu1 a,#menu1 span  { 
font-family: arial, sans-serif;
background:  inherit;
font-size:   12px;
color:       #2e3035;
padding:     5px 10px 2px 10px;
margin:      0 0px 0;
text-decoration: none;
}

#menu1 a:hover {
/*color: ;
background: #ccc;*/
}

#menu1 .active {
background-image:    url(/dev/circos/gfx/redtick-transparent.png);
background-repeat:   no-repeat;
background-position: 50% 24px;
padding-bottom:      12px;
}

#menu2 {
font-family:  arial, sans-serif;
position:     relative;
background:   #2e3035;
bottom:       0px;
font-size:    11px;
padding:      5px 0 5px 10px;
color:        #fff;
left:         0px;
clear:        both;
border-top:   2px solid #ec1c24;
}

#menu2 a,#menu2 span  { 
background:      inherit;
color:           #fff;
text-decoration: none;
padding:         5px;
margin-right:    5px;
}

#menu2 span.active {
background: #ec1c24;
background-image:    url(/dev/circos/gfx/redtick-white.png);
background-repeat:   no-repeat;
background-position: 50% 24px;
padding-bottom:      13px;
}
#menu2 * img.home { margin: -5px 0 -6px !important; background: inherit !important; }

#menu3 {
font-family: arial, sans-serif;
background:    #666;
color:         #fff;
padding:       5px 0 5px 10px;
margin-bottom: 0px;
font-size:     12px;
}

#menu3 a,#menu3 span           { text-decoration: none; color: #fff; margin: 0 0px; padding: 3px 5px 5px; }
#menu3 a:hover, #menu3 .active { 
background: #fff; color: #000; 
}

#menu4 {
background:    inherit;
border-bottom: 1px solid #666; 
color:       #000;
padding:     2px;
margin:      0;
font-size: 12px;
/*font-weight: bold;*/
}

#menu4 a,#menu4 span   { text-decoration: none; color: #666; margin: 0 10px; padding: 0 10px 2px; border: 1px solid #666;}
#menu4 a:hover  { background: ; color: #000; }
#menu4 .active  { color: #000; border-bottom: 1px solid #fff; }

#crumbs {
font-family: verdana, arial, sans-serif;
font-size: 10px;
color: #797b80;
padding: 10px 0 6px 0;
}

#crumbs a       { color: #797b80; text-decoration: none; font-weight: bold; background: inherit; }
#crumbs a:hover { color: #797b80; text-decoration: underline; background: inherit; }

#page-container {
margin-top: 0px;
border:     1px solid #797b80;
background: #fff;
}

#page-masthead-container {
position:   relative;
background: #000;
max-height: 350px;
height: 350px;
padding: 0;
margin: 0;
}

#page-masthead-menu-bg {
position:   absolute;
bottom:     10px;
right:      8px;
width:      400px;
background: #000;
height:     20px;
opacity:    0.5;
filter:alpha(opacity=50);
z-index:    15;
}

#page-masthead-menu {
position:   absolute;
bottom:     12px;
right:      8px;
width:      400px;
font-size:  12px;
text-align: center;
background: #000
color:      #fff;
z-index:    20;
padding:    0;
margin:     0;
}

#page-masthead-menu a {
font-family: arial, sans-serif;
text-decoration: none;
color: #eee;
padding: 3px 5px;
}

.mh-menu {
color: #eee;
padding: 0 5px;
}

#mh-prev-small, #mh-next-small {
height: 20px;
}

.mh-highlight {
background: #797b80;
}

.page-masthead {
position: absolute;
top:  0;
left: 0;
background-image:  url(/circos/dev/gfx/page-strip.jpg);
background-repeat: repeat-x;
background-color:  #f0f1f3;
z-index:           0;
overflow:          hidden;
max-height:        350px;
width: 100%;
}

.page-masthead a {
color: #ccc;
}

.page-masthead .menu {
position: absolute;
padding: 10px;
bottom: 30px;
}
.page-masthead .menu a {
font-weight: bold;
text-decoration: none;
color: #fff;
border: 1px solid #aaa;
padding: 3px 5px;
margin-left: 5px;
}

.page-masthead blockquote {
position: relative;
float:    right;
width:    400px;
height:   330px;
padding:  0;
margin:   9px 8px 0 0;
}

.page-masthead blockquote .background {
position:   absolute;
width:      100%;
height:     100%;
background: #000;
opacity:    0.7;
filter:alpha(opacity=70);
}

.page-masthead blockquote .copy {
position: relative;
opacity:  1.0;
filter:   alpha(opacity=100);
color:    #fff;
margin:   15px;
}
.page-masthead blockquote .copy h1 {
font-size: 16px;
padding:   0;
margin:    5px 0;
}
.page-masthead blockquote .copy * a:hover {
background: #797b80;
}
.page-masthead blockquote .copy * a {
color: #88baff;
}

.page-masthead > .image {
position:     relative;
float:        left;
margin-right: -1000px;
z-index:      -5;
}

.page-masthead > .copy {
padding: 15px;
}

.page-masthead > .copy h1 {
text-size: 18px;
padding: 0;
margin: 5px 0;
}

#page-copy {
padding: 0px 15px 15px 15px;
margin-top: 15px;
background: #fff;
}

#page-copy h1 {
padding: 0;
color: #000;
font-size: 18px;
clear: both;
margin: 15px 0 5px 0;
}

#page-copy h2 {
color: #666;
text-transform: uppercase;
font-weight: bold;
font-size: 13px;
margin: 5px 0 5px 0;
clear: both;
}

#page-copy h3 {
color: #ec1c24;
padding: 0;
margin: 10px 0;
font-size: 13px;
}

#page-copy blockquote {
float: right;
width: 400px;
background: #eee;
padding: 10px;
margin: 0 -15px 0 15px;
font-size: 12px;
}

#page-copy blockquote h1 {
color: black;
text-transform: uppercase;
font-size: 12px;
margin: 0 -10px 0 -13px;
border-bottom: 1px solid #ec1c24;
}

#page-copy blockquote p {
padding: 0;
margin-bottom: 0.15em;
}

#page-copy-footer {
clear:both;
}

#footer {
text-align: center;
font-size: 11px;
}

td {
vertical-align: top;
width: 200px;
}

.annot {
text-align: right;
font-size: 10px;
color: #ccc;
}

#news {

}

#news .item {
position: relative;
margin-bottom: 30px;
}

#news .item .date {
display: inline;
font-weight: bold;
}

#news .item .content {

}

#news .item .categories {
padding-left: 25px;
border-top: 1px solid #000;
}

#news .item .categories .category {
display: inline;
padding: 0 10px;
}

#news .summary {
font-style: italic;
margin-bottom: 20px;
}

.debug {
color: red;
border-left: 2px solid red;
padding: 10px;
font-size: 10px;
line-height: 8px;
}

#debug {
position: absolute;
top: 0;
right: 0;
background: #000;
color: #fff;
padding: 0;
width: 600px;
font-size: 10px;
}

#tutorial-images {
}

#tutorial-images > h1 {
clear:both;
}

#tutorial-images span.tutorial-image {
float: left;
}

#tutorial-images div.box {
background:#ccc;
text-align: center;
display: table-cell;
vertical-align: middle;
margin: 0;
padding: 0;
border: none;
}

#tutorial-images div.caption {
height: 5em;
text-align: center;
font-size: 11px;
}

.copy-image-container {
position: relative;
margin:   5px;
border:   1px solid #f0f0f0;
background: #fff;
}

.strip {
clear: both;
}

.strip .copy-image-container {
padding: 0;
margin: 0 -15px;
border: 2px #ec1c24;
border-style: solid none solid none;
}

.copy-image {
position:   relative;
border:     none;
}

.copy-image img {
position: absolute;
/*margin:   auto;*/
padding:  0;
}

.errorbox {
width: 300px;
height: 300px;
text-align: center;
color: red;
}

.ne { top: 0; right: 0; }
.se { bottom: 0; right: 0; }
.nw { top: 0; left: 0; }
.sw { bottom: 0; left: 0; }
.n  { top: 0; left: 0; right: 0 }
.e  { top: 0; bottom: 0; right: 0 }
.s  { bottom: 0; left: 0; right: 0 }
.w  { top: 0; bottom: 0; left: 0 }
.center { top: 0; bottom: 0; left: 0; right: 0 }

.copy-image-container .caption {
border-top: 2px solid #ccc;
background: #f0f0f0;
text-align: left;
font-size:  12px;
padding:    5px;
margin:     10px 0 0 0;
}

.sample-image {
float: left;
padding: 5px;
/*border-bottom: 1px solid #ccc;*/
}

.floatright {
background: inherit;
float:right;
margin: 0 -15px 0 0; /*10px 0 10px 10px;*/
padding: 10px 0 10px 10px;
/*border: 1px solid #797b80;*/
}

.floatleft {
background: inherit;
float:left;
margin: 10px 0 10px 10px;
}

/* reference */

div.ref_citation {
border-bottom: 1px solid #ccc;
padding: 0.5em 0 0.5em 2.0em;
}
.ref_citation_brief {
display: inline !important;
}

.ref_citation_brief .ref_id {
display: none;
}

span.ref_id {
font-size: 90%;
width: 2em;
text-align: right;
position: absolute;
left: 0.5em;
font-weight: bold;
}

span.ref_author {}

span.ref_title {
display: block;
}
.ref_citation_brief .ref_title {
display: inline;
}

span.ref_year {
font-size: 70%;
position: absolute;
left: 1em;
padding: 0 0.1em;
margin-top: 2em;
font-weight: bold;
background: #999; /*#da1111;*/
color: #fff;
}
.ref_citation_brief .ref_year {
font-size:100%;
position: static;
background: inherit;
color: inherit;
}

span.ref_title {
color: #da1111;
}
span.ref_volume {
font-weight: bold;
}

span.ref_journal {
font-style: italic;
}

span.ref_etal {
font-style: italic;
}

ul {
list-style-position: inside;
margin:0;
padding:0;
text-indent: 0.5em;
margin-left: 0.5em;
}

li {
text-indent: 0;
}

div.spacer {
clear: both;
}

.inset {
padding: 0 2em;
font-size: 13px;
}

.small {
font-size: 80%;
}

.upcase {
text-transform: uppercase;
}

code {
font-family: "courier new", courier, monospace;
color: #3d3d40;
}

.indent {
padding-left: 2em;
}

.comment {
color: #4e71cb;
}

.inlinead {
border: 1px #ec1c24;
border-style: solid none solid none;
}

table,td,tr,th {
padding: 0;
margin: 0;
vertical-align: middle;
font-size: 13px;
}

table {
padding: 20px;
}
td {
padding: 3px;
}
tr {
padding: 5px;
}
th {
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ccc;
text-transform: uppercase;
margin: 10px 0px;
}

.centertext {
text-align: center;
}

.pointer {
cursor: pointer;
}