/*	This is the master css of the website where all css code should go.
        NOTE: If you are using individual css for each page this should only contain the items you want to be constant throughout the website.
*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext);
@font-face {
    font-family: 'antonio';
    src: url('/styles/stylesets/201509dubegame/font/antonio-regular.eot');
    src: url('/styles/stylesets/201509dubegame/font/antonio-regular.eot?#iefix') format('embedded-opentype'),
         url('/styles/stylesets/201509dubegame/font/antonio-regular.woff') format('woff'),
         url('/styles/stylesets/201509dubegame/font/antonio-regular.svg#antonio') format('svg'),
         url('/styles/stylesets/201509dubegame/font/antonio-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'Futura';
	src: url('/styles/stylesets/201509dubegame/font/FUTURAL.woff') format('woff'), url('/styles/stylesets/dube-may2014/font/FUTURAL.ttf') format('truetype');
}

body{font-family: 'Futura',  sans-serif; font-size:1.1em; color: #564f4d; padding: 0px; margin:0px; width:100%;  background:url(/styles/stylesets/201509dubegame/images/bg.jpg);  }
img{border:0px; max-width:100%; height:auto !important;}
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {max-width: none;}
a:link, a:visited{text-decoration:none; color:#6a3b41;}
a:hover, a:active{text-decoration:none;}
h1, h2, h3, h4, h5, h6, .title, .boxtitle, .boxtitledefault{margin-bottom:5px; font-family: 'antonio', sans-serif; color: #6a3b41;}
.title, .boxtitle, .boxtitledefault{font-size:2.5em;}

h1{font-size: 3em;}
h2{font-size: 2.5em;}
h3{font-size: 1.4em; text-decoration:underline; text-decoration-color: #6a3b41 ;}

#container{width:100%; margin:0; padding:0;}
#header{width:100%;  margin:0 auto; padding:0;}
#logowrapper{max-width: 1000px; margin: auto;}
#logo{ display: inline-block; vertical-align: middle; width: 40%;}
#slogan{display: inline-block; vertical-align: middle; margin:120px 0 0 50px; width: 50%;}
#bgss{width:100% !important; margin:auto; position:absolute; border-top: 5px solid #362f2d; border-bottom:5px solid #362f2d; text-align: center;}
#bgss img{height:650px !important;max-width:none;margin-top:0px !important;}

#navwrapper{ }
#nav{font-size:1.5em; text-align:center; width:100%;  position:absolute; z-index:1000; font-family: 'antonio';  background: #342e2c; height:140px; margin: -180px 0 0 0; border-top: 5px solid #000000; border-bottom:5px solid #000000; }
#nav ul{display:inline-block; padding:0px; margin:auto; list-style:none; max-width: 1000px; }
#nav ul li{display:inline-block; padding:0px; margin:0px; list-style:none;}
#nav ul li a{padding:0px 20px; margin:0px;  color:#e5d6ab;; line-height:140px; display:block; font-weight:bold;}
#nav ul li a.active{text-decoration:none; border-bottom: 7px #e5d6ab solid;}
#nav ul li a:link, #nav ul li a:visited{}
#nav ul li a:hover, #nav ul li a:active{text-decoration:none; border-bottom: 7px #e5d6ab solid; background: #564f4d;}
#nav ul li ul{position: absolute; z-index:1001; background:#3a3331; display: block; padding:0px; margin:0; list-style:none; width: 300px; max-width: 300px;}
#nav ul li ul li{display:block; text-align: left;}
#nav ul li ul li a{line-height:50px;}

.boxtitledefault{text-decoration:underline; text-decoration-color: #6a3b41 !important; font-size: 1.4em !important; }

#quicklinks{background:#efefef; border:1px solid #cfcfcf;}
#quicklinks ul, #quicklinks li{list-style:none; display:inline;}
#contentmask{width:100%; height:100%; margin: 30px auto 0; }
#contentbox{max-width:1000px; margin:0 auto; padding: 0 10px;}
#sidebar{max-width:1000px;margin:0 auto; padding: 0 10px;}
#footer{width:100%;margin:0; padding:0;}
#footer #copytext{text-align:center; line-height:3em; height:3em; font-size:0.8em;}

.clearboth{clear:both;}
.list_row1{padding:5px;border-bottom:1px solid rgba(0,0,0,0.1); background-color:rgba(200,200,200,0.1); border-top:1px solid rgba(0,0,0,0.1);transition: 0.3s ease-in-out;}
.list_row2{padding:5px;background-color:rgba(250,250,250,0.1);transition: 0.3s ease-in-out;}
.highlight, .list_row1:hover, .list_row2:hover{background-color:rgba(255,255,255,0.9);}
form{ background: rgba(50,50,50, 0.3); border: solid 1px rgba(50,50,50, 0.5); margin:2px;padding:5px;border-radius:5px;}
.buttons{display:inline-block;padding:4px 2px 4px;font-size:0.9em;line-height:1.1em;color:#303030;text-align:left;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#fefefe;background-image:linear-gradient(#fefefe, #e0e0e0);border:1px solid #a0a0a0;border-bottom-color:#505050;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);margin:1px;}
.buttons:hover{box-shadow:0 0 4px #808080;background-color:#e0e0e0; background:linear-gradient(#e0e0e0, #e0e0e0 25%, #fefefe);}
input[type="text"]{cursor:text;}
input[type="submit"]{cursor:pointer;}
input[type="reset"]{cursor:pointer;}
input[type="checkbox"]{cursor:pointer;}
textarea{cursor:text;}
select{cursor:pointer;}

@media screen and (max-width:1200px){
    
}

@media screen and (max-width:1100px){
    
}

@media screen and (max-width:1000px){
    #map-canvas{ width: 90% !important; margin:0 !important;}
     #nav{font-size: 1.3em; }
     #nav ul li a{padding:0px 15px;}
}

@media screen and (max-width:900px){
    
}

@media screen and (max-width:800px){
    #navwrapper{height: auto; text-align: left !important; }
    #nav{font-size:1.2em; text-align:left; height:auto !important; margin: -100px 0 0 0; padding: 0; }
    #nav>ul{ display:none; text-align:left; list-style:none;  }
    #nav>ul>li{ display:block; text-align:left; padding: 0 !important;}
    #nav>ul>li>a{padding: 0px 10px 5px !important; line-height: 50px;}
    #nav>ul>li>ul{ display:block !important; position:relative; padding: 0px !important;  width: auto; background: none !important; width: 100%; max-width: 100%;  }
    #nav>ul>li>ul>li{  width:100% !important; text-align:left; display:block !important; background: none !important; padding: 0 !important;  }
    #nav>ul>li>ul>li>a{line-height:43px; color:#ffffff; display:block !important; padding: 0px 0 0 10px !important;  font-size: 1em; text-align: left; }
    #navButton{display:block;background: url('/styles/stylesets/201509dubegame/images/navButton-light.png')no-repeat center ; width:43px; height:43px; cursor:pointer;  padding: 0 !important; transition: ease-in-out 0.5s; }
    #navButton:hover{background: url('/styles/stylesets/201509dubegame/images/navButton-dark.png') center  no-repeat  #ffffff;  padding: 0 !important; transition: ease-in-out 0.5s; }
    #ddb_left_column{ float: none !important; width: auto !important; display: block !important;}
    #ddb_right_column{ float: none !important; width: auto !important; display: block !important;}
}

@media screen and (max-width:700px){
    
}

@media screen and (max-width:600px){
    #map-canvas{ width: 80% !important; margin:0 !important;}
    #logo{ display: block; width: 100%; margin: auto; text-align: center;}
    #slogan{display: block; margin:20px auto 10px; width: 60%; text-align: center;}
}

@media screen and (max-width:500px){
    h1{font-size: 2.2em;}
    
}

@media screen and (max-width:400px){
    h1{font-size: 2em;}
}

@media screen and (max-width:360px){
    #logo{width: 80%;}
    #slogan{width: 70%;}
}