@import url(https://fonts.googleapis.com/css?family=Megrim|Iceland);
/* LITS SPLASH PAGE 4 BY DRAEBOX.COM, 2015. UPDATED SEPTEMBER 2015 TO INCLUDE FLEX TECHNOLOGY. */
body {
background: #212136;
color: #bbbbc8;
font-size: 100%;
font-family: 'Iceland', cursive;
margin: 0px;
padding: 0px;
width: 100%;
height:100%;
border: 0px;
word-wrap: break-word;
}

#logo {
font-family: 'Megrim', cursive;
font-size: 3em;
color: #fff;
text-shadow: 1px 1px 8px #6cc9f1;
margin: 56px auto 26px;
text-align: center;
}

#logo a,#logo a:visited,#logo a:hover,#logo a:active {
color: #fff;
text-decoration: none;
}

a,a:visited,a:active {
color: #fff;
text-decoration: none;
font-weight: bold;
}

a:hover {
text-decoration: none;
font-weight: bold;
color: #6cc9f1;
}

/* VARIOUS CONTENT CONTAINERS */

#wrapper { /* MAIN & VISUAL WRAPPER */
max-width: 1820px;
margin: 0px auto 4px;
border: 1px solid #000;
background: url(http://skins.draebox.com/images/lits/lits3_wrapper.png) no-repeat top center #0b1940;
padding: 0px;
}

#internalwrapper {
max-width: 1800px;
background: #060d1f;
padding: 0px;
margin: 2px auto 2px;
border: 1px solid #000;
opacity: 0.6;
display: flex; /* SEPT 2015 FLEX TECH */
flex-flow: row wrap; /* SEPT 2015 FLEX TECH */
justify-content: center; /* SEPT 2015 FLEX TECH */
align-items: stretch; /* SEPT 2015 FLEX TECH - ALTERNATIVE: CENTER */
align-content: stretch; /* SEPT 2015 FLEX TECH - ALTERNATIVES: SPACE-BETWEEN OR SPACE-AROUND */
flex: 1 100%;
}

#ccentre {
background: transparent;
border: none;
padding: 4px;
padding-bottom: 4px;
margin: auto; /* 50px 12% 10px 12%; */
width: auto;
display: flex-inline; /* SEPT 2015 FLEX TECH */
flex: 1 100%; /* SEPT 2015 FLEX TECH */
}

#tweets {
background: transparent;
padding: 12px;
display: flex-inline;
position:left;
/* margin-left: 12px; */
/* margin-top: 22px; */
margin: auto;
width: auto;
padding: 4px;
height: 100%;
border: none;
font-size: 1.600em; /* RESPONSIVE TEXT SIZE */
line-height: 1em;  /* This keeps the line height proportional to the font size */
display: inline-flex; /* SEPT 2015 FLEX TECH */
flex: 1 100%; /* SEPT 2015 FLEX TECH */
}

/* SHOUTBOX OPTION - RIGHT SIDE OF MAIN CONTAINER */
#sbx {
background: transparent;
padding: 12px;
position: right;
/* margin-right: 12px; */
margin-top: 22px; */ 
margin: auto;
width: auto;
padding: 4px;
height: 100%;
border: none;
font-size: 1.600em; /* RESPONSIVE TEXT SIZE */
line-height: 1em;  /* This keeps the line height proportional to the font size */
display: inline-flex; /* SEPT 2015 FLEX TECH */
flex: 1 100%; /* SEPT 2015 FLEX TECH */
}

/* SECONDARY SHOUTBOX OPTION - ABOVE OR BELOW MAIN CONTENT */
#shoutbox {
background: #3a3a52;
padding: 4px;
margin: 10px 230px 10px 230px;
border: 2px solid #000; width: auto;
font-size: 1.600em; /* RESPONSIVE TEXT SIZE */
line-height: 1em;  /* This keeps the line height proportional to the font size */
}

.newsbox {
line-height: 1.2;
text-align: left;
padding: 6px;
color: #222;
margin: 16px;
width: auto;
background: #bed994;
font-size: 1.600em; /* RESPONSIVE TEXT SIZE */
line-height: 1em;  /* This keeps the line height proportional to the font size */
}

.newsbox a,.newsbox a:active,.newsbox a:visited {
color: #000;
}

.newsbox a:hover {
color: 212136;
}

.newsbox em {
color: #3377b1;
}

p {
margin: 16px 12px 26px;
font-size: 1.600em; /* RESPONSIVE TEXT SIZE */
line-height: 1em;  /* This keeps the line height proportional to the font size */
width: auto;
display: inline-flex; /* SEPT 2015 FLEX TECH */
}

h1,h2,h3,h4,h5 {
font-family: 'Megrim', cursive;
text-align: left;
color: #fff;
border-bottom: 1px solid #f5f5f5;
width: 100%;
}

h1 {
font-size: 3em;
margin: 36px 6px 16px;
}

h2 {
font-size: 2.600em;
margin: 30px 6px 16px;
}

h3 {
font-size: 2.300em;
margin: 30px 6px 16px;
}

h4 {
font-size: 1.800em;
margin: 20px 6px 16px;
}

h5 {
font-size: 1.400em;
margin: 16px 6px 16px;
}

sub {
color: #606074;
text-transform: uppercase;
font-style: italic;
margin: 36px 6px 16px;
}

em {
color: #bed994;
font-weight: bold;
}


/* TABLE ELEMENTS */
table {
margin: 16px 16px 20px;
background: #000;
padding: 2px;
width: auto;
}

.cats {
background: #171735;
line-height: 1.6;
text-align: center;
font-weight: bold;
font-family: 'Megrim', cursive;
font-size: 24px;
width: 100%;
margin: 0px;
padding: 4px;
}

th {
background: #2b2b4e;
text-transform: uppercase;
font-size: 10px;
text-align: center;
padding: 4px;
margin: 0px;
max-width: auto;
}

td {
background: #555582;
text-align: left;
padding: 4px;
margin: 0px;
max-width: 50%;
}

hr {
height: 1px;
border: none;
background: #bed994;
}


/* IMAGE STUFF */
img {
border: 1px solid #1px solid #000;
max-width: 50%;
margin: 12px;
}

.left {
float: left;
}

.right {
float: right;
}


.quote {
background: #d1d1d9;
margin: 16px;
padding: 16px;
font-style: italic;
color: #222;
}

/* BUTTONS */
.button,
.button:visited,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
background: #222;
color: #fff;
display: inline-block;   
text-decoration: none;
letter-spacing: 0;   
padding: 12px 20px;
margin-bottom: 18px;
margin-right: 4px;
border: 1px solid #000;
cursor: pointer;
height: auto;
text-transform: uppercase;
letter-spacing: 2px;

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
background: #000;
color: #fff;
}

.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
background: #7A5B8F;
color: #fff;
}

.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center;
}

.dbutt {
text-align: center;
margin: auto auto;
width: auto;
height: auto;
flex: 1 100%; /* SEPT 2015 FLEX TECH */
}


#enter {
font-family: 'Megrim', cursive;
font-size: 100px;
color: #fff;
margin: auto auto;
text-align: center;
flex: 1 100%; /* SEPT 2015 FLEX TECH */
}


#thanks {
margin: 10px auto 10px;
text-align: center;
color: #f5f5f5;
text-transform: uppercase;
font-size: 14px;
}

@media screen and (max-width: 30em) {
body {
font-size: 90%;
}
}
 
@media screen and (max-width: 20em) {
body {
font-size: 80%;
}
}