@import url(https://fonts.googleapis.com/css?family=Play:700&subset=latin,latin-ext);

html
{
  background: url(/img/bg.gif) #2c2c5c;
  margin: 0;
  padding: 0;
  padding-left: 1em;
  padding-right: 1em;
  font-family: verdana, sans-serif;
}

#main
{
  margin:        0;
  padding:      0;
  /*background:      url(/images/header.jpg) no-repeat right top;*/
}

div.not-found-404 {
  font-size: 5em;
  text-align: center;
  font-family: Comic Sans, Comic Sans MS, cursive;
}

body
{
  margin: 0;
  margin-top: 1em;
  margin-bottom:  1em;        
  margin-right: auto;
  margin-left: auto;
  padding: 0 0 1.0em;
  background: url(/img/gradient.jpg) #3e3e75 no-repeat 0px 0px;
  border-right: 0.44em solid #2C2C5C;
  border-left: 0.44em solid #2C2C5C;
  border-bottom: 0.44em solid #2C2C5C;        
  max-width: 80em;
  min-width: 40.38em;
  width: auto !important;
  width: 40.38em;
}

table#grid {
  border-collapse:    collapse;
  width:        100%;
  font-size:      0.8em;        
}

table#grid tr td {
        width:                          50%;
        vertical-align: top;
  padding:      0.5em 0.5em;
}

table#grid td td {
  width: auto;
  padding: 0.25em;
  border-spacing: 0px;
  word-wrap: break-word;
}

table#grid td.full {
        width:                         100%;
}

table#grid td.quarter {
        width:                         25%;
}

table#grid td div.inner-window {

}

table#grid td div.inner-title {
        background-color: #16162C;
        background-image: url(/img/th_left.png), url(/img/th_right.png);
        background-position: left top, right bottom;
        background-repeat: no-repeat;
        color:                          #A7A7EA;
        padding-left:                   1em;
        padding-top:                    0.2em;
        padding-bottom:                 0.2em;
        font-weight: bold;
}

table#grid td div.inner-title a {
        text-decoration: none;
}

table#grid td div.inner-content {
        /*border: 1px solid #16162C;*/
        color: #B7B7F7;
        padding: 0.5em;
        text-align: justify;
}

table#grid td div.inner-content h1 { font-size: 1.8em; }
table#grid td div.inner-content h2 { font-size: 1.6em; }
table#grid td div.inner-content h3 { font-size: 1.4em; }
table#grid td div.inner-content h4 { font-size: 1.2em; }

ul {
   /*list-style-image: url(/img/dot.png);*/
   padding: 0;
   padding-left: 1.5em;
}

li {
  padding-top: 0.125em;
  padding-bottom: 0.125em;  
}

span.nb {
  font-weight: normal;
}

span.right {
  float: right;
  padding-right: 20px;
  font-weight: normal;
}

span.collaborative {
  color: #8787E7;
}

span.collaborative a {
  color: #8787E7;
}

span.dark {
  color: black;
}

span.white {
  color: white;
}

center#yt-eps {

}

#bottom-note {
  font-size: 0.85em;
}



/********* MISC ***********************************************************************/
img
{
  border:        0;
  /*margin:        0 1.56em;*/
}

img[align=left]
{
  margin-left:      0;
}

img[align=right]
{
  margin-right:      0;
}

a
{
  color:        white;
  text-decoration:    underline;
}

.a-no-deco a {
        color:                          #B7B7F7;
        text-decoration:                none;
}

a:hover
{
  color:        #FF8F0A;
}



table th, .dllhead
{
  font-size:      1.2em;
  padding-left:      0;
}

center.dllhead
{
  font-size:      1.7em;
}

.dllcolhead
{
  background:      #141334;
}




.a0, .dllnote0
{
  background:      #353268;    
}

.b0, .dllname0
{
  background:      #282554;
}

.a1, .dllnote1
{
  background:      #3e3b78;
}

.b1, .dllname1
{
  background:      #484585;
}


/********* END of MISC ********************************************************************/

#header
{
  background-color: #15152b;
  margin: 0px;
  padding: 0.5em;
  font-size: 10pt;
  color: #b7b7f7;
}

#header-bottom
{  
  background: url(/img/topbg.gif) repeat-x;
  height: 1.5em;
  text-align: center;
  margin: 0px;
  padding: 0px;
}

#logo
{
  position:      relative;
  top:        1em;
  /*left:        1.3em;*/
}

#header h1
{
  color: white;
  display: inline;
  margin-right: 1em;
  font-weight: normal;
  font-size: 14pt;
}

#header a
{
  color: white;
  display: inline;
  text-decoration: none;
  margin-right: 1em;
  margin-left: 1em;
}

#header h1 a
{
  margin: 0px;
  font-size: 15pt;
  font-family: 'Play', cursive;
}

#header div#login {
  margin-top: 0.5em;
}

#content
{
  margin-left: 1em;
  margin-right: 1em;
  font-size: 9pt;
  line-height: 12pt;
  color: #b7b7f7;
}

#comments
{
  margin-left:      4.0em;
  color:        #fff; /*#b7b7f7;*/
  font-size:      10pt;
}

#comments h2
{
  font-weight:      normal;
  font-size:      20pt;
  color:        #FFF; /*#16162c;*/
}

#comments .comment
{
  color:        #fff; /*#16162c;*/
  margin-bottom:      0.5em;
  padding:      1.5em;
}

#comments .comment .text
{
  color:        #b7b7f7;
  line-height:      14pt;
  padding-left:      1.6em;
}

.postcomments
{
  margin:        1.25em 0 1.88em 0;
  text-align:      right;
}


#comments table
{
  width:        80%;
}

#content input
{
  width:        100%;
}

#content input.checkbox {
  width: auto;
}



#comments textarea
{
  width:        100%;
  height:        15.63em;
}


#comments table td
{
  padding:      0.31em;
}

.commendata
{
  color:        black;
}

.title .inside
{
  background:       #16162c url(/img/title3.gif) no-repeat left bottom;
  margin-left:      3.19em;
}  

.title .inside2
{
  background:      url(/img/title2.gif) no-repeat right bottom;
  padding:      0.88em 2.19em 1.06em 1.50em;
}

.title
{
  background:      url(/img/title.gif) no-repeat;
}


.title h2
{
  font-size:      15pt;
  color:        white;
  display:       inline;
  font-weight:    normal;
}

.title .date
{
  font-size:      15pt;
  color:        #a7a7ea;
  display:       inline;
}

.title .tags
{
  color:        #a7a7ea;
  font-size:      9pt;
  margin-top:      0.38em;
}

.title h2 a
{
        text-decoration:                none;
}

.title h2 a:hover
{
        text-decoration:                underline;
        color:                          white;
}

#sidebar
{
  width:        13.13em;
  padding:      1.25em;
  float:        right;
}



#footer
{
  font-size:      7.5pt;
  color:        #B7B7F7;
}

.section h4{
  margin:        0.94em 0.63em 0.13em 0.63em;
}

.var
{
  color:        #d6d6d7;
}

.val
{
  color:        #e1cb95;
}

.super
{
  color:        #ff8f0a;
}
.clear
{
  clear:        both;
}

input, textarea
{
  background:      #8387d7;
  border:        #212152 1px solid;
  color:        #16162c;
  font-family:      verdana, sans-serif;
  font-size:       10.5pt;
  line-height:      12pt;
}

#content .button
{
  border: #212152 1px solid;  
  background: #16162c;
  color: #8387d7;
  padding: 0.31em;
  font-size: 9pt;
  width: 100%;
}

.button:hover
{
  color:        white;
}


.zebra0
{
        background:      #353268;
}

.zebra1
{
  background:      transparent;
}

q { font-style: italic; }


.my-color-1 {
  color: #FF8F0A;
}

.my-color-2 {
  color: #44ff22;
}

.my-color-3 {
  color: #ffff00;
}

.my-color-4 {
  /*color: white;*/
  font-family:                        Consolas, Andale Mono, monospace;
  /*background-color: #16162C;*/
  background: #2a2855;
  padding-left: 0.25em;
  padding-right: 0.25em;

  background-color: #2e2e57;
  /*background-color: #000;*/
  color: #46d378;

  line-height:            1.2em;
    font-weight: bold;
}

code {
/*    font-weight: bold;
    color : #46d378;
    background-color: #2e2e57;
    display:        block;
    font-size:        9.5pt;
    line-height:            1.2em;
    padding:        0.63em;
    border:        1px solid #56538c;*/
    font-family:                        Consolas, Andale Mono, monospace;
}

#header a.offline {
  color: red;
}

#content div.error {
  border: 1px solid #56538c;
  padding: 1.5em;
  margin: 0.25em;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  font-size: 0.90em;
  color: #46d378;
  background-color: #2e2e57;
  line-height: 1.25em;
}

#content div.error p {
  margin: 0.2em 0 0.2em 0;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

#content div.box-centered {
  width: 50%;
  border: 1px solid #56538c;
  padding: 1.5em;
  margin: 0.25em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  font-size: 0.90em;
  background-color: #2e2e57;
  line-height: 1.25em;
}

/*
#content h2 {
  margin-top: 0;
  margin-bottom: 0.5em;
}
  */

.flag-two-panels {
  width: 90%;
  margin: auto;
}

.flag-panel-right {
  width: 40%;
  margin-left: 55%;
}

.flag-panel-left {
  width: 40%;
  margin-left: 5%;  
  float: left;
}

/* I probably don't understand something since I have to use this hack. */
.flag-panel-left p:first-child {
  margin-top: 0;
}

.flag {
  width: 100%;
  border: 1px solid #56538c;
  color: #56538c;
  background-color: #2e2e57;
  text-align: center;
  margin: 0.125em;
  padding: 0.125em;
  font-family: 'Play', cursive;
  font-size: 1.1em;
}

.flag-found {
  border: 1px solid #46d378;  
  color: #46d378;
  /*color: #2e2e57;*/
}

.flag-info {
  font-size: 0.7em;
  font-family: verdana, sans-serif;
}

.flag-hof {
  margin: auto;
  width: 50%;
  margin-bottom: 3em;
  margin-top: 1em;
}

table.flag-hof-table {
  width: 100%;
  /*table-layout: fixed;*/
}

tr.flag-hof-entry {
  width: 100%;
}

td.flag-hof-place {
  margin: 0.25em;
  padding: 0.25em;
  border: 1px solid #56538c;
  text-align: center;
  background-color: #2e2e57;  
  width: 3em;
  max-width: 3em;    
}

div.flag-hof-place {
    width: 3em;
  max-width: 3em;  

}

td.flag-hof-name {
  margin: 0.25em;
  padding: 0.25em;
  border: 1px solid #56538c;
  width: 15em;
  text-align: center;
  background-color: #2e2e57;
}

td.flag-hof-flags {
  margin: 0.25em;
  padding: 0.25em;
  border: 1px solid #56538c;
  color: #46d378;

  text-align: center;
  font-family: 'Play', cursive;
  font-size: 1.1em;
  background-color: #2e2e57;  
}

.flag-entry-panel {
  margin: auto;
  width: 50%;
  margin-bottom: 3em;
  margin-top: 1em;  
}

.flag-entry-panel input {
  margin: 0.25em;
}

.myanimate.ng-enter {
  -webkit-transition:1.2s linear all;
  transition:1.2s linear all;
  opacity: 0;
}

.myanimate.ng-enter.ng-enter-active {
  opacity: 1;
}

div.bug_form {
  margin-left: 3em;
  margin-right: 3em; 
  margin-top: 1em;
  margin-bottom: 1em;
}

div.bug_form input[type="text"] {
  border:0;
  padding-left:0;
  padding-right:0;
}

div.bug_form textarea {
  display: block;
  width: 100%;
  border:0;
  padding-left:0;
  padding-right:0;
}

div.my_bugs {
  margin-left: 3em;
  margin-right: 3em; 
  margin-top: 1em;
  margin-bottom: 1em;  
}

div.my_bugs table {
  width: 100%;
}

div.my_bugs table td {
  margin: 0.25em;
  padding: 0.25em;
  border: 1px solid #56538c;
  text-align: center;
  background-color: #2e2e57;
}

div.my_bugs .bug-open {
  color: white;
}

div.my_bugs .bug-rejected {
}

.bug-gold {
  font-family: 'Play', cursive;
  font-size: 1.1em;
  color: #ffff00;
}

.bug-silver {
  font-family: 'Play', cursive;
  font-size: 1.1em;
  color: #cccccc;
}

.bug-bronze {
  font-family: 'Play', cursive;
  font-size: 1.1em;
  color: #eeaa00;
}

.bug-language {
  font-family: 'Play', cursive;
  font-size: 1.1em;
  color: #46d378;
}

div.erratum {
}

div.erratum h2 {
  margin-top: 1em;
}

/* 
 * Some equal height divs hack by Matthew James Taylor:
 * http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
 */
div.erratum .erratum-entry {
  clear: left;
  float: left;
  width: 100%;
  overflow: hidden;
  margin-bottom: 1em;

  border: 1px solid #2c2c5c;
  /*background: #353268;*/
  background: #3e3e75;
}

div.erratum .erratum-container {
  float: left;
  width: 100%;
  position: relative;
  right: 25%;
  background: #353268;  
}

div.erratum .erratum-left-panel {
  float: left;
  width: 75%;
  position: relative;
  left: 25%;
  overflow: hidden;
}

div.erratum .erratum-right-panel {
  float: left;
  width: 25%;
  position: relative;
  left: 25%;
  overflow: hidden;
}

div.erratum .erratum-inner {
  margin: 1.0em;
}

div.erratum .erratum-eid {
  font-size: 1.2em;
}

div.erratum .erratum-where {
  font-weight: bold;
}

div.erratum .erratum-bad {
  margin-left: 1em;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  white-space: pre-wrap;
}

div.erratum .erratum-good {
  margin-left: 1em;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  white-space: pre-wrap;
  color: #46d378;
}

div.erratum .erratum-explained {
}

div.erratum .erratum-thanks {
}

div.erratum .erratum-date {
}

.erratum-details-id {
  color: #46d378;
}

.erratum-details-state {
  color: #46d378;
}

.erratum-details-reporter_name {
  color: #46d378;
}

.erratum-details-initial_bad_sentence {
  color: #46d378;
  white-space: pre-wrap;  
}

.erratum-details-initial_good_sentence {
  color: #46d378;
  white-space: pre-wrap;
}

.erratum-details-where {
  color: #46d378;
}

.erratum-details h2 {
  margin-top: 1.0em;
  margin-bottom: 0.5em;  
}

div.erratum-details-comment {
  padding: 0.25em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;  
}

div.erratum-details-comment-top {
  padding: 0.25em;
  background-color: #2c2c5c;
}

div.erratum-details-comment-name span {
  color: #46d378;
  font-weight: bold;
}

div.erratum-details-comment-date span {
  color: #46d378;
}

div.erratum-details-comment-text {
  padding: 0.75em;
  padding-top: 0.75em;
  padding-bottom: 0.75em;  
  color: #46d378;
  background-color: #353268;
  white-space: pre-wrap;
}

.erratum-details-comment-form {
  margin: 0.25em;
}

.erratum-details-comment-form textarea {
  display: block; 
  width: 100%;
  height: 20em;
  border: 0;
  padding-left:0;
  padding-right:0;
  
}