html {
/* Help those webfonts like all nice and contrasty on OSX particularly. Windows should smooth by default. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* FOUT Fix - has class by default, removed by fonts.js on fonts load */
.tankfont-loading .tankfont {
color:transparent !important;
}
.tankfont-typewriter { font-family: "Typewriter Condensed"; }
.tankfont-gotham { font-family: "Gotham Rounded"; }
.tankfont-gotham-light { font-family: "Gotham Rounded"; font-weight:200; }
.tankfont-gotham-light-ital { font-family: "Gotham Rounded"; font-weight:200; font-style: italic; }
.tankfont-gotham-medium { font-family: "Gotham Rounded"; font-weight:400; }
.tankfont-gotham-medium-ital { font-family: "Gotham Rounded"; font-weight:400; font-style: italic; }
.tankfont-gotham-book { font-family: "Gotham Rounded"; font-weight:300; }
.tankfont-gotham-book-ital { font-family: "Gotham Rounded"; font-weight:300; font-style: italic; }
/* FOUT Fix - has class by default, removed by fonts.js on fonts load */
.tankfont-loading .tankfont {
color:transparent !important;
}
a, img { border: none; }
img {
max-width:100%;
}
html, #menu {
background-color:#F9F9F9;
}
body {
position:relative;
background: white;
margin:0;
position:relative;
color:#2C200E;
width:1080px;
padding:15px;
padding-top:0;
margin: auto;
border:1px solid #E6E6E6;
-webkit-border-radius: 0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px;
border-radius: 0 0 20px 20px;
margin-bottom: 100px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
max-width:100%;
}
#menu-spacer {
padding-top:127px;
padding-bottom:9.3%;
height:0;
}
/* Deliberately seperating ".container" and ".body" so that ".body" can be overridden at at module-level. */
.body {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
padding:0 3.817%; /* = 40px @ 1048px body width */
padding-bottom:55px;
padding-top:45px;
width:100%;
min-height:200px;
}
.container, .body {
margin:auto;
}
#menu {
z-index:99;
position:fixed;
top:0; left:0; right:0;
margin:auto;
width:1080px;
max-width:100%;
}
#country-tag {
position:absolute;
top:-10px; right:7%;
max-width:11.1%; /* Full width @ 1080px */
min-width:100px;
}
#menu-padder {
border:1px solid #E6E6E6;
background-color:white;
padding:15px;
padding-bottom:3px;
margin-top:15px;
-webkit-border-radius: 20px 20px 0 0;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
border-bottom:none;
}
#menu-banner {
border:1px solid #E6E6E6;
-webkit-border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
border-radius: 15px 15px 0 0;
border-bottom:0;
overflow:hidden;
text-align: center;
background-color:#E4DED1;
padding:0 3%;
}
#menu-logo {
margin-top:30px;
margin-bottom:20px;
width:64%;
}
#menu-navbar {
margin-top:2px;
display:table;
width:100%;
}
#hamburger {
display:none;
}
.navbar-item {
display:table-cell;
text-align:center;
vertical-align: middle;
font-size:14px;
background-color:#F1EEE8;
border-right:2px solid white;
height:42px;
}
.navbar-item:last-child {
border-right:0;
}
.navbar-item:hover, .navbar-item.active {
background-color:#FCFCFA;
}
#home-button {
font-size:0;
min-width:26px;
}
#foot {
display:table;
width:auto;
background-color:#E4DED1;
padding:15px 30px;
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
-webkit-border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
border-radius: 0 0 15px 15px;
}
#foot-left {
text-align: left;
font-size:11.5px;
color:#2C200E;
}
#foot-center {
line-height:0;
text-align: center;
word-spacing:5px;
white-space: nowrap;
}
#foot-right {
text-align:right;
line-height:0;
font-size:0;
}
#foot-left, #foot-right, #foot-center {
display:table-cell;
width:33.33%;
vertical-align: middle;
}
.footer-link {
display:inline-block;
}
a {
color:inherit;
text-decoration:none;
}
p, h1, h2, h3, h4, h5, h6 {
margin:0;
}
a img {
border:none;
}
/* Bootstrap Bits */
.text-right { text-align:right; }
.text-left { text-align:left; }
.text-center { text-align:center; }
.pull-left { float:left; }
.pull-right { float:right; }
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
@media all and (max-width: 1080px) {
#menu-padder, body {
border:none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-top:0;
}
#menu-spacer {
padding-top:112px;
}
#country-tag {
top:-22px;
}
}
/* End Bootstrap Bits */
@media all and (max-width: 1000px) {
#country-tag {
right:3%;
}
}
@media all and (max-width: 850px) {
#country-tag {
right:1%;
}
}
@media all and (max-width: 650px) {
#country-tag {
display:none;
}
}
@media all and (max-width: 750px) {
.navbar-item {
padding:0 10px;
font-size:13px;
}
/* Footer */
html {
background-color:white;
}
body, #menu-padder {
padding-left:1.6%; padding-right: 1.6%;
}
.body {
padding-top:5%;
padding-bottom:10%;
}
#foot {
position:relative;
padding-top:10px;
padding-bottom:30px;
}
#foot-left, #foot-center, #foot-right {
width:100%;
}
#foot-left, #foot-right {
text-align:center;
position:absolute;
left:0; right:0;
margin:auto;
}
#foot-left {
bottom:10%;
}
#foot-right {
top:110%;
}
#friends-link {
display:none;
}
/* END Footer */
}
@media all and (max-width: 800px) {
.navbar-item {
font-size:13px;
padding:0 5px;
}
}
@media all and (max-width: 601px) {
.navbar-item {
font-size:12px;
padding:0 10px;
}
}
@media all and (min-width: 571px) and (max-height: 601px) { /* Not a hamburger view, but too short to show any content beneath the fixed menu */
#menu {
position:absolute;
left:-1px;
max-width:none;
}
}
@media all and (max-width: 570px) and (max-height: 430px) { /* Approximately the height of the fully-open hamburger menu */
#menu {
position:absolute;
}
}
@media all and (max-width: 570px) {
#menu-spacer {
padding-top:21.2%; /* (1.6% * 2) + 4% + 3% + 11% */
padding-bottom:0;
}
/* Menu */
.navbar-item {
margin:0 4%;
width:92%;
border:none;
border-bottom:1px solid #E4DED1;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
padding:13px 20px;
text-align:left;
display:block;
}
#country-tag, #tag-map {
display:none;
}
#menu-padder {
padding:1.6%;
margin-top:0;
}
#menu-banner {
position:relative;
text-align:left;
}
#menu-logo {
margin-top:4%;
margin-bottom:3%;
/*margin:3.12%;*/
margin-left:5.15%;
width:75%;
}
#menu-navbar {
display:none;
margin-top:5px;
background-color:#F1EEE8;
padding-bottom:8px;
}
#hamburger {
display:block;
background:none;
border:none;
position:absolute;
top:0;
bottom:0;
right:5%;
margin:auto;
}
/* END Menu */
}