/**
 * CMS Canvas
 *
 * @author      Mark Price
 * @copyright   Copyright (c) 2012
 * @license     MIT License
 * @link        http://cmscanvas.com
 */

html,
body {
   height: 100%;
}

body {
   height: 100vh;
   /* Avoid the IE 10-11 `min-height` bug. */
   position: relative;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
}

.clear {
   height: 0px;
   clear: both;
}

#container {
   width: 100%;
   max-width: 960px;
   margin: 0 auto;
   background-color: #ffffff;
   padding: 0px;
   position: relative;
   flex: 1 0 auto;
   align-items: flex-start;
}

header ul,
footer ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

#logo {
   display: block;
   font-size: 28px;
   font-weight: bold;
   text-decoration: none;
   padding: 20px 0;
   color: #000000;
}

#content_wrapper {
   padding: 0;
}

.qlogo {
   background: #3f3f3f url(../images/qLinks.png) center center no-repeat;
   height: 102px;
}

section {
   width: 100%;
}

.code {
   background: #035396 url(../images/access_bg.jpg) center repeat-y;
   padding: 10px 0;
   color: #fff;
   text-align: center;
   font-weight: 700;
   font-family: 'Open Sans', sans-serif;
   /* text-transform: uppercase; */
   font-size: 1.5em;
   clear: both;
}

.code form label {
   display: inline-block;
   vertical-align: middle;
}

.code form input#code {
   display: table-cell;
   font-size: 16px;
   font-weight: bold;
   margin: 0 5px 0 10px;
   padding: 5px;
   vertical-align: middle;
   width: 100px;
}

.code form input.go {
   background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%) repeat scroll 0 0 transparent;
   border-radius: 5px;
   color: #3a3a3a;
   display: inline-block;
   font-size: 16px;
   padding: 4px;
   text-decoration: none;
   text-shadow: 1px 1px #ffffff;
}

#left_column {
   float: left;
   width: 699px;
   padding-right: 20px;
   border-right: 1px solid #cccccc;
}

#right_column {
   float: left;
   width: 220px;
   padding-left: 20px;
}

footer {
   text-align: center;
}

.hidden,
.hide {
   display: none;
}

/* NAVIGATION */

/* Navbar icons - SCG */

#nav-dashboard {
   margin-left: 15px;
   padding-left: 25px;
   background: url(../images/dashboard-icon.png) no-repeat left center;
}

#blackboard > a {
   margin-left: 15px;
   padding-left: 25px;
   background: url(../images/blackboard-icon.png) no-repeat left center;
}

#links > a {
   margin-left: 15px;
   padding-left: 25px;
   background: url(../images/links-icon.png) no-repeat left center;
}

/* FORMS */

form input[type='text'],
form input[type='password'] {
   vertical-align: middle;
}

form textarea {
   width: 400px;
   height: 80px;
   vertical-align: top;
}

form select,
form textarea {
   padding: 3px;
}

form > div,
form fieldset > div {
   margin-bottom: 5px;
}

form > div > label,
form fieldset > div > label {
   display: inline-block;
   width: 100px;
   vertical-align: middle;
}

form span.required {
   color: red;
}

/* END FORMS */

/* NOTICES */

p.success {
   padding: 10px 10px 10px 33px;
   margin-bottom: 15px;
   background: #eaf7d9 url('../images/success.png') 10px center no-repeat;
   border: 1px solid #bbdf8d;
   color: #555555;
}

p.warning,
p.error {
   padding: 10px 10px 10px 33px;
   margin-bottom: 15px;
   background: #ffd1d1 url('../images/warning.png') 10px center no-repeat;
   border: 1px solid #f8acac;
   color: #555555;
}

p.attention {
   padding: 10px 10px 10px 33px;
   margin-bottom: 15px;
   background: #fff5cc url('../images/attention.png') 10px center no-repeat;
   border: 1px solid #f2dd8c;
   color: #555555;
}

/* END NOTICES */

/* Body Styles */

body#home {
   /* background-color: #fff; */
   background-color: #3f3f3f;
}

#container {
   background: none;
}

/* Breadcrumbs */

div.breadcrumbs {
   margin: -20px 0 20px 0;
   padding: 0;
   background-color: #000;
   width: 100%;
   color: #fff;
}

div.breadcrumbs a {
   text-decoration: none;
   color: #fff;
   background: transparent url('../images/breadcrumb.png') no-repeat scroll right center;
   padding: 0px 15px 0px 0px;
   line-height: 2.3em;
}

div.breadcrumbs a.first {
   padding-left: 30px;
}

div.breadcrumbs span.last {
   color: #808080;
}

/* Content Styles */
.container {
   max-width: 100% !important;
}

.productList {
   width: calc(100%);
   /* max-width: 960px; */
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

.productList .product-book-list {
   background-color: #fff;
   max-width: calc(100% - 15px);
   flex: 1 0 calc(47% - 15px);
   max-width: 297px;
   min-height: 300px;
   margin: 15px 15px 15px 15px;
   position: relative;
   border-bottom: 5px solid #1e2f66;
   box-shadow: 2px 2px 1px 0 rgba(0, 0, 0, 0.3);
   font-size: 20px;
   color: #dedede;
   text-align: center;
   transition: all 0.2s linear;
}
@media only screen and (min-width: 577px) {
   .productList .product-book-list {
      /* flex: 1 0 calc(35% - 15px);
      max-width: 35%; */
   }
}
@media only screen and (min-width: 768px) {
   .productList .product-book-list {
      flex: 1 0 calc(30% - 15px);
   }
}

/* MSCA */
div#msca + div.container .productList .product-book-list {
   border: 2px solid rgba(166, 198, 215, 1);
   border-bottom: 5px solid #157d96;
}

.productList .product-book-list:hover {
   border-bottom: 5px solid #1e2f66;
   box-shadow: 5px 5px 3px 1px rgba(0, 0, 0, 0.3);
   transform: translate3d(-4px, -4px, 0px);
}

.productList .product-book-list > img {
   width: 100%;
   margin: 0 auto;
   cursor: pointer;
}
.product-buttons-head {
   padding: 5px;
   color: #999;
   font-size: 0.75em;
   font-weight: bold;
   font-style: italic;
   text-transform: uppercase;
}
.product-buttons {
   display: flex;
   justify-content: center;
}
.product-book-list div.product-title-video,
.product-book-list div.product-title {
   background-color: #193e8c;
   margin: 10px 5px;
   padding: 10px 5px;
   text-decoration: none;
   text-align: center;
   font-size: 0.7em;
   font-weight: bold;
   color: #fff;
   border: 1px solid transparent;
   display: inline-block;
   cursor: pointer;
   transition: background 0.2s linear, color 0.2s linear;
   flex: 0 1 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}
.product-book-list div.product-title-video {
   background-color: #157d96;
}
.product-book-list div.product-title-video:hover {
   background-color: #fff;
   color: #157d96;
   border: 1px solid #157d96;
}
.product-book-list div.product-title:hover {
   background-color: #fff;
   color: #193e8c;
   border: 1px solid #193e8c;
}

/* Product Menu */

.productList div.menu-button {
   display: block;
   color: #3a3a3a;
   text-decoration: none;
   border-top: 1px solid #ccc;
   padding: 15px;
   margin: 5px;
   border-radius: 10px;
   font-size: 18px;
   text-shadow: 1px 1px #fff;
   background: transparent linear-gradient(to bottom, #fff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%) repeat scroll 0% 0%;
}

.yellow-button {
   min-width: 14%;
   font-family: 'Montserrat', sans-serif;
   font-weight: bold;
   color: #333;
   border: medium none;
   border-radius: 3px;
   cursor: pointer;
   background: transparent linear-gradient(to bottom, #ffce1a 0%, #ffaa18 100%) repeat scroll 0% 0%;
}