/* ————————————-
GLOBAL
————————————- */
* {
margin: 0;
padding: 0;
}
* {
font-family: ‘Muli’, sans-serif;
}
span.preheader { display:none !important;
visibility:hidden;
mso-hide:all;
font-size:1px;
color:#ffffff;
line-height:1px;
max-height:0px;
max-width:0px;
opacity:0;
overflow:hidden; }
img {
/* width: 100%; */
height: auto;
}
.collapse {
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
height: 100%;
}
/* ————————————-
ELEMENTS
————————————- */
a {
color: #6569C8;
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid #9dcbd9;
}
.btn {
text-decoration: none;
color: #fff !important;
font-size: 21px;
padding: 10px 16px;
font-weight: bold;
margin: 10px 0px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 3px;
background-color: #6569C8;
}
.btn-small {
font-size: 14px;
padding: 2px 12px;
}
.btn.btn-green {
background-color: #1bca7a;
}
p.callout {
margin: 30px 0px;
padding: 15px;
background-color: #ecf8ff;
margin-bottom: 15px;
}
.callout a {
font-weight: bold;
color: #6569C8;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #fff;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3b5998 !important;
}
a.tw {
background-color: #1daced !important;
}
a.gp {
background-color: #db4a39 !important;
}
a.ms {
background-color: #000 !important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
/* ————————————-
HEADER
————————————- */
table.head-wrap {
width: 100%;
color: #fff;
padding: 10px 0px;
}
.header.container table td.logo {
padding: 15px;
}
.header.container table td.label {
padding: 15px;
padding-left: 0px;
}
.header.container a {
font-size: 14px;
color: #80c1dc;
border: 0px;
}
/* ————————————-
BODY
————————————- */
table.body-wrap {
width: 100%;
padding: 15px 0px;
}
table.body-wrap img {
margin-bottom: 15px;
}
/* ————————————-
FOOTER
————————————- */
table.footer-wrap {
width: 100%;
clear: both !important;
padding: 30px 0px;
}
.footer-wrap .container td.content p {
border-top: 1px solid rgb(215, 215, 215);
padding-top: 15px;
}
.footer-wrap .container td.content p {
font-size: 10px;
font-weight: bold;
}
.footer-info p {
color: #ccc;
}
/* ————————————-
TYPOGRAPHY
————————————- */
h1 {
line-height: 1.4em;
margin-bottom: 15px;
font-weight: 800;
color: #6569C8;
}
h2,
h3,
h4,
h5,
h6 {
line-height: 1.4em;
margin-bottom: 15px;
font-weight: 800;
color: #444;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 700;
font-size: 42px;
}
h2 {
font-weight: 700;
font-size: 37px;
}
h3 {
font-weight: 700;
font-size: 27px;
}
h4 {
font-weight: 700;
font-size: 23px;
}
h5 {
font-weight: 700;
font-size: 17px;
}
h6 {
font-weight: 700;
font-size: 14px;
}
.collapse {
margin: 0 !important;
}
p,
ul {
margin-bottom: 10px;
font-weight: normal;
font-size: 16px;
line-height: 1.8em;
color: #444;
}
p.lead {
font-size: 18px;
color: #6569C8;
margin-bottom: 20px;
}
p.last {
margin-bottom: 0px;
}
ul li {
margin-left: 15px;
list-style-position: inside;
}
/* ————————————-
SIDEBAR
————————————- */
ul.sidebar {
background: #ebebeb;
display: block;
list-style-type: none;
}
ul.sidebar li {
display: block;
margin: 0;
}
ul.sidebar li a {
text-decoration: none;
color: #666;
padding: 10px 16px;
/* font-weight:bold; */
margin-right: 10px;
/* text-align:center; */
cursor: pointer;
border-bottom: 1px solid #777777;
border-top: 1px solid #ffffff;
display: block;
margin: 0;
}
ul.sidebar li a.last {
border-bottom-width: 0px;
}
ul.sidebar li a h1,
ul.sidebar li a h2,
ul.sidebar li a h3,
ul.sidebar li a h4,
ul.sidebar li a h5,
ul.sidebar li a h6,
ul.sidebar li a p {
margin-bottom: 0 !important;
}
/* —————————————————
RESPONSIVENESS
Nuke it from orbit. It’s the only way to be sure.
—————————————————— */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block !important;
max-width: 600px !important;
margin: 0 auto !important; /* makes it centered */
clear: both !important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
padding: 15px;
max-width: 600px;
margin: 0 auto;
display: block;
}
/* Let’s make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0 !important;
margin: 0 auto;
max-width: 600px !important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear {
display: block;
clear: both;
}
.small-info p,
.small-info a {
color: #ccc;
font-size: 10px;
}
/* ——————————————-
PHONE
For clients that support media queries.
Nothing fancy.
——————————————– */
@media only screen and (max-width: 600px) {
a[class=’btn’] {
display: block !important;
margin-bottom: 10px !important;
background-image: none !important;
margin-right: 0 !important;
}
div[class=’column’] {
width: auto !important;
float: none !important;
}
table.social div[class=’column’] {
width: auto !important;
}
}
|
|
<!–
|
–>