/*
font-family:'Brandon Grot W01 Black';
font-family:'BrandonGrotW01-BlackIta';
font-family:'Brandon Grot W01 Bold';
font-family:'BrandonGrotW01-BoldItal';
font-family:'Brandon Grot W01 Light';
font-family:'BrandonGrotW01-LightIt';
font-family:'Brandon Grot W01 Medium';
font-family:'BrandonGrotW01-MediumIt';
font-family:'BrandonGrotW01-Regular';
font-family:'BrandonGrotW01-RegularI';
font-family:'Brandon Grot W01 Thin';
font-family:'BrandonGrotW01-ThinItal';
*/

/* Default, linear layout */

body {
    background-color:RGB(193,180,154);
    background-color:RGB(255,252,238);
    background-color:RGB(232,222,194);
    background-color:RGB(45,45,45);
}

h1, h2, h3, h4, h5, h6, p, li, caption, a, div {
    font-family:"BrandonGrotW01-Regular";
    line-height: 110%;
    font-size:100%;
}
p, li, caption, a, div {
    font-size: 1em;
}
p {
    display:block;
    padding: 0 0 1em 0;
    line-height:130%;
}
h1, h2, h3, h4, h5, h6 {
    font-family:"Brandon Grot W01 Bold";
    display:block;
    margin:0 0 .5em 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-family:"Brandon Grot W01 Bold";
    margin:0 0 .5em 0;
    color: black;
}

h1{ font-size: 2.8em;}
h2{ font-size: 1.8em;}
h3{ font-size: 1.4em;}
h4{ font-size: 1.4em;}
h5{ font-size: 1.2em;}
h6{ font-size: 1.1em;}

ul.bullet { list-style-type:disc; margin:20px;}
ul.bullet li { margin:10px 20px; }
li {
    margin: 4px 0;
}

img,
embed,
object,
video {
    max-width: 100%;
}


.right { text-align:right; }


i, .italic, .italic a, .italic span { font-family:'BrandonGrotW01-RegularI'; }
.gray { color: #a4a4a4; }
.blue { color: #008e8c; }
.red { color: #ff0000; }


#page {
    margin: 0 auto;
    max-width: 700px;
    width: 100%;
    background-color:RGB(255,252,238);
}
#header {
    width: 100%; /* 540 / 540 = 100 */
    margin: 0 auto;
    padding: 20px 0;
    text-align:center;
    clear:both;
}

#logo {
    width:100%;
    height:50px;
    background-image:url('images/logo-stripe-640.png');
    background-position: center center;
    margin: 0;
    padding: 0;
    text-align:left;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #logo { background-image:url('images/logo-stripe-640@2x.png'); background-size: auto 50px;}
}


#content{
    width:100%;
    background-color:RGB(255,252,238);
    margin:1em 0 0 0;
    padding:0;
    text-align:left;
}
#main{
    width:89%;
    margin:1em 0 0 0;
    padding:0 5.5%;
}
#leftside {
    float:left;
    width:80%;
    margin:0 0 0 2%;
}

#rightside, #welcome {
    display:block;
    text-align:center;
}
#theraKeyLogo {
    display:none;
}

#nav-foot {
    font-size:75%;
    clear: both;
    text-align:center;
    padding:10px;
}

#nav-top {
    font-size:75%;
    float:left;
    text-align:left;
    padding:2px 8px;
}

.alert{
    width:90%;
    background-color: #800;
    color:#ddd;
    margin:1em 0;
    padding:.5em 5%;
    display:block;
}
.alert a {
    background-color: #800;
    color:#fff;
    font-weight:bold;
}
.message{
    width:90%;
    background-color: #44F;
    color:#ddd;
    margin:1em 0;
    padding:.5em 5%;
    display:block;
}
.message a {
    background-color: #44F;
    color:#fff;
    font-weight:bold;
}

#header h1 { font-size:2.4em; font-family:'Brandon Grot W01 Bold'; margin-bottom:.2em;}
#header h2 { font-size:.8em; font-family:'BrandonGrotW01-RegularI';}

.tm {
    font-size:15%;
}

img.retina { display:none; } img.not-retina { display:block; }
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    img.logo-stripe-retina { display:block; } img.logo-stripe { display:none; }
}

div.screenshots {
    display:none;
}
div.screenshotspage {
    display:block;
    background-color: black;
    padding:0;
    margin:10px 0;
    border: solid 2px gray;
    text-align: center;
}
div.screenshotspage img{
    margin: 20px 2px;
    width:90%;
}


.input-text {
    display: block;
    width:100%;
    margin:.3em 0 1em 0;
}
.input-text#search_term {
    width: 60%;
}

.input-text#spam {
    width: 70px !important;
}

.input-submit {
    font-family:'Brandon Grot W01 Bold';
    font-size:1.3em;
    display: block;
    width:6em;
    padding:.3em 0;
    margin:.5em 0 1em 0;
    border: 1px solid #66e;
    background-color:white;
}
.input-submit:hover{
    border-color: #00e;
}

#contact textarea{
    padding: .5em .3em;
    height: 20em;
    width:90%;
    margin:.5em 0 0 0;
}

#contact .input-text {
    padding: .5em .3em;
    width:90%;
}
#contact .input-wrapper {
    overflow:hidden;
    width:auto;
}
#contact .input-wrapper label{
    display:block;
}
.expendable {
    display: none;
}

#slideshow_controls {
    width:100%;
}
#prev {
    float:left;
}
#next {
    float:right;
}

/* Small screen! */
@media screen and (min-width: 600px) {

    p, li, caption, a, div {
        font-size: 1.1em;
    }
    p {
        padding: .5em 0 .5em 0;
    }

    #page {
        margin: 0 auto;
        max-width: 900px;
        width: 100%; /* 600 / 600 = 100 */
        background-color:RGB(255,252,238);
    }

    #header h1 {
        font-size:3.0em;
    }
    #header h2 {
        font-size:1.2em;
    }

    #rightside {
        text-align:left;
        float:right;
        width:35%;
        margin:0 0 0 4%;
    }
    #theraKeyLogo {
        display: block
    }
    #welcome p {
        text-align:center;
        color:#555;
        font-size:55%;
        font-family:'BrandonGrotW01-RegularI';
    }
    #welcome p a {
        font-family:'BrandonGrotW01-RegularI';
    }
    #welcome {

        padding:0;
        /*border:solid #777 1px;*/
        margin: 0 auto;
    }
    div.screenshotspage {
        display:block;
        background-color: black;
        padding:0;
        margin:10px 20px;
        border: solid 2px gray;
        text-align: center;
    }
    div.screenshotspage img{
        margin:20px;
        width:92%;
    }

    .expendable {
        display: none;
    }
}

/* "Desktop"" */
@media screen and (min-width: 860px) {

    .input-text#search_term {
        width: 48%;
    }

    #page {
        margin: 0 auto;
        max-width: 1024px;
        width: 80%; /* 688 / 860 = 80 */
    }
    p, div, li {
        font-size: 1.05em;
    }

    .main {
        width:95%;
    }

    #logo {
        width: 100% /* 455 / 688 = 0.6613372093023256 */
    }
    #logo h1 {
        font-size:2.0em;
    }

    #rightside {
        width:45%;
    }
    #welcome p {
        font-size: 75%;
    }

    div.screenshots {
        display:block;
        background-color: black;
        padding:5px;
        margin:10px 20px;
        border: solid 2px gray;
        text-align: center;
    }
    div.screenshots img{
        margin:5px;
        width:45%;
    }
    div.screenshots.left {
        float:left;
        margin:10px 20px 10px 0;
    }
    div.screenshots.right {
        float:right;
        padding:10px;
        margin:10px 0 10px 20px;
    }
}

/* IT'S OVER 9000' */
@media screen and (min-width: 1200px) {
}

/******************************************/
/* feeback - alerts and messages
/******************************************/
.glsFeedback {
    display: block;
    overflow:hidden;
    width:auto;
    color:black;
    margin:1em 0;
    padding:.5em 10px;
}
.glsFeedback a {
    background-color: inherit;
    font-weight:bold;
}
.glsFeedback.hidden {
    display:none;
}
.glsAlert {
    display:block;
    background-color: #eff;
}
.glsError {
    background-color: #fee;
}
.glsInfo {
    background-color: #efe;
}
.glsMessage {
    background-color: white;
    color: #333;
    padding:.5em 0;
}
.glsWarning {
    background-color: #feb;
}
.glsDismiss {
    font-family:'HightowerTextW00-Italic';
    text-align:right;
    font-size:80%;
    margin-top:3px;
}
/* mockup.php */
div.mockup div#content div#main div.question {
  line-height: 1.3 !important;
}

.mockup .qHead {
  font-family:"Brandon Grot W01 Bold";
  font-size: 1.3rem;
}
.mockup em {
  font-family:"Brandon Grot W01 Bold";
}
.mockup .qField {
  width: 90%;
  height: 3rem;
}
.mockup .helper {
  color: #999;
  font-family:'BrandonGrotW01-RegularI';
  display: inline;
}
.mockup .question {
  margin: 1rem 0;
}
.mockup .answer {
  background-color: yellow;
}
.mockup #main {
  padding-bottom: 3rem;
}