/*---------------------------------
	IMPORTS
-----------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Arimo:400,700);

/*---------------------------------
	OVERRIDES
-----------------------------------*/
h1,h2,h3,h4,h5,h6{
    font-family: "Arimo", arial, verdana, sans-serif;
    font-weight:normal;
}

h1,h2 {
    font-size: 2.0em;
}

h3 {
    font-size:1.6em;
    margin-top:30px;
}

thead th,
tbody th{
    font-family: "Arimo", arial, verdana, sans-serif;
}

button,
a.btn,
a.button,
input[type="submit"],
input[type="reset"],
input[type="button"]{
    font-family: "Arimo", arial, verdana, sans-serif;
    font-weight:normal;
    border-radius: 2px;
}

button.disabled {
    cursor:pointer;
}

input[type="submit"].button.disabled {
    cursor:default;
}

.menu{
    font-family: "Arimo", arial, verdana, sans-serif;
}

blockquote{
    font-family: "Arimo", arial, verdana, sans-serif;
}

code {
    border:0;
    padding:0;
    font-size:1.0em;
}


.menu li.current>a, .menu li.current>a:hover, .menu li.current.hover>a {
    background: #8B8B8B;
    background-image: -ms-linear-gradient(bottom right, #AEAEAE 0%, #8B8B8B 100%);
    background-image: -moz-linear-gradient(bottom right, #AEAEAE 0%, #8B8B8B 100%);
    background-image: -o-linear-gradient(bottom right, #AEAEAE 0%, #8B8B8B 100%);
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #AEAEAE), color-stop(1, #8B8B8B));
    background-image: -webkit-linear-gradient(bottom right, #AEAEAE 0%, #8B8B8B 100%);
    background-image: linear-gradient(to top left, #AEAEAE 0%, #8B8B8B 100%);
}

input {
    -moz-box-shadow:inset 0 0 6px #ddd;
    -webkit-box-shadow:inset 0 0px 6px #ddd;
    box-shadow:inset 0 0px 6px #ddd;
}

input[type="text"].error {
    background-color:pink;
    color:#AA1400;
}

input[type="text"].error:focus {
    border: 1px solid red;
}

input[type="text"]:focus,
textarea:focus,
button:focus,
a.button:focus,
select:focus,
input[type="file"]:focus,
input[type="password"]:focus{
    -webkit-box-shadow: 0 0 7px #B2E624;
    -moz-box-shadow   : 0 0 7px #B2E624;
    box-shadow        : 0 0 7px #B2E624;
    border: 1px solid #87BD00;
    outline: none;
}

button, a.button, input {
    border-radius: 2px;
}

a, .review_link, .toggle_basic, .toggle_advanced {
    color:#2165C1;
    text-decoration:none;
    cursor:pointer;
}

a:hover, a:active, .review_link:hover, .toggle_basic:hover, .toggle_advanced:hover {
    color:#1D7DFF;
}

fieldset, legend {
    text-align:left;
    border-radius:2px;
    background-color:#F5F5F5;
}

fieldset {
    min-height:115px;
}

fieldset.col_6, fieldset.col_12 {
    margin-top:1.5em;
}

input[type="radio"] {
    background-color:transparent;
    box-shadow:none;
    border:0;
    margin-bottom:3px;
    margin-top:3px;
}

input[type="text"] {
    margin-top:15px;
}

fieldset {
    background-image: linear-gradient(to bottom right, #FFFFFF 0%, #F5F5F5 100%);
    border:1px solid #D9D9D9;
}

legend {
    background-color:#FFFFFF;
    border:1px solid #D9D9D9;
}

.icon-remove {
    font-size:1.2em;
    font-weight: bold;
    display:block;
    padding-right:2px;
}

.notice {
    max-width:900px;
    padding-right:40px;
    margin:10px auto;
}

.notice.error {
    border: 1px solid #AA1400;
    color: #AA1400;
}

.notice.success {
    background:#C2D983;
}

ul.icons {
    list-style-type: none;
    margin-left:15px;
}


#tiptip_content a {
    color:#B8E53F;
}

#tiptip_content p {
    margin: 3px 0;
}

ul.tabs li.current a {
    background:#FAFAFA;
}

.tab-content {
    background:#FAFAFA;
    background-image: linear-gradient(to bottom right, #FAFAFA 0%, #F5F5F5 100%);
    min-height:300px;
}
     

/*---------------------------------
	LAYOUT
-----------------------------------*/

body {
    font-family: "Arimo", arial, verdana, sans-serif;
    font-size:0.8em;
    color:black;
    margin:0;
    padding:0;
    background-image:url('/graphics/bg.jpg');
    background-repeat:no-repeat;
    background-position: 0% -80%;
    background-attachment: fixed;
}

body:after{ /* Preload loading gif */
    display:none;
    content:url('/graphics/ajax-loader.gif');
}

div.grid {
    width:97%;
    margin:0 auto;
    padding:0;
}

#footer {
    background-color:#263D5C;
    background-image: -ms-radial-gradient(left bottom, circle farthest-corner, #476793 10%, #263D5C 50%);
    background-image: -moz-radial-gradient(left bottom, circle farthest-corner, #476793 10%, #263D5C 50%);
    background-image: -o-radial-gradient(left bottom, circle farthest-corner, #476793 10%, #263D5C 50%);
    background-image: -webkit-gradient(radial, left bottom, 0, left bottom, 1012, color-stop(0, #476793), color-stop(1, #263D5C));
    background-image: -webkit-radial-gradient(left bottom, circle farthest-corner, #476793 10%, #263D5C 50%);
    background-image: radial-gradient(circle farthest-corner at left bottom, #476793 10%, #263D5C 50%);
    min-height:60px; 
    padding:0;
    margin-top:40px;
    margin-bottom:0;
    overflow:auto;
    border-radius:2px;
}

#footer a {
    text-shadow:0px 1px 2px #263D5C;
}

#splash {
    background-color:#263D5C;
    min-height:150px; 
    margin-top:0;
    margin-bottom:0;
    padding:0;
}

#splash_logo {
    position:relative;  
    z-index:12;
    margin:0;
    min-height:150px; 
    background-image: -ms-radial-gradient(center top, circle closest-corner, #476793 0%, #263D5C 80%);
    background-image: -moz-radial-gradient(center top, circle closest-corner, #476793 0%, #263D5C 80%);
    background-image: -o-radial-gradient(center top, circle closest-corner, #476793 0%, #263D5C 80%);
    background-image: -webkit-gradient(radial, center top, 0, center top, 487, color-stop(0, #476793), color-stop(1, #263D5C));
    background-image: -webkit-radial-gradient(center top, circle closest-corner, #476793 0%, #263D5C 80%);
    background-image: radial-gradient(circle closest-corner at center top, #476793 0%, #263D5C 80%);
}

#splash_logo img {
    
    margin-top:40px; 
    max-width:300px;
    width:90%;
}

#splash_more {
    position:relative;
    color:#F5F5F5;
    text-shadow: 0px 1px 2px black;
    background-color:rgba(0,0,0,0.2);
    border-radius:2px;
    padding:10px;
    max-width:400px;
    margin:0 auto;
    z-index:11;
    font-size:1.1em;
}

#nav {
    margin-top:0;
}

#nav i {
    display:none;
}

.modalBoxWrap  { 
    display:none;
    z-index:40001; 
    position:absolute;
    top:0;
}

.modalBoxOverlay {
    position:fixed;
    width:100%;
    height:100%;
    background-color:black;
    opacity:0.5; 
    filter:alpha(opacity=50); 
    z-index:40001;
}

.modalOffset { 
    position:fixed;
    top:20%;
    width:100%;
    z-index:40002; 
}

.modalBox { 
    max-width:700px; 
    min-height:300px;
    position:relative;
    margin: auto;
    padding:10px 15px;
    border-radius:2px;
    box-shadow:0px 1px 6px black;
    background-color:#F8F8F8;
    background-image:url('/graphics/ajax-loader.gif');
    background-repeat: no-repeat;
    background-position: center;
    z-index:40003;
}

#closeModal {
  cursor:pointer;
  position:absolute;
  top:3px;
  right:3px;
  z-index:50;
  text-shadow:0px 0px 3px white;
  color:#9D2828;
}

#closeModal:hover, #closeCancel:hover {
  color:#AA1400;
}

.cancelBoxWrap  { 
    display:none;
    z-index:40001; 
    position:absolute;
    top:0;
}

.cancelBoxOverlay {
    position:fixed;
    width:100%;
    height:100%;
    background-color:black;
    opacity:0.5; 
    filter:alpha(opacity=50); 
    z-index:40001;
}

.cancelOffset { 
    position:fixed;
    top:30%;
    width:100%;
    z-index:40002; 
}

.cancelBox { 
    max-width:450px; 
    min-height:120px;
    position:relative;
    margin: auto;
    padding:10px 15px;
    border-radius:2px;
    box-shadow:0px 1px 6px black;
    background-color:#F8F8F8;
    z-index:40003;
}

#closeCancel {
  cursor:pointer;
  position:absolute;
  top:-5px;
  right:-5px;
  z-index:50;
  text-shadow:0px 0px 3px white;
  color:#9D2828;
}

#progress {
    min-height:250px;
    max-width:650px;
    margin: auto;
    padding: 20px 0;
    display:none;
}

.solidbg {
    background-color:#F8F8F8;
}


#form_pdb_info {
    margin-top:15px;
    height:20px;
    margin-bottom:10px;
}

#pdbid {
    text-transform: uppercase;
}

#form_biounits {
    display:none;
    height:20px;
    width:300px;
    background-color:transparent;
    margin:30px auto;
    margin-bottom:-40px;
    overflow:hidden;
}

#email + a,
#pdbid + a{
    display:inline-block;
    position:relative;
    top:8px;
    right:15px;
    margin-left:-20px;
    z-index:99;
}

#pdbid + a {
   right:19px; 
   margin-left:-13px;
}

#job {
    display:inline;
}

.emailSuggestion {
    display:block;
    margin: 5px 0 -20px 0;
}

.problem {
    color:#AA1400;
}

.success {
    color:#699515;
}

label.problem {
    display:inline-block;
    padding: 7px 0 0 7px;
}

/* File upload CSS grabbed from: https://stackoverflow.com/questions/8350927/file-upload-button-without-input-field */
.fileupload {
    max-width: 170px;
    height: 50px;
    position: relative;
    overflow: hidden;
    display:inline-block;
    vertical-align: top;
  }

.fileupload input {
    position: absolute;
    top: 0;
    right: 0; 
    cursor: pointer;
    opacity: 0.0;
    filter: alpha(opacity=0); 
    font-size: 300px; 
    height: 200px;
    z-index:99;
  }
  
  .fileuploadsmall {
    max-width: 120px;
    height: 25px;
    position: relative;
    top:19px;
    overflow: hidden;
    display:inline-block;
  }

.fileuploadsmall input {
    position: absolute;
    top: 0;
    right: 0; 
    cursor: pointer;
    opacity: 0.0;
    filter: alpha(opacity=0); 
    font-size: 300px; 
    height: 200px;
    z-index:99;
    float:left;
  }
  
  p.uploadtext {
      font-size:1.2em;
      margin-top:15px;
      margin-bottom:-15px;
  }
  
  #upload_curve {
      float:left;
  }
  
  #curveunit {
      margin:0 10px -5px 0;
  }
  
  #curvescatter {
      margin:4px 14px -10px 0;
  }
  
  
  #form_curve_info {
      float:left;
      padding:12px 0 0 10px;
      margin-bottom:-12px;
  } 
  
  
  .remove_pdb, .remove_curve, .remove_traj_pdbfile, .remove_traj_index, .remove_traj_traj {
      position:relative;
      top:1px;
      cursor:pointer;
      color:#C0C0C0;
  }  
  
  .remove_pdb:hover, .remove_curve:hover, .remove_traj_pdbfile:hover, .remove_traj_index:hover, .remove_traj_traj:hover {
      color:#FC1E00;
  } 
  
  .review_link {
      max-width:150px;
      margin:auto;
  }
  
  
  .basic_options, .advanced_options {
      display:none;
      max-width:900px;
      margin:auto;
  }
  
  .example_options {
      max-width:900px;
      margin:5em auto 0;
  }
  
  .example_options p {
      padding: 1em;
  }
  .example_options ul {
      margin-left:5em;
  }
  
  h2.options {
      border-bottom:1px solid silver;
      margin-left:10px;
      text-align:left;
      font-size:1.2em;
  }
  
  .content p, .content h6, .content a {
      text-shadow: 0 0 10px white;
  }
  
  .question {
      padding-left:15px;
      font-weight:bold;
  }
  
  .answer {
      padding-left:25px; 
  }
  
  td.time:first-letter {
        text-transform: capitalize
  }
  
  time {
      cursor:help;
  }
  
  table.sortable, 
  table.sortable td, 
  table.sortable tr  {
      position:relative;
  }
  
  table.sortable tr i.canceljob,
  table.sortable tr i.runstartjob{
      color:transparent;
      position:relative;
      float:right;
      margin:0;
      padding:2px;
  }
  
  table.sortable tr:hover i.canceljob,
  table.sortable tr:hover i.runstartjob {
      color:#C0C0C0;
      cursor:pointer;
  }
  
  table.sortable tr:hover i.canceljob:hover {
      color: #9D2828;
  }

  table.sortable tr:hover i.runstartjob:hover {
      color: #699515;
  }
  
 
  .helpdiv {
      padding: 10px 10px 10px 0;
      margin:20px 0 0;
      clear:both;
      background-color: transparent;
     -webkit-transition: all 0.5s linear;
     -moz-transition: all 0.5s linear;
  }

.helpdiv:target {
    background-color: rgba(166,212,40,0.1);
    -webkit-transition: all 0.5s linear;  
    -moz-transition: all 0.5s linear;
}

a.tooltip {
    z-index:999;
}

img.resultimg {
    border:1px solid #E5E5E5;
    padding:30px;
    margin:20px;
    width:90%;
    max-width:740px;
    background-color:white;
    border-radius:5px;
}

.mainbutton {
    padding: 5px;
    min-width: 85px;
}

.mainbutton .fa {
    margin-bottom:3px;
}

#traj_uploads {
    max-width:340px;
    min-height:200px;
    text-align:left;
    margin:0 auto;
    padding:0;
    overflow-y:hidden;
    overflow-x:visible;
}

#traj_uploads p {
    margin:0;
}
  
.small_upload_text {
    display:inline-block;
    position:relative;
    top:10px;
}
 

/*---------------------------------
  DEVICE RESPONSES
  -----------------------------------*/  

  @media all and (max-width: 512px) {


      .superfluous-phone,
      div.superfluous-phone,
      i.superfluous-phone {display:none;}

      div.superfluous-phone * {display:none;}

      #nav i {
          display:inline;
      }
      
  }

  @media all and (max-width: 768px) {

      .superfluous-tablet,
      div.superfluous-tablet,
      i.superfluous-tablet {display:none;}

      div.superfluous-tablet * {display:none;}

      #nav > li > a > i {display:block; margin:-4px -7px -4px -7px;}
      #nav > li {width:9%; text-align:center;}
      #nav > li > a {width:100%; padding-left:40%;}
      
      .menu li.last a {border-right:0; padding:13px 7px}
      .menu li a {padding:13px 17px;}
      
      body {background-image:none; }
      
      .grid {max-width:650px;}
      
      #curveunit    {margin:10px 10px -5px 0;}
      #curvescatter {margin:4px 14px -5px 0;}
      
      #email + a {display:none;}

  }  
  
@media all and (min-width: 769px) and (max-width: 1024px) {

    .grid {max-width:950px;}
    
}

  
/*---------------------------------
  HELPERS
  -----------------------------------*/    

a.darkbg {
    color:white;
}
a.darkbg:hover {
    color:#C4E172;
}

.nopadding {
    padding:0;
    margin:0;
}

.faint {
    color:#A6A6A6;
}

.white {
    color:white;
}

.fleft {
    float: left;
}

.fright {
    float: right;
}

.padded {
    padding:10px;
}

.clearer {
    clear:both;
}

.bigger {
    font-size:1.2em;
}


/* Additional class for jQuery button response */
button.greenover,
a.btn.greenover,
a.button.greenover {
    text-shadow:0 1px 0 #669E00;
    border:1px solid #669E00;
    background: rgb(198,226,120); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(198,226,120,1) 0%, rgba(167,211,44,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(198,226,120,1)), color-stop(100%,rgba(167,211,44,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(198,226,120,1) 0%,rgba(167,211,44,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(198,226,120,1) 0%,rgba(167,211,44,1) 100%); /* Opera 11.10+ */
    background: linear-gradient(top, rgba(198,226,120,1) 0%,rgba(167,211,44,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6e278', endColorstr='#a7d32c',GradientType=0 ); /* IE6-9 */
}