main {
    margin-left:auto; 
    margin-right:auto;
    margin-bottom:0vw;  
    padding:.5vw 3vw 3vw 3vw;
    font-family:sans-serif;
    font-size:24px;
    text-align:center;
    color:#777;
    position:relative;    
    max-width:1400px;      
}
.gradient {
    background-image: linear-gradient(#123, #111);
}

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 {
    color:#ccc;
    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;
}

figcaption {
    color:white;
    padding:10px 0px 7px 0px;
    text-align:center;
    height:3vh;
    vertical-align: center;
    font-size:2vh;
    /*text-transform: uppercase;*/
}
#top {
    color:white;
    padding:10px 0px 7px 0px;
    text-align:center;
    height:3vh;
    vertical-align: center;
    font-size:2vh;
    background-color:#acd241;
}
figcaption a:first-child {
    font-style: italic;
}
figcaption a {
    color:white;
    text-decoration:none;
}
.arrow::after {
    content: "\25B6 \FE0E";
}



#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) {
    
    h1 {
        font-size:2.2vh;
        height:2.2%;
    }
    h2 {
        font-size:2.0vh;
        height:2.2%;
    }
    #info {
        margin-top:0px;
        margin-bottom:1em;
    }
}
@media screen and (orientation:landscape) {    
    h1 {
        font-size:3.2vh;
    }
    h2 {
        font-size:3.0vh;
    }
}
#tagline {
    /* margin-bottom:1.5em; */
    color:#666;
    text-align: center;
}

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

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

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

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

 
 @media all and (max-width: 640px){
    /* these styles show if screen width is less than or equal to 640 */
    section {       
        border-radius: 3vw !important;   
        margin-bottom: 6vw !important;
    }
    section a {
        padding:0px .7vw !important;
        margin:.2vw 0px !important;    
    }      
    #title h3 {
        width:100px;
        font-size:20px;
        background-position:6px -8px;
        top:2px;
    }    
    nav {        
        width:95% !important;       
    }
    nav a {
        font-size:10px !important;
        margin:7px 1px 2px 1px !important;
        padding:4px 2px 3px 2px !important;
    }
    .thumbs {
        text-align:center !important;
    }
    .thumbs div {   
        margin:0px .8vw !important; 	
        width:80px !important; 
        height:110px !important; 
        text-align:center !important;
        font-size:10px !important;
    }
    .thumbs div img {
        width:80px !important;
    	margin-bottom:.2em;    
    }
    ul, ol {margin-left:-4vw}
    main, section, li, h3 {
        font-size:16px !important;
    }
    #titlebar {
        font-size:30px;
        margin-bottom:0px !important;
    }
 }
 
 @media all and (min-width: 640px) and (max-width: 900px) {
    /* these styles show if screen width is between 640 and 900 */             
    #tagline {
        font-size:2.5vw !important;
    }     
    nav {        
        width:90% !important;       
    }
    nav a {        
        font-size:14px !important;
        padding:4px 5px 3px 5px !important;
    }
    main, section, li, h3 {
        font-size:20px;
    }
    .thumbs {
        text-align:center !important;
    }
    .thumbs div {   
        margin:0px .8vw !important; 	
        width:80px !important; 
        height:110px !important; 
        text-align:center !important;
        font-size:10px !important;
    }
    .thumbs div img {
        width:80px !important;
    	margin-bottom:.2em;    
    }    
 }
  

 section {                
     position:relative;
     color:#bbb;     
     z-index:2;
     margin-top:0px;
     margin-bottom:0px;
     padding:2vw;
     text-align: left;
     border-radius: 25px;     
     box-shadow: .4vw .4vw 2vw rgba(0,0,0,.1);
 }
 section a {
     text-decoration: none;
     padding:0px 3px;
     margin:3px 0px;    
 }  
 section a:hover {
    color:white;
    background-color:#993399;
}



 #host {
     width:100%; 
     text-align:center;
     margin-top:0vw; 
     margin-bottom:0px;
 }
 #host img {
     width:50%; 
     max-width:250px;
 }
 
 nav {
     /* padding:.4vw 0vw 0vw 0vw; */
     background-color:#123;  
     margin:auto;
     margin-top:3.5vw !important;
     margin-bottom:1.8vw;
     width:85%;
     max-width:900px;
     text-align:center;
     position:relative;
     z-index: 1;
 }

 nav:first-of-type {
      margin-top:0px !important;
 }
 
 nav a {
     overflow:hidden;     
     text-align: center;     
     margin:7px 4px 2px 3px;
     padding:4px 15px 3px 15px;
     border-radius:0px;
     font-size:15px;
     color:#dddddd;        
     text-transform: uppercase;
     text-decoration: none;
     display:inline-block;
 }
 nav a:hover {                
     color: #61b1e0;
 }

 .selected {
    border-radius:0px;
    border:thin solid #aaaaaa;
    color: #dddddd !important;
}