/* Global stuff */

* {
	color: #686057;
	margin: 0;
	padding: 0;
	font-family: "Tauri", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1.0em;
    text-align: justified   
}

a {
	color: #686057;
	text-decoration: none;
    font-weight: 700;
}

a:hover {
	color: #a39989;
}

b {
    font-weight: 700;
}

@font-face {
	font-family: IncImpact;
    src: url(../text/impact.ttf);
}

h1 {
	#color: #d7e4e9;
    color: #686057;

    font-family: IncImpact;
	font-style: normal;
	font-weight: 400;

	padding: 1.0em 0.0em 1.0em 0.0em;
    font-size: 4.5em;
    letter-spacing: 3px;
    
    text-decoration: none;
    text-align: center;
}

h1 img {
    padding: 0.0em 0.3em 0.0em 0.2em;
}


/* Body - the whole page */
body {
	background: #dec994;
    min-width: 1150px;
	width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0%;
    
    text-align: justify;
    font-size: 1.25em;
    
    background-image:url('../images/BottomGradient.png');
    background-position:bottom;
    background-repeat:repeat-x;

}
#backgroundtop {
	width: 100%;
}

#bottom {
    background-size: 100%;
    background-image:url('../images/backgroundbot.png');
    background-repeat:no-repeat;
    
    width:100%;
}

#content {
	margin-right: auto;
	margin-left: auto;
	position: relative;
    max-width:55%;
	min-width:55%;
    line-height: 110%;
}

#nav {
	position: fixed;
    right:0;
    top: 10%;
    
    line-height: 110%;
    list-style-type: none;
    text-align: right;
    background-color:#dec994;
    padding: 1.0em;
}

#nav ul{
    list-style-type: none;
}

.container{
    min-height: 300px;
    padding: 9.0em 0.0em 1.0em 0.0em;
}


/* responsive video frame */
.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


#downloadlist {
    height:200px;
    list-style-type: none;
    width:100%; 
    text-align: center;
}
#downloadlist li {
    float: left;
    width: 20%;
    padding-top: 2.0em;
    opacity: 1;
    
}

#downloadlist img {
    width: 45%;
    padding: 0.5em;
	/*
    background-image:None;
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;
    */
}

#downloadlist li:hover {
	opacity: 0.6;
    /*
    background-image:url(../images/BUTTSFaceLogoBG.png);
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;
    */
}
#downloadlist li:active {
	opacity: 1;
    /*
    background-image:url(../images/BUTTSFaceLogoBG.png);
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;
    */
}

#changelist {
    padding-left: 1.5em;
}

#thumbnaillist {
	margin-right: auto;
	margin-left: auto;
    height: 200px;
    list-style-type: none;
    width:100%; 
    text-align: center;
}

#thumbnaillist li {
    float: left;
    width: 20%;
}
#thumbnaillist img {
	width: 90%;
	opacity: 0.6; 
}

#thumbnaillist img:hover {
	#box-shadow: 0px 0px 10px black; 
    opacity: 1;
}


#contactlist {
    list-style-type: none;
    width:100%; 
    text-align: center;
    font-size:1.0em;
}
#contactlist li {
    dispay: block;
    float: left;
    width: 33%;
}
#footer {
    text-align: center;
    margin-top: 5.0em;
    margin-bottom: 5.0em;
    margin-left: auto;
    margin-right: auto;
    font-style: italic;
    width: 100%;
}


/* for internet explorer */
a:active, a:selected, a:visited, a:focus { 
    border: none;
    outline: none;
}
img {
	border: none;
    outline: none;	
}



/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 5%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}



/* FOR MOBILE */
@media only screen and (max-width: 320px) and (max-width: 480px) and (max-width: 720px) and (max-width: 768px) and (max-width: 800px) {
    #content {
        max-width:90%;
        min-width:90%;
    }
    #nav {
        font-size: 1.8em;
    }
}