/**
 * main.css
 *
 * 1. General HTML tags
 * 2. Masthead area
 * 3. Main content and sidebar
 * 4. Footer
 * 5. Media queries for responsive layout
 * 6. Accessibility helpers
 *
 */

/*********************************************************************
 * 1. General HTML tags
 *
 */

* {
   box-sizing: border-box;
}

body {
   padding: 5%;
   max-width: 1600px;
   margin: 0 auto;
   background-image:url('/static/images/globtek_logo_bg.gif');
   background-repeat: no-repeat;
   background-attachment:fixed;
   background-position:left top;
}

body, td, input[type=text], textarea {
    /*font-family: 'Quattrocento', serif;*/
   font-family: 'Lato', sans-serif;
   font-size: 105%;
   line-height: 1.5em;
   color: #444;
}

img {
   max-width: 100%;
}

h1 {
    font-size: 1.5em;
    line-height: 1.25em;
}

h2 {
   font-weight: normal;
}

h3 {
   border-top: 1px solid #eee;
   padding-top: 1em;
   color: #777;
}

a {
   color: #333;
   text-decoration: none;
   border-bottom: 1px solid #ccc;
}
a:hover,
   .nav a:hover {
      color: #000;
      border-color: #aaa;
   }

blockquote {
   margin-left: 0;
   padding-left: 1.5em;
   padding-right: 2em;
   border-left: 4px solid #ddd;
   font-style: italic;
   color: #777;
}

pre, code {
   background: #eee;
   border: 1px solid #ddd;
}

pre {
   font-size: 14px;
   line-height: 1.4em;
   padding: 1em;
   border-left: 4px solid #ddd;
}

/*********************************************************************
 * 2. Masthead area
 *
 */

.topnav {
   background: #e03427;
   overflow:auto;
   /*border-bottom: 1px solid #c99;*/
   border:1px solid #ccc;
   width: 100%;
   box-shadow: #ccc 0px 2px 3px;
}

.topnav, .topnav li {
   list-style: none;
   padding: 0;
   margin: 0;
}
.topnav li {
   float: left;
        /*margin-right: 1em;*/
       /*margin-bottom: 1em;*/
   margin:0;

}
.topnav a {
   padding: 0.25em 0.5em;
   text-decoration: none;
   display: block;
       /*color: #333;*/
   color: #eee;
   border:none;
        /*border: 1px solid #eee;*/
}
.topnav a:hover {
   background: #c92818;
   color:#fff;
        /*border-color: #ddd;*/
       /*box-shadow:1px 0px 1px 0px #955;*/
}

.topnav li.current a {
   background: #fff;
   color:#333;
   /*border-bottom:1px solid #ccc;
   border-top: 1px solid #ccc;*/
}
.topnav li.edit a {
   background: none;
}

#language_select {
    float: right;
    font-size: 80%;
}
.languages {
   list-style: none;
   margin: 0;
   padding: 0;
   float: right;
   width: 30%;
   font-size: 80%;
}

.languages li {
   list-style: none;
   display: inline-block;
   margin: 0;
   padding: 0;
}

.languages a {
   padding: 0 0.5em;
   border: none;
   display: inline;
   border-left: 1px solid #ccc;
}
.languages li.current a {
   font-weight: bold;
}
.languages li:first-child a {
   border: none;
   padding-left: 0;
}



form.search {
   float: right;
   margin: 0;
   width: 30%;
   padding-bottom: 1em;
}
form.search input {
   margin: 0;
   padding: 0.25em 0.5em;
   border: 1px solid #ccc;
   width: 100%;
}

.breadcrumbs {
   font-size: 80%;
   width: 70%;
   float: left;
   clear: both;
   padding-top: 1em;
}
.breadcrumbs span:after {
   content: ">";
   color: #999;
   padding-left: 0.5em;
   padding-right: 0.25em;
}

/*********************************************************************
 * 3. Main content and sidebar
 *
 */

#main {
   border-top: 1px solid #eee;
   padding-top: 1em;
   margin-top: 1em;
   clear: both;
}

#content {
   width: 85%;
}

#content, #sidebar {
   padding-bottom: 2em;
}

body.has-sidebar #content {
   width: 65%;
   float: left;
}

/*  [Tue Apr 23 14:41:40 UTC 2019] added */
body #content table {
    border-collapse:collapse;
    border:1px solid #ccc;
}

body #content td {
    border: 1px solid #ccc;
}

body.has-sidebar #content table {
    font-size:60%;
    width:100%;
}
/* */

body.has-sidebar #sidebar {
   width: 35%;
   padding-left: 5%;
   float: left;
}

.nav {
   margin-left: 0;
   padding-left: 0;
   list-style: none;
}
.nav .nav {
   padding-left: 1.5em;
   list-style: disc;
}
.nav li {
   margin: 1em 0;
}

.nav-tree li {
   margin-top: 0;
   margin-bottom: 0;
}

.nav a {
   font-weight: bold;
}

.nav-tree li a {
   color: #777;
}

.nav .current > a {
   color: #333;
}

#sidebar img + blockquote {
   margin-top: 0;
}

.align_left {
    /* for images placed in rich text editor */
   float: left;
   margin: 0 1em 0.5em 0;
   position: relative;
   top: 0.5em;
   max-width: 50%;
}

.align_right {
    /* for images placed in rich text editor */
   float: right;
   margin: 0 0 0.5em 1em;
   max-width: 50%;
}

.align_center {
    /* for images placed in rich text editor */
   display: block;
   margin: 1em auto;
   position: relative;
   top: 0.5em;
}

figure {
   display: table;
   width: 1px;
   margin: 1em 0;
}

figure img {
   display: table-row;
   margin-bottom: 0.5em;
}

figure figcaption {
   display: table-row;
   font-size: smaller;
   color: #777;
   line-height: 1.4em;
}

/*********************************************************************
 * 4. Footer
 *
 */

#footer {
   clear: both;
   font-size: 70%;
   background:#333;
   color:#eee;
}

#footer a {
    color:#eee;
    text-decoration:none;
    border:none;
}

/*********************************************************************
 * 5. Media queries for responsive layout
 *
 */

@media only screen and (max-width: 767px) {
    /* mobile layout */

   .languages {
      width: 100%;
      margin-bottom: 1em;
   }
   .topnav {
      float: none;
      clear: both;
      width: 100%;
   }
   .breadcrumbs {
      margin-bottom: 1em;
      margin-top: 0;
   }

   body, td, textarea {
      font-size: 100%;
   }
   body.has-sidebar #content,
      body.has-sidebar #sidebar {
         float: none;
         width: 100%;
         padding: 0;
      }
   form.search {
      float: none;
      width: 100%;
      padding-bottom: 0;
   }
   #content {
      width: 100%;
   }
   #sidebar {
      border-top: 1px solid #eee;
      padding-top: 1em;
   }
   .align_left, .align_right, .align_center {
      display: block;
      float: none;
      margin: 1em auto;
      max-width: 100%;
   }

}

@media only screen and (min-width: 1200px) {
    /* extra-wide desktop layout */

   body, td, textarea {
      font-size: 115%;
   }
}

/*********************************************************************
 * 6. Accessibility helpers
 *
 */

/* Hide visually, but remain approachable for screenreader */

.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   white-space: nowrap;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
   border: 0;
}

/* Show bypass link on hover */

.element-focusable:focus {
   clip: auto;
   overflow: visible;
   height: auto;
}

/* Sample styling for bypass link */

.bypass-to-main:focus {
   top: 0;
   left: 0;
   width: 100%;
   height: 40px;
   line-height: 40px;
   text-align: center;
   background: #333;
   color: #fff;
}

/* custom */
.release-tiles {
   position:relative;
   border-collapse:collapse;
}
.release-tile {
   max-width:320px;
   /*padding:8px;*/
   float:left;
   border: 1px solid #ccc;
}
.release-tile h3 {
   text-align:center;
   color:#222;
   font-size: inherit;
   /*max-width:320px;*/
   width:100%;
   padding:0;
   background:#419bd5;
   margin:0;
   border:0;
   min-height:80px;
}
.release-thumbnail {
   background-repeat:no-repeat !important;
   float:left;
   vertical-align:top;
   margin:0 6px 6px 0;
}
.release-summary {
   margin:8px;
   line-height:110%;
   vertical-align:top;
   font-size: 85%;
   color:#333;
}
/*
ul.nav li {

}*/
#sa_list {
   border-collapse:collapse;
   border: 1px solid #ccc;
}
#sa_list td {
   font-size:75%;
   border: 1px solid #ccc;
}

.model-tile, .release-tile {
   margin:3px;
   max-width:480px;
   border-radius: 3px;
   border:1px solid #eee;
   overflow:auto;
   display:inline-block;
   box-shadow: 1px 1px 6px #666;
   break-inside:avoid;
   background:#fff;
}
.model-tile p {
   margin: 7px;
   font-size: 80%;
}
.model-tile img, .release-tile img {
   width:100%;
}
.model-tile .model-name {
   font-size:inherit;
   font-weight:bold;
   background:#419bd5;
   color:#222;
   text-align:center;
   border-bottom:1px solid #eee;
}


.masonry-container {
   margin:9px 0;
   column-count:4;
   column-gap: 6px;
   position:relative;
   clear:both;
}


@media (max-width: 480px) {
   .masonry-container {
      column-count:1;
      margin:2px 0;
      column-gap:1px;
   }
}

@media (max-width: 800px) {
   .masonry-container {
      column-count:2;
      margin:6px 0;
      column-gap:2px;
   }
}

.MarkupPagerNav {
   clear: both;
   /*margin: 1em;*/
   font-family: Arial, sans-serif;
}
.MarkupPagerNav li {
   display: inline;
   list-style: none;
   margin: 0;
}

.MarkupPagerNav li a,
      .MarkupPagerNav li.MarkupPagerNavSeparator {
         display: block;
         float: left;
         padding: 2px 9px;
         /*color: #fff;*/
         /*background: #2f4248;*/
         margin-right: 3px;
         font-size: 10px;
         font-weight: bold;
         text-transform: uppercase;
         border:1px solid #999;
      }

.MarkupPagerNav li.MarkupPagerNavOn a,
            .MarkupPagerNav li a:hover {
               color: #fff;
               /*background: #db1174;*/
               background:#c92818;
               text-decoration: none;
            }

.MarkupPagerNav li.MarkupPagerNavSeparator {
   display: inline;
   color: #777;
   background: #d2e4ea;
   padding-left: 3px;
   padding-right: 3px;
}
img.thumbnail {
   max-width:180px !important;
}
table.chart, table.chart * {
   box-sizing:content-box;
}
table.chart {
   clear:both;
   font-size:70%;
   border: 1px solid #ccc;
   border-collapse:collapse;
}
table.chart td {
   text-align:center;
   padding:6px;
   border: 1px solid #ccc;
}
table.chart td.description {
   font-size:90%;
}
table.chart thead {
   background: #33c;
   color:#eee;
}
table.chart tbody {
   background:#fff;
}
table.chart th {
   padding:6px;
   border: 1px solid #fff;
   background: #ccc;
   text-transform: uppercase;
}
.chart a:link {
   border:none;
   display:block;
   overflow:auto;
}
table.chart .model-cell {
   text-align:center;
   max-width:320px;
}
a.button, a.button:hover {
   font-size:12px;
   padding: 1px 6px;
   display:inline-block;
   border: 1px solid #fff;
   background: #385269;
   color:#fff;
   box-shadow: 0px 0px 1px 1px #999;
}

a.button:active {
   box-shadow:none;
}

td.key-column {
   font-weight:bold;
   font-size:150%;
   background:#eee;
}

#sf_model_search_form {
   max-width:960px;
   text-align:center;
   border:1px solid #ccc;
}
#sf_model_search_form span {
   display:inline-block;
/*   border:1px solid #ccc;*/
   padding:6px 9px;
}
input[type=text],input[type=password], textarea, input[type=number], input[type=email], input[type=tel], input[type=date], input[type=search], input[type=checkbox], select {
   line-height: 120%;
   border-radius: 3px;
   border: 1px solid #ccc;
   font-size: 120%;
}
select {
   min-width:40px;
   max-width:280px;
   padding: 3px;
}

label {
   margin-left: 3px;
   /*background:#ccc;*/
   /*border:1px solid #ccc;
   border-right:none;*/
   border:none;
   height:100%;
   display:inline-block;
   padding:0 6px;
}
.checkboxes label, label.checkbox {
   background:none;
   margin-left:0;
}
.release-images {
   float:left;
}
img.release-image {
   max-width:260px;
}

.section {
   display:inline-block;
   margin: 6px;
   /*border:1px solid #ccc;*/
}
.field {
   display:inline-block;
}
#rfi_form {
   border:1px solid #ccc;
   display:block;
   padding:6px;
}
footer {
   clear:both;
   display:block;
   margin:0;
   padding:9px;
   width:100%;
   font-size:70%;
   line-height:150%;
   border-top:1px solid #ccc;
   min-height:96px;
}
footer div {
   min-width:200px;
   max-width:320px;
   height:100%;
   float:left;
   margin:9px;
}
footer div:last-child {
    float:right;
    text-align:right;
}

#prevnext-nav-container {
   width:100%;
}
#prevnext-nav-container a.prev {
   float:left;
}
#prevnext-nav-container a.next {
   float:right;
}
#rfi-container {
   clear:both;
}
a#top_home {
    border: none;
}