/** =============================================
 * ATTENTION
 * Anybody making changes to the custom CSS here,
 * please note the name and date of the change
 * in this header here.
 * 
 * Last change:
 * Name: George
 * Date: 2014-12-23
 *
 * Documentation:
 * https://georgelewe.atlassian.net/wiki/display/GIZ/Custom+CSS+for+Pixture+Reloaded+7.x
 */

/** =============================================
 * Theme overwrites
 */
html {
   background-image: none;
   background-color: #f5f5f5;
   background: rgb(220,220,220); /* Old browsers */
/**
 *  background: linear-gradient(to bottom,rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);
 *  background: -moz-linear-gradient(top,rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%);
 *  background: -webkit-gradient(linear,left top,left bottom, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1)));
 *  background: -webkit-linear-gradient(top,rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);
 *  background: -o-linear-gradient(top,rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);
 *  background: -ms-linear-gradient(top,rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);
 *  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 );
 */
}
 
.block-title {
   border-bottom: 1px solid #203254;
   font-weight: normal;
   padding: 4px 8px 4px 8px;
}
 
ul.primary li a { 
   background-color: #ffffff; 
   border: 1px solid #bbbbbb; 
   border-radius: 2px; 
}

ul.primary li.active a,
ul.primary li.active a: hover { 
   background-color: #657290; 
   color: #ffffff; 
   border: 1px solid #bbbbbb; 
   border-radius: 2px; 
}

ul.primary li a: hover { 
   background-color: #dddddd; 
   border: 1px solid #cccccc; 
   border-radius: 2px; 
}
 
/** =============================================
 * Homepage
 */
.box-container div {
   float: left;
   background-color: #fdfdfd; 
   border: 1px solid #bbc7e5;
   margin: 8px 8px 0px 8px;
   width: 250px;
   min-height: 50px;
   font-size: 11px;
   overflow: hidden;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   padding: 4px;
}
 
.box-container a {
   display: table-cell;
   text-align: left;
   text-decoration: none;
   vertical-align: middle;
}
 
.box-container div: hover {
   background-color: #eeeeee;
   border: 1px solid #284ead;
}
 
span.cat-title {
   min-height: 45px;
   display: table-cell;
   font-size: 1.3em;
   width: 250px;
}
 
span.vert-align {
   min-height: 45px;
   display: table-cell;
   vertical-align: middle;
   width: 250px;
}
 
img.category {
   width: 48px;
   height: 48px;
   float: left;
   padding-right: 12px;
}
 
.img_floatleft { 
   float: left; 
   margin: 6px 24px 5px 0;
}
.img_floatright { 
   float: right; 
   margin: 6px 0 5px 10px;
}
 
.clear {
   clear: both;
}
 
/** =============================================
 * Superfish menu
 */
.block-superfish select {
   width: 90.8%;
   margin: 0 4.6% 20px;
   font-size: 20px;
   background: #657290;
   color: #ffffff;
   border-color: #CCCCCC;
   z-index: 999;
   position: relative;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}
@media only screen and (max-width: 600px) {
   #menu-bar {
      padding: 0px;
      margin: 0px;
      position: absolute;
      width: 280px;
      left: 230px;
      top: 20px;
   }
   .block-superfish select { 
      top: 16px; 
   }
}

@media only screen and (max-width: 480px) {
   #menu-bar {
      padding: 0px;
      margin: 0px;
      position: absolute;
      width: 200px;
      left: 160px;
      top: 0px;
   }
   .block-superfish select { 
      top: 16px; 
   }
}

@media only screen and (max-width: 320px) {
   #menu-bar {
      padding: 0px;
      margin: 0px;
      position: absolute;
      width: 150px;
      left: 130px;
      top: 0px;
   }
   .block-superfish select { 
      top: 16px; 
   }
}
 
/** =============================================
 * Login/Logout button
 */
#block-block-21 .block-content { 
   margin: 25px 0px 0px 0px;
   padding: 0px; 
}

#block-block-21 div { 
   background-color: transparent; 
}

#block-block-21 p { 
   margin: 0px; 
   padding: 0px; 
}
 
/** =============================================
 * Floating blocks
 */
#block-block-50 { 
   position: absolute; 
   top: 240px; 
   left: 60px; 
   width: 280px; 
}

#block-block-51 { 
   position: absolute; 
   top: 240px; 
   left: 1560px; 
   width: 280px; 
}

@media only screen and (max-width: 800px) {
   .sticky { 
      display: none; 
   }
}

@media only screen and (max-width: 1600px) {
   #block-block-50 { 
      display: none; 
   }
   #block-block-51 { 
      display: none; 
   }
}
 
/** =============================================
 * RSS Follow block
 */
#block-block-52 .block-content { 
   margin: 25px 0px 0px 0px;
   padding: 0px; 
}

#block-block-52 div { 
   background-color: transparent; 
}

#block-block-52 p { 
   margin: 0px;
   padding: 0px; 
}
 
/** =============================================
 * RSS email submit
 */
#block-block-53 .block-content { 
   margin: 25px 0px 0px 0px;
   padding: 0px; 
}

#block-block-53 div { 
   background-color: transparent; 
}

#block-block-53 p { 
   margin: 0px;
   padding: 0px; 
}
 
/** =============================================
 * Mobile logo and margins
 */
@media only screen and (max-width: 480px) {
   #block-block-21 .block-content { 
      margin: 0px 0px 0px 0px;
      padding: 0px;
   }
   #block-block-52 .block-content { 
     margin: 0px 0px 0px 10px;
     padding: 0px; 
   }
   .region-header #block-search-form { 
   margin-left: 0px; 
   }
   #block-search-form .block-content { 
      padding: 0px 10px 0px 10px;
   }
   #logo {
      display: none; 
   }
   #logomobile { 
      display: block; 
      margin-left: 10px; 
   }
}

@media only screen and (min-width: 481px) {
   #logo { 
      display: block; 
   }
}
 
/** =============================================
 * Header width adjustments. Needs to stay at bottom of this CSS
 */
#branding, #header .region-header { 
   width: auto !important;
   clear: none !important; 
}
 
#branding { 
   float: left !important; 
}

#header .region-header { 
   float: right !important; 
}

/** =============================================
 * Old styles we need for the upgrade interim period until all articles
 * are converted to the new format
 */
table.review { border-collapse: collapse; width: 100%; clear: both; }
td.review-title { padding-top: 6px; padding-bottom: 6px; padding-left: 0px; vertical-align: middle; background-color: inherit; }
div.review-title { font-size: 1.5em; font-weight: normal; color: #555555; }
td.review-icons { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; background-color: #f5f6f0; }
td.review-votes { padding-top: 6px; padding-bottom: 6px; text-align: right; vertical-align: middle; background-color: #f5f6f0; }
table.review-details { width: 100%; }
td.review-details-title { width: 200px; padding-top: 3px; padding-bottom: 3px; }
div.review-details-title { font-weight: bold; }
td.review-details-icon { padding: 4px 0 0 0; vertical-align: top; }
td.bordered { border: 1px solid #cbcec3; }
.gizmos-best-label { padding-top: 20px; font-size: 120%; font-weight: bold; color: #888888; }
.views-field-field-5-star-rating { padding-bottom: 8px; clear:both; }
.qsg-icon { float: left; padding: 4px 8px 0 0; }
table li {margin-left: 12px; }

.block h3 { font-size: 1.5em; }

@media screen and (max-width: 480px) {
   body { 
      font-family: Verdana, Geneva, 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 16px; 
   }
}

@media screen and (min-width: 481px) and (max-width: 1000px) {
   body { 
      font-family: Verdana, Geneva, 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 15px; 
   }
}

/** =============================================
 * This is for the top text when editing an article. Class is referenced in edit
 * content type Article.
 */
.explanation { padding: 10px; }

/**
 * The class used for field labes
 */
.description { font-style: italic; }

#comments h2 { border-top: 1px solid #dddddd; font-size: 1.5em; font-weight: normal; padding-top: 10px; margin-top: 40px; }

/** =============================================
 * tile-based index, new items and category heading for megalists 
 */
.index-block a
{float:left; border:1px solid #ddd; margin:6px; width:250px; height:48px; overflow:hidden; padding:2px; color:#303030; text-decoration:none;}

.index-block a:hover
{text-decoration:none; background-color:#f2f6f9;}

.index-block span
{display:table-cell; height:48px; vertical-align:middle;}

.index-block img
{width:48px; height:48px; float:left; padding-right:10px;}

.index-fullblock a
{display:block; height:48px; width:99%; margin-left:auto; margin-right:auto; text-align:center; border:1px solid #ddd; color:#303030; text-decoration:none;}

.index-fullblock a:hover
{text-decoration:none; background-color:#f2f6f9;}

.index-fullblock span
{line-height:48px; vertical-align:middle; padding-right:10px;}

.index-fullblock img
{height:48px; width:48px; vertical-align:middle; padding-right:10px;}

.cat-heading span
{display:table-cell;height:48px;vertical-align:middle;font-size:1.3em;font-weight:bold;}

.cat-heading span.fa
{font-size:3em; padding-right:15px; }

.cat-heading img
{width:48px; height:48px; float:left; padding-right:15px;}

.newitem a
{width:130px;height:82px;margin:15px 8px 10px 8px;float:left;overflow:hidden;padding-bottom:35px;text-align:center;color:#303030;}

.newitem img
{width:60px;height:60px;} 
/** =============================================
 * Software content type styles
 */
.field .field-label { font-family: Verdana,Geneva,"DejaVu Sans",Arial,Helvetica,sans-serif; }
.form-item label { font-weight: bold; }

/** =============================================
 * Navigation boxes
 */
.box-container2 a { float: left; border: 1px solid #ddd; margin: 6px; width: 250px; min-height: 50px; overflow: hidden; padding: 6px; color: #303030; }
.box-container2 a:hover { background: #f5f5f5; }
.box-container2 img { float: left; margin-right: 4px; margin-bottom: 4px; }

/** =============================================
 * New QSG
 */
.qsg-product { margin-top: 40px; margin-bottom: 80px; }
table.qsgrating { border-collapse: collapse; width: auto; }
table.qsgrating td { padding-left: 0px; }
td.qsgtoppick { color: #ffb300; position: relative; top: -5px; padding-left: 10px; }
.qsgappicon { float: left; padding-right: 12px; width: 80px; height: 80px; }
.hidden { display: none; }

 form#article-node-form select#edit-taxonomy-vocabulary-1-und {
 height: 145px;
}