/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}
/*MAIN*/
body {
font-size: 1.05em;
line-height: 1.25em;
padding: 20px;
font-family: Helvetica Neue, Helvetica, Arial;
background: black;
color: #FFFFFF;
}
a {
color: white;
text-decoration: none;
font-weight: bold;
}
.home-button {
border: 1px solid #FFFFFF;
border-top-color: #FFFFFF;
border-top-style: solid;
border-top-width: 1px;
border-right-color: #FFFFFF;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: #FFFFFF;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #FFFFFF;
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
border-radius: 20px;
display: inline-block;
position: relative;
top: 50%; left:33%;
padding: 8px 20px;
margin: 20px;
margin-right: auto;
margin-left: auto;
max-width: 300px;
width: 65%;
text-align: center;
}
}
a:hover {
color: #444;
}
img {
width: 100%;
}
header {
background: black;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
border-bottom: 2px solid #ffffff;
z-index: 100;
}
#logo{
margin: 20px;
float: left;
width: 200px;
height: 40px;
background: url(../images/cim-HA-logo2.png) no-repeat center;
display: block;
}
nav {
float: right;
padding: 20px;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: black url(../images/menu-icon.png) center;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
.current {
color: gray;
}
section {
margin: 5px auto 5px;
max-width: 980px;
position: relative;
padding: 5px
}
h1 {
font-size: 2em;
color: white;
line-height: 1.15em;
margin: 20px 0 ;
}
p {
line-height: 1.45em;
margin-bottom: 20px;
margin-top: 20px;
}
h4 {
font-size: 75%;
}
audio {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
/* GRID OF THREE ============================================================================= */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.13%;
}
.span_1_of_3 {
width: 32.26%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 100%;
}
.span_1_of_3 {
width: 100%;
}
}
/* SECTIONS ============================================================================= */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* GROUPING ============================================================================= */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1;
text-align: center;
font-weight: /*bold*/;
margin-bottom: 40px;
margin-top: 40px;
/* For IE 6/7 (trigger hasLayout) */
}
/* GRID COLUMN SETUP ==================================================================== */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
/* SpeakPipe ==============================================================================*/
/* Blog Page */
/* Footer */
footer {text-align: center;
}
/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
.home-button {
left: 0%
}
}
/*MEDIA QUERY*/
@media only screen and (max-width : 726px)
{
.home-button {
left: 16%
}
header {
position: absolute;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: black;
border: 5px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
/*##### Global Classes #####*/
* {margin: 0;padding: 0;}
body { font-family: arial; font-size: 16px;}
.clearfix {clear: both;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.clr1 {background: #FFFFFF; color: #333743;}
.clr2 {background: #F1F3F5; color: #8F94A3;}
.clr3 {background: #FFFFFF; color: #ffffff;}
.clr4 {background: #FFFFFF; color: #E3E7F2;}
.clr5 {background: ; color: #F1F3F5;}
.clr6 {background: ; color: #39B5A1;}
.clr7 {background: ; color: #D45245;}
a {color: #ffffff; text-decoration: none;}
a:hover {color: #ffffff; text-decoration: underline;}
a:visited{}
/*##### Footer Structure #####*/
.site-footer {
background-color: black;
text-align: center;
margin: 10px 0;
padding: 10px 0;
}
#social-wrapper {
text-align: center;
}
/*Social Media Icons*/
.social-wrapper {
text-align: center;
}
.social-wrapper ul li {
display: inline;
margin: 0 5px;
}
.twitter-icon,
.facebook-icon,
.instagram-icon,
.youtube-icon,{
margin-top: .625em;
width: 40px;
height: 40px;
opacity: .6;
filter: alpha(opacity=60); /* For IE8 and earlier */
border-radius: 25px;
}
.twitter-icon:hover,
.facebook-icon:hover,
.instagram-icon:hover,
.linkedin-icon:hover,
.googleplus-icon:hover,
.youtube-icon:hover,
.foursquare-icon:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.footer-nav p {
text-align: center;
}