/*
::colors::
navy = #001f3f
blue = #0074D9
aqua = #7fdbff
teal = #39cccc
olive = #3D9970
green = #2ECC40
lime = #01FF70
yellow = #FFDC00
orange = #FF851B
red = #FF4136
maroon = #85144b
fuchsia = #F012BE
purple = #B10DC9
black = #111111
gray = #AAAAAA
silver = #DDDDDD
white = white

::theme::
title = blue
fg = white
bg = blue
hover = aqua
*/

h1,h2,h3 {color:#0074D9}

input {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    vertical-align: middle;
    box-sizing: border-box;
}

input[type=search] {
    border-radius: 2em;
    padding: 0.5em 1em;
    font-size:0.8em;
}

input:focus {
    outline: 0;
    border-color: #129FEA;
}

#content {margin:0 1em}

#videos, #pros {
    display:flex;
    flex-wrap:wrap;
}

#videos p, #pros p {
    font-size:14px;
    padding-right:5px;
    width:150px;
}

#videos img, #pros img {
    border-radius:15px;
    transition: all .2s ease-in-out; 
}

#videos img:hover, #pros img:hover {
    transform: scale(1.1);
}

#videos a, #pros a {
    text-decoration:none;
}

#pro_header {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-end;
    margin-right:3em;
}

#pro_header h1 {
    margin-right:auto;
    white-space:nowrap;
}

.youtube_iframe {
    display:block;
    margin:0 auto;
}

dialog {
    border-radius:5px;
    border: 5px solid #0074D9;
    box-shadow: 0 2px 10px rgba(0,0,0,0.8);
    text-align:center;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

/*!
Pure v1.0.0
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/yahoo/pure/blob/master/LICENSE.md
*/
.pure-table {
    /* Remove spacing between table cells (from Normalize.css) */
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}

.pure-table caption {
    color: #000;
    font: italic 85%/1 arial, sans-serif;
    padding: 1em 0;
    text-align: center;
}

.pure-table td,
.pure-table th {
    border-left: 1px solid #cbcbcb;/*  inner column border */
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible; /*to make ths where the title is really long work*/
    padding: 0.5em 1em; /* cell padding */
}

.pure-table thead {
    background-color: #0074D9;
    color: white;
    text-align: left;
    vertical-align: bottom;
}

.pure-table-bordered td {
    border-bottom: 1px solid #cbcbcb;
}
.pure-table-bordered tbody > tr:last-child > td {
    border-bottom-width: 0;
}

/*!
Pure v1.0.0
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/yahoo/pure/blob/master/LICENSE.md
*/
.pure-button {
    /* Structure */
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 100%;
    padding: 0.5em 1em;
    color: white; /* rgba supported */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #0074D9;
    text-decoration: none;
    border-radius: 2px;
}

.pure-button-hover,
.pure-button:hover,
.pure-button:focus {
    /* csslint ignore:start */
    filter: alpha(opacity=90);
    /* csslint ignore:end */
    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.pure-button:focus {
    outline: 0;
}
.pure-button-active,
.pure-button:active {
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
    border-color: #000\9;
}