Difference between revisions of "Common.css"

Revision as of 04:22, 5 March 2018

body {
font-family: 'Exo 2', sans-serif;
color: white;
font-size: 1rem;
font-weight: 300;
line-height: 2em;
background-image: url("http://www.conflictnations.com/fileadmin/templates/conflictnations/forum/bg.jpg");
background-repeat: round;
background-attachment: fixed;
}

p {
font-family: 'Exo 2', sans-serif;
font-size: 1rem;
font-weight: 300;
line-height: 2em;
}

dl, dt, dd, ol, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
font-family: 'Exo 2', sans-serif;
color: white;
}

ul {
display: inline-block;
list-style-type: square;
}

h2 ul {
margin: 0px !important;
}

h3 ul {
margin: 0px !important;
}

li ul {
display: block;
}

li {
font-size: 1rem;
color: white;
}

ol {
list-style: lower-alpha;
}

.toc li {
list-style-type: none;
}

.top-bar-section ul li {
list-style: none;
}

#footer-left li {
list-style: none;
}

.f-dropdown li {
list-style: none;
}

a {
font-weight: 500;
color: #4f97a5;
}

/* ============================================================HEADERS AND CONTENT ELEMENTS */

h1 {
font-size: 28px;
text-align: left;
color: white;
}

h2 {
font-size: 18px;
font-weight: 400;
text-align: left;
color: white;
clear: both;
background-color: rgba(79, 151, 165, 0.7);
width: 265px;
vertical-align: middle;
padding-top: 8px;
padding-bottom: 6px;
padding-left: 6px;
margin-bottom: 24px;
}

h3 {
font-size: 1rem;
font-weight: 400;
text-align: left;
float: left;
clear: both;
background-color: rgba(79, 151, 165, 0.7);
margin-bottom: 0px;
}

h4 {
border-top: solid 1px rgba(79, 151, 165, 0.6);
display: block;
clear: both;
line-height: 17px;
text-align: right;
padding-left: 24px;
margin-top: 12px;
margin-bottom: 6px;
}

h3 span {
font-size: 1rem;
font-weight: 400;
text-align: left;
height: 100%;
line-height: 1rem;
color: white;
background-color: rgba(11, 60, 71, 0.8);
vertical-align: middle;
display: block;
padding-left: 12px;
padding-right: 24px;
padding-top: 2px;
padding-bottom: 2px;
margin-left: 12px;
}

h4 span{
font-size: 0.85rem;
font-weight: 500;
text-align: center;
vertical-align: top;
background: rgba(79, 151, 165, 0.6);
text-transform: lowercase;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 3px;
}

h2 + div {
display: inline-block;
width: 100%;
text-align: justify;
background: linear-gradient(to bottom right, rgba(79, 151, 165, 0.1), rgba(79, 151, 165, 0));
border-top: solid 4px rgba(11, 60, 71, 1);
padding: 12px;
margin-bottom: 48px;
}

h3 + div {
display: inline-block;
width: 100%;
clear: both;
text-align: justify;
background: linear-gradient(to bottom right, rgba(79, 151, 165, 0.1), rgba(79, 151, 165, 0));
border-top: solid 1px rgba(11, 60, 71, 1);
padding: 12px;
margin-bottom: 48px;
}

h1 + h3#tagline {
background-color: transparent;
color: white;
}

div#toctitle h2 {
background-color: transparent;
}

.emphasis {
color: rgba(103, 200, 219, 1);
font-weight: 400;
}

div.emphasis p {
color: rgba(103, 200, 219, 1);
font-weight: 400;
}

/* ============================================================IMAGE FORMATTING */

/* Overriding default mediawiki thumb behaviour */
.thumb {
display: inline-block;
background-color: rgba(0, 0, 0, 0.15);
border: solid 1px rgba(11, 60, 71, 1);
padding: 12px;
margin-bottom: 0.65em;
}

/* Overriding default mediawiki caption styling */
.thumbcaption {
font-size: 0.75rem;
font-weight: 350;
color: white;
background: linear-gradient(to right, rgba(155, 41, 41, .55) 40%, rgba(155, 41, 41, 0) 100%);
padding-left: 3px;
}

h3 .tright {
margin-top: 0.5em;
margin-bottom: 0.5em;
}

/* An image that is treated as a block. Takes up its own row, text will not overflow. */
.img-block-left {
display: block;
background-color: rgba(0, 0, 0, 0.15);
border: solid 1px rgba(11, 60, 71, 1);
padding: 12px;
}

.img-block-center {
display: block;
clear: both;
width: 100%;
text-align: center;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0.15);
border: solid 1px rgba(11, 60, 71, 1);
padding: 12px;
}

/* An image that is treated as a inline-block. Takes up its own row, however the container is resized to fit its content. */
.img-inline-block-left {
display: inline-block;
float: left;
clear: left;
background-color: rgba(0, 0, 0, 0.15);
border: solid 1px rgba(11, 60, 71, 1);
padding: 12px;
margin-right: 0.65em;
margin-bottom: 0.65em;
}

.img-inline-block-right {
display: inline-block;
float: right;
clear: right;
background-color: rgba(0, 0, 0, 0.15);
border: solid 1px rgba(11, 60, 71, 1);
padding: 12px;
margin-left: 0.65em;
margin-bottom: 0.65em;
}

/* A plain, inline image */
.img-inline-block-right-plain {
display: inline-block;
float: right;
clear: right;
margin-left: 0.65em;
}

/* Styling option for multiple, vertically stacked images within a block or inline-block */
.stack-vertical {
margin-bottom: 6px;
border: solid 1px rgba(11, 60, 71, 1);
}

.stack-vertical-borderless {
margin-bottom: 6px;
border: none;
}

/* Image format only used on front-page */
.img_margin_right {
margin-top: 0.65em;
margin-bottom: 0.65em;
margin-right: 1em;
}

/* Special class for horizontal unit presentation. use with image-block in combination with thumb tag and don't specify orientation in wiki markup */
.unit {
display: block;
clear: both;
width: 100%;
text-align: center;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0.15);
border: solid 1px rgba(11, 60, 71, 1);
padding: 12px;
}

div.unit div.tright {
display: inline-block;
float: none;
clear: none;
background-color: transparent;
border: none;
padding: 0px;
}

/* ============================================================EMBEDDED VIDEO */
#tutorialvid {
display: block;
padding: 12px;
background-color: rgba(0, 0, 0, 0.15);
border: solid 1px rgba(11, 60, 71, 1);
}

.video-block {
display: block;
padding: 12px;
background-color: rgba(0, 0, 0, 0.15);
border: solid 1px rgba(11, 60, 71, 1);
}

.video-inline-right {
float: right;
background-color: rgba(0, 0, 0, 0.15);
border: solid 1px rgba(11, 60, 71, 1);
padding: 12px;
margin-left: 12px;
}

.video-inline-left {
float: left;
background-color: rgba(0, 0, 0, 0.15);
border: solid 1px rgba(11, 60, 71, 1);
padding: 12px;
margin-right: 12px;
}

/* ============================================================FRONTPAGE ELEMENTS */

.nav_header {
width: 100%;
text-align: left;
background-color: #a71f1f;
margin-top: 12px;
}

.nav-header-label {
font-size: 1rem;
font-weight: 400;
color: white;
height: 100%;
display: block;
vertical-align: middle;
line-height: 32px;
background-color: #4d4d4d;
padding-left: 6px;
margin-left: 12px;
}

.nav_item {
font-weight: 400;
horizontal-align: left;
padding-left: 18px;
padding-top: 12px;
}

.img_nav {
margin-right: 8px;
}

.main_body_header_highlight {
font-size: 1rem;
font-weight: 400;
text-align: left;
color: white;
background-color: #9b2929;
width: 185px;
vertical-align: middle;
padding-top: 6px;
padding-bottom: 2px;
padding-left: 6px;
margin-top: 12px;
}

.main_body_header {
font-size: 1rem;
font-weight: 400;
text-align: left;
color: white;
background-color: rgba(79, 151, 165, 0.4);
width: 165px;
vertical-align: middle;
padding-top: 5px;
padding-bottom: 2px;
padding-left: 6px;
}

.main_body_content {
font-weight: 300;
text-align: justify;
width: 100%;
background: linear-gradient(to bottom right, rgba(79, 151, 165, 0.1), rgba(79, 151, 165, 0));
border-top: solid 1px rgba(11, 60, 71, 1);
padding: 12px;
margin-bottom: 42px;
}

/* ==================================================================MISC WIKI OVERRIDES */

.tleft {
margin-right: 0.65em;
}

.tright {
margin-left: 0.65em;
}

#mainTable {
style=width:100%;
background: rgba(0, 0, 0, 0.2);
border: 1px solid #545454;
}

.keywords {
   display: none;
}

#mf-content {
margin-bottom:1em; 
vertical-align: middle;
padding:0.25em 0.4em 0.25em 0.4em;
}

#tablepage {
padding-left: 20px;
}

#tablepage a:link{color:rgb(255,255,255);}
#tablepage a:visited { color:rgb(200,200,200);}
#tablepage a:hover { color:rgb(230,230,230); }

.mw-destfile-warning {
color: white !important;
background-color: #780d13 !important;
}

/* ============================================================FONTS */
/* cyrillic */
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 300;
  src: local('Exo 2 Light Italic'), local('Exo2-LightItalic'), url(https://fonts.gstatic.com/s/exo2/v4/7cHtv4okm5zmbtYtE0c-8HkJmBUhfrGEPw.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 300;
  src: local('Exo 2 Light Italic'), local('Exo2-LightItalic'), url(https://fonts.gstatic.com/s/exo2/v4/7cHtv4okm5zmbtYtE0c-8HMJmBUhfrGEPw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 300;
  src: local('Exo 2 Light Italic'), local('Exo2-LightItalic'), url(https://fonts.gstatic.com/s/exo2/v4/7cHtv4okm5zmbtYtE0c-8H0JmBUhfrE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 400;
  src: local('Exo 2 Italic'), local('Exo2-Italic'), url(https://fonts.gstatic.com/s/exo2/v4/7cHov4okm5zmbtYtG-gc5VArlT8bdw.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 400;
  src: local('Exo 2 Italic'), local('Exo2-Italic'), url(https://fonts.gstatic.com/s/exo2/v4/7cHov4okm5zmbtYtG-Ic5VArlT8bdw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 400;
  src: local('Exo 2 Italic'), local('Exo2-Italic'), url(https://fonts.gstatic.com/s/exo2/v4/7cHov4okm5zmbtYtG-wc5VArlT8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300;
  src: local('Exo 2 Light'), local('Exo2-Light'), url(https://fonts.gstatic.com/s/exo2/v4/7cHrv4okm5zmbt6DCfs_wH8DnzcjTrA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300;
  src: local('Exo 2 Light'), local('Exo2-Light'), url(https://fonts.gstatic.com/s/exo2/v4/7cHrv4okm5zmbt6DCfs1wH8DnzcjTrA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300;
  src: local('Exo 2 Light'), local('Exo2-Light'), url(https://fonts.gstatic.com/s/exo2/v4/7cHrv4okm5zmbt6DCfs7wH8Dnzcj.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: local('Exo 2'), local('Exo2-Regular'), url(https://fonts.gstatic.com/s/exo2/v4/7cHmv4okm5zmbtYsK-4W4nIppT4.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: local('Exo 2'), local('Exo2-Regular'), url(https://fonts.gstatic.com/s/exo2/v4/7cHmv4okm5zmbtYmK-4W4nIppT4.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: local('Exo 2'), local('Exo2-Regular'), url(https://fonts.gstatic.com/s/exo2/v4/7cHmv4okm5zmbtYoK-4W4nIp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 500;
  src: local('Exo 2 Medium'), local('Exo2-Medium'), url(https://fonts.gstatic.com/s/exo2/v4/7cHrv4okm5zmbt7bCPs_wH8DnzcjTrA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 500;
  src: local('Exo 2 Medium'), local('Exo2-Medium'), url(https://fonts.gstatic.com/s/exo2/v4/7cHrv4okm5zmbt7bCPs1wH8DnzcjTrA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 500;
  src: local('Exo 2 Medium'), local('Exo2-Medium'), url(https://fonts.gstatic.com/s/exo2/v4/7cHrv4okm5zmbt7bCPs7wH8Dnzcj.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}