/* This page is for the styling of layout columns and container elements. */

[class*="col-"] {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.col-1-2, .col-1-2-nc, .col-1-2-pc,
.col-promo {
    /* Promo: eg. AeroCore and Raspberry Pi family pages; collapses sooner */
    width: 49%;
    padding-left: 1.5%;
    padding-right: 1.5%;
}

.col-1-3, .col-1-3-nc, .col-1-3-pc {
    /* nc = no collapse; pc = partial collapse, in regards to responsive breakpoints */
    width: 32%;
    padding-left: 1.5%;
    padding-right: 1.5%;
}

.col-2-3, .col-2-3-nc, .col-2-3-pc {
    width: 67%;
}

.col-1-4, .col-1-4-nc, .col-1-4-pc {
    width: 24%;
    padding-left: 0.75%;
    padding-right: 0.75%;
}

.col-3-4, .col-3-4-nc, .col-3-4-pc {
    width: 74%;
}

.col-1-5 {
    width: 20%;
    padding-left: 0.75%;
    padding-right: 0.75%;
}

.col-article-image, .col-article-image-nc, .col-article-image-pc {
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    width: 25%;
}

.product-container {
    padding: 1.5rem 0;
    max-width: 70rem;
}

.col-product-image-container {
    width: 36%;
    padding-right: 4%;
}

.col-product-description {
    width: 60%;
}

.product-container h2,
.product-container h3 {
    padding: 0 0 1rem 0;
}

.promo-intro {
    max-width: 35rem;
    padding: 2rem 1rem;
    margin: 0 auto;
}

ul.geppetto-blog {
    text-align: left;
    padding: 0;
    margin: 0;
}

.geppetto-blog .col-article-image-nc {
    width: 37%;
}

.geppetto-blog img {
    max-height: 6.5rem;
}

/* Normalize images across columns. Preferably images should already be the same size. */
.img-maxheight-small img {
    max-height: 3.5rem;
}

.img-maxheight-5 img {
    max-height: 5rem;
}

.img-maxheight-6 img {
    max-height: 6rem;
}

.img-maxheight-7 img {
    max-height: 7rem;
}

.img-maxheight-8 img {
    max-height: 8rem;
}

.img-maxheight-9 img {
    max-height: 9rem;
}

.img-maxheight-11 img {
    max-height: 11rem;
}

.img-maxheight-13 img {
    max-height: 13rem;
}

.minheight-7 {
    min-height: 7rem;
}

.minheight-9 {
    min-height: 9rem;
}

.minheight-10 {
    min-height: 10rem;
}

.content {
    min-height: 60rem;
    padding-top: 6rem;
}

.page-top {
    /* Additional page space at the top, eg. for page titles */
    padding-top: 6rem;
    padding-left: 1rem;
    max-width: 55rem;
}

.page-category-label {
    white-space: nowrap;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #555555;
}

.spacer {
    /* Add space, eg. to the bottom of a page */
    padding: 2rem 0;
}

.pi-banner {
    min-height: 29rem;
    background: url(../images/pi-family-banner.png) center top repeat-x;
    text-align: center;
}

#homepageintro,
#geppettointro,
[class*="wrapper"],
.boxshadow {
    overflow: hidden; /* Remove unwanted space between divs */
    padding: 2rem;
}

#homepageintro {
    min-height: 38rem;
    background: url(../images/expansion-boards.jpg) bottom;
}

#geppettointro {
    position: relative;
    min-height: 44.5rem;
}

.geppetto-logo {
    display: block;
}

.intro1,
.intro2 {
    min-height: 50.5rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

.intro1 {
    background: url(../images/geppetto-pi.jpg) center no-repeat;
    z-index: 2;
}

.intro2 {
    background: url(../images/geppetto-pi2.jpg) center no-repeat;
    z-index: 1;
}

#homepageintro, #geppettointro {
    background-repeat: no-repeat;
    text-align: center;
}

.slogan {
    padding: 3rem 1rem;
    margin: 0 auto;
    max-width:75rem;
}

#homepageintro .slogan {
    max-width: 62rem;
}

#geppettointro .slogan {
    padding: 1rem;
    margin: 5rem auto 1rem auto;
    z-index: 3;
    position:relative;
}

#geppettointro .slogan-wrapper {
    max-width: 30rem;
    padding-left: 0;
}

.promo {
    /* Geppetto landing promo bar -- used in A/B */
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    display: none;
}

/* General div wrappers */

.whitebg {
    background-color: #FFFFFF;
}

.lightgreybg {
    background-color: #F2F2F2;
}

.nobg {
    background: none;
}

.bluewrapper, .bluebg {
    background-color: #3399CC;
}

.faintbluewrapper, .faintbluebg {
    background-color: #E3EFF5;
}

.lightbluewrapper, .lightbluebg {
    background-color: #CBE1EB;
}

.midlightbluewrapper, .midlightbluebg {
    background-color: #85C2E0;
}

.midbluewrapper, .midbluebg {
    background-color: #1B5F91;
}

.boxshadow {
    box-shadow: inset 0 0 4rem #838383;
}

.whitetextshadow {
    text-shadow: 0 0 1rem #FFFFFF;
}

.outershadow, .sectionbox, .promo {
    box-shadow: 1px 1px 5px 1px rgba(20, 20, 20, 0.15);
    border: 1px solid #CCCCCC;
}

.sectionbox {
    border-bottom: 0;
    padding: 2.5rem;
    background: #FFFFFF;
}

.roundborder {
    border-radius: 1rem;
}

.noround-left {
    border-bottom-left-radius: 0;
}

.noround-right {
    border-bottom-right-radius: 0;
}

/* Eg. Support FAQ */
.directorybar {
    border: 1px solid #CCCCCC;
    border-radius: 0.2rem;
    background-color: #FAFAFA;
}

.directorybar:hover {
    transition: 0.15s;
    -webkit-transition: 0.15s;
    background-color: #EFEFEF;
}

html .directorybar > a,
html .directorybar > p {
    padding: 1rem 2rem;
    display: block;
}

/* Classes for expandable content */
.expandable-toggle {
    font-size: 1.5rem;
    text-transform: none;
    font-weight: normal;
    padding: 0.5rem 0;
}

.expandable-content {
    text-align: left;
}

.content-bubble {
    background-color: rgba(100,100,100,0.08);
    padding: 2rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.hidden {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    padding-top: 0;
    padding-bottom: 0;
}

.show {
    max-height: 300rem;
    overflow: hidden;
    -webkit-transition: all 1.75s ease;
}

/* End expandable content classes */

.anchor {
    /* For ID section jumps. Accounts for the navigation bar spacing. */
    top: -15rem;
    display: block;
    position: relative;
    visibility: hidden;
}

.featured-label {
    color: #0A1F29;
    font-size: 1.5rem;
}

.hover-window {
    /* Bordered box element, eg. when selecting from a row of icons */
    height: auto;
    min-height: 14rem;
    max-width: 25rem;
    border: 1px solid #BBBBBB;
    text-align: center;
    padding: 1rem;
}

.hover-window p {
    padding: 0;
}

.hover-window:hover {
    border: 1px solid #3399CC;
    z-index: 10;
    background-color: #CEE6F0;
}

/* Video preview thumbnails */

.video-image-container {
    position: relative;
    display: inline-block;
    width: auto;
}

.video-preview {
    border: 2px solid #85C2E0;
}

.play-container {
    /* Overlay a dark background for play icon visibility */
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    border-top: 3rem solid transparent;
    border-left: 3rem solid transparent;
    border-radius: 2rem;
    top: 30%;
    left: 39%;
}

.play-video {
    /* Overlay a play icon */
    position: absolute;
    border-top: 0.75rem solid transparent;
    border-left: 1.5rem solid #5BADD6;
    border-bottom: 0.75rem solid transparent;
    top: 38%;
    left: 45%;
    z-index: 10;
}

.video-image-container:hover .play-container {
    border-top: 5rem solid transparent;
    border-left: 7.5rem solid transparent;
    border-radius: 1.5rem;
    margin-top: -0.9rem;
    margin-left: -2.3rem;
    top: 28%;
}

.video-image-container:hover .play-video {
    border-top: 1.25rem solid transparent;
    border-left: 2.5rem solid #5BADD6;
    border-bottom: 1.25rem solid transparent;
    margin-top: -0.5rem;
    margin-left: -0.5rem;
}

.video-image-container:hover .video-preview {
    border: 2px solid #3399CC;
}

/* Triangles used for quotes, notably in About Us */
.quotetag-left {
    border-left: 2rem solid #E4EFF5;
    border-bottom: 2rem solid transparent;
}

.quotetag-right {
    border-right: 2rem solid #E4EFF5;
    border-bottom: 2rem solid transparent;
    text-align: right;
}

.quotetag-middle {
    border-right: 1.5rem solid transparent;
    border-left: 1.5rem solid transparent;
    border-top: 1.5rem solid #E4EFF5;
    width: 0;
    margin: 0 auto;
}

.pagination-wrapper {
    /* Pagination numbers at the bottom of blog, media archive */
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 1.2rem;
    padding: 2rem 0;
}

.pagination-wrapper > span {
    /* Align the pagination links regardless of Previous/Next being absent */
    min-width: 5rem;
    max-width: 20rem;
}

.newer, .older {
    font-weight: bold;
}

/* Media template */

.news-list {
    padding-bottom: 2rem;
}

.content .news-archive {
    margin: 0;
    padding: 0.5rem 0;
}

/* Use html tag to increase specificity for overriding the default li behaviour. */
html .news-list > li,
html .news-archive > li {
    list-style-type: none;
}

.news-list > li {
    border-bottom: 1px solid #CCCCCC;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: #888888;
    margin: 0;
}

.news-list > li:last-child {
    border-bottom: none;
}

/* Site buttons */

[class*="btn"], #submit {
    /* Buttons have common padding and don't wrap */
    white-space: nowrap;
    padding: 0.25rem 2rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    display: inline-block;
}

.menu-btn {
    padding: 0.25rem 1.8rem;
}

html .smallbtn {
    padding: 0.27rem 1rem;
    font-weight: normal;
}

.landingbtn, .landingbtn:visited {
    /* Transparent background to white */
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
}

.midbluebtn, .midbluebtn:visited {
    /* Mid-blue background to transparent */
    color: #FFFFFF;
    background-color: #1B5F91;
    border: 2px solid #1B5F91;
}

.whitebtn, .whitebtn:visited,
.landingbtn:hover, .landingbtn:active {
    /* Blue font, white background */
    color: #3399CC;
    background-color: #FFFFFF;
}

.whitebtn, .whitebtn:visited,
.bluebtn, .bluebtn:visited,
input[type=submit] {
    /* Blue border */
    border: 2px solid #3399CC;
}

.whitebtn:hover,
.bluebtn, .bluebtn:visited,
input[type=submit],
.menu-btn.active {
    /* White font, blue background */
    color: #FFFFFF;
    background-color: #3399CC;
}

.bluebtn:hover, .bluebtn:active,
input[type=submit]:hover {
    /* Blue font, transparent background */
    color: #3399CC;
    background-color: rgba(0, 0, 0, 0);
}

.midbluebtn:hover, .midbluebtn:active {
    color: #1B5F91;
    background-color: rgba(0, 0, 0, 0);
}

[class*="btn"],
#submit,
.hover-window,
.play-video,
.video-preview,
.play-container {
    -webkit-transition: 0.15s;
    transition: 0.15s;
}

[class*="btn"] {
    border-radius: 2px;
    box-shadow: 2px 2px 2px rgba(10, 10, 10, 0.2);
}

/* Invisibility on elements that are out of scope */
.screen-reader-text, .next, .prev {
    display: none;
}