/* NOTE; specs for #wn in head of demo too */
div#wn {
position: relative;
width: 80%;
max-height: 175px;

background: #dadada;
border-top: 1px solid #dadada;
align-items: center;
align-content: center;
display: block;
min-width: 200px;
flex-wrap: wrap;
min-height: auto;

top: 10px;
border-top: 3px solid #dadada;
border-bottom: 3px solid #dadada;
}
div#wn {

    position: relative;
    width: 100%;
    max-height: 175px;

    background: 

#dadada;

border-top: 2px solid

    #dadada;
    align-items: center;
    align-content: center;
    display: block;
    min-width: 200px;
    flex-wrap: wrap;
    min-height: auto;
    top: 15%;
    margin: 0 auto;
    height: 300px;

}

/* styles to display list items horizontally */
ul#horiz {
    list-style:none; margin:0; padding:0;
    white-space:nowrap;
    }
ul#horiz li {
    display:inline;
    white-space:nowrap;
    }
    
/* style scrollLinks to suit your taste and layout. */
div#scrollLinks {
position: relative;
max-width: 88%;
margin-top: -45px;
min-width: 100px;
left: 6%;
right: 6%;
    }
div#scrollLinks .left {
    background:url('../images/tri-lft.gif')no-repeat center left;
    background-repeat:no-repeat;
	background-size: 1.5vmin;

width: 35%;
height: 100px;
position: absolute;
left: 0px;
opacity: 0.8;
top: -100px;
padding-top: 0;
    }
div#scrollLinks .right {
    background: url('../images/tri-rt.gif')no-repeat center right;
    background-repeat:no-repeat;
	background-size: 1.5vmin;
  
width: 35%;
height: 100px;
position: absolute;
right: 0px;
opacity: 0.8;
top: -100px;
padding-top: 0;
    }

/* safari, chrome, opera have very prominent outline by default 
   opera shows outline movement with scrolling and won't allow none
   set to suit your page design
*/
div#wn:focus {
    outline:1px dotted #eee;
    }