html {
    width:100%;
    background-color: #eee;
    font-family: sans-serif;
}
body {
    width:99%; /* weird - causes scroll if 100% */
    margin:0px;
    padding:0px;
    margin-bottom:40px;
}
a {
    text-decoration: none;
    outline: none;
}
img {
    color: transparent;
    background: transparent;
}
header {
    position:relative;
    height:100px;
    width:100%;
    display:inline-block;
    text-align:left;
    vertical-align: top;
}
#logo {
    vertical-align: top;
    height:90%;
    margin:.5em;
    margin-left:.8em;
    border:none;
}
a {outline:none;}
#host {width:100%; text-align:center;}
#host img {width:50%; max-width:250px; margin-bottom:-1em;}
header h1 {display:none;}
h1, h2 {
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    font-style: italic;
    color:#bbb;
}
.subhead {margin: 1em 0px;}
h2 a {
    color:#888;
    text-decoration: none;
}
h2 a:hover {
    color:#e472c4 !important;
}
.button:hover {
    border:2px #e472c4 solid !important;
}
.info {
    background-color: #444;
}
.info p {
    margin-top:2.5em;
}
.info img {
    padding-bottom:.4em;
}
.info p:nth-child(2) {
    margin-top:2em;
}
.info {
    padding-bottom:1.6em !important;
}
.examples {
    background-color: #111;
}
.about {
    background-color: #333;
    position:relative;
    z-index:2;
    margin-top:1.8em;
    padding:20px;
    text-align: left;
    border-radius: 1.8em;
    font-size:1em;
    color:#aaa;
    margin-bottom:1.5em;
    box-shadow: 6px 6px 14px rgba(0,0,0,.1);
}
#features li {list-style-image: url(../tri/yes.png);}
#applications li {list-style-image: url(../tri/yesP.png);}
.aboutBar {
    text-align:left;
    position:relative;
    padding:5px;
    border-bottom: #888 solid 1px;
    color:#bbb;
}
.aboutTitle {
    display: inline-block;
    font-style: italic;
}
.about a {
    color:#d1a170;
    text-decoration: none;
    padding:0px 6px;
    margin:2px 0px;
}
.about a:hover {
    color:white;
    background-color:#e472c4;
}
.review {
    background-color: #e472c4;
    padding:10px;
    margin:10px;
    margin-bottom:20px;
    color:white;
}
.review p:first-child {
    margin:0px 0px;
}
.review p:last-child {
    margin:.3em 0px;
    font-style: italic;
}
.info, .examples {
    position:relative;
    z-index:2;
    margin-top:-1.8em;
    padding:20px;
    text-align: center;
    border-radius: 1.8em;
    font-size:1em;
    color:#CCC;
    margin-bottom:3em;
}
.info a {
    color:#5addce;
    text-decoration: none;
    padding:0px 6px;
    margin:2px 0px;
}
.info a:hover {
    color:white;
    background-color:#e472c4;
}
.imageLink {
    background-color: transparent !important;
}
.imageLink:hover {
    background-color: transparent !important;
}
#start img, #help img {
    width:100%;
    max-width: 200px;
}
#archives img {
    width:100%;
    max-width: 400px;
    margin-bottom:.5em;
}
#tools img {
    width:100%;
    max-width: 200px;
}
.infoBar {
    text-align:left;
    position:relative;
    padding:5px;
    border-bottom: #ccc solid 1px;
    color:#DDD;
}
.infoTitle {
    display: inline-block;
    font-style: italic;
}
.infoClose {
    position:absolute;
    right:10px;
    background-color: #ccc;
    display: inline-block;
    font-size: .8em;
    top:2px;
    color:#666 !important;
    padding:3px 14px !important;
}
.infoClose:hover {
    color:white !important;
}
#show {
    position:absolute;
    right:4em;
    top:-2.5em;
    display:none;
    font-size:.8em;
    color:#777;
    text-decoration: none;
    background-color: white;
    padding:3px 10px;
}
#show:hover {
    color:white;
    background-color:#e472c4;
}

.promoNews {
    background-color:#f58e25;
}
.promoCode {
    background-color:#50c4b7;
}
.promoLearn {
    background-color:#acd241;
}
.promoAbout {
    background-color:#d1a170;
}
.promoExamples {
    background-color:#888;
}
.promoGold {
    background-color:#ebcb35;
}

.promoNews:hover {
    background-color:#e472c4;
}
.promoCode:hover {
    background-color:#e472c4;
}
.promoLearn:hover {
    background-color:#e472c4;
}
.promoAbout:hover {
    background-color:#e472c4;
}
.promoExamples:hover {
    background-color:#e472c4;
}
.promoGold:hover {
    background-color:#acd241;
}
figcaption {
    padding:10px;
    text-align:center;
    /*text-transform: uppercase;*/
}
figcaption a:first-child {
    font-style: italic;
}
figcaption a {
    color:white;
    text-decoration:none;
}
.arrow::after {
    content: "\25B6 \FE0E";
}
#title {
    position:relative;
    display:inline-block;
    font-style: italic;
    font-weight: bold;
    font-size:1.5em;
    height:90%;
    margin:.5em;

}
h3 {
    display:inline-block;
    padding:0px;
    margin:0px;
    bottom:0px;
    position:absolute;
    color:#666;
}
#content {
    padding:1.5em 2em;
    font-family:sans-serif;
    font-size: 1.5em;
    color:#777;
    position: relative;
}
#bubbling {
    margin-bottom:1.5em;
}
#bubbling, #blog {
    width:100%;
    max-width:776px;
    box-shadow: 5px 5px 15px rgba(0,0,0,.2);
}
@media screen and (orientation:portrait) {
    #sublogo {width:50%;}
    h1 {
        font-size:2.2vh;
        height:2.2%;
    }
    h2 {
        font-size:2.0vh;
        height:2.2%;
    }
    figcaption {
        font-size:2.2vh;
    }
    #tagline {
        margin-top:0px;
        margin-bottom:1em;
    }
}
@media screen and (orientation:landscape) {
    #sublogo {width:50%;}
    h1 {
        font-size:3.2vh;
    }
    h2 {
        font-size:3.0vh;
    }
    figcaption {
        font-size:3.2vh;
    }
    #tagline {
        margin-bottom:1.5em;
    }
}
#tagline {
    font-size:1em;
    color:#666;
    text-align: center;
}
footer {
    text-align: center;
    margin-top:2em;
}
footer img {
    width:200px;
}
footer #socialmedia {
    width:100%;
    text-align:center;
    margin-bottom:2em;
}
footer #socialmedia img {
    width:8%;
    max-width:3em;
    margin-bottom:.5em;
    opacity: .6;
    filter: alpha(opacity=60);
}

footer #socialmedia img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.thumbs {padding-top:.7em;}

.thumbs div {
	width:200px; height:240px; text-align:center;
    display:inline-block;
    padding:.4em .4em; margin:1em 0px;
	font-size: .8em;
}

.thumbs a {text-decoration:none; color:#ccc;}
.thumbs a:hover {color:#f58e25;}

.thumbs div img {
    width:200px !important;
	margin-bottom:.2em;
}