/*
* TODO:
* optimise existing code without changing functionality -
* provide mobile first functionality -
* refine css to make site more attractive in same design structure -
* publish updated website and begin work on a completely new design
*/


* {margin:0; padding:0;} /* REMOVES all padding & margin from EVERYTHING */
html, body {
    background-color:#ffffff;
}
a:hover {
    color: #333a56; 
    text-decoration: none;
}
a {
    color: #333a56; 
    text-decoration: none;
}
img {
    border:0 none;
}
/* === start content style === */
.bold{
    font-weight: bold;
}
#micro {
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-weight:bold;
}
#ideology {
    color: black;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    font-weight:bold;
}
.container {
    text-align: center;
}
.content{
    background-color:rgb(255,255,255);
    border-radius: 1em;
    border:1px solid #333a56;
    background-image:url('MicroideologyLogoAnimation.gif');
    background-position:center center;
    background-repeat:no-repeat;
    background-size:910px 910px;
    background-attachment:fixed;
    box-shadow:2px 2px 3px #aaaaaa;
    padding: 1%;
}
.card-header{
    background-color: #f7f5e6;
}
.btn-hosting{
    display:inline-block;
	text-align:center;
	width: 170px;
	font-size:14px;
    background-color: #003d8f;
    color: #ffffff;
    border-radius: 0.5em;
	padding:2px 5px;
    -webkit-transition: background 2s;
    transition: background 2s;
}
.btn-hosting:hover{
    color: #ffffff;
    font-weight: bold;
    text-transform:uppercase; 
}
.btn-link.focus, .btn-link:focus, .btn-link:active{
    text-decoration: none;
    box-shadow: none;
    font-weight: bold;
}
.btn-link{
    color:#333a56;
    text-align: left;
}
.btn-link:hover{
    color:#333a56;
    text-decoration:none;
    font-weight: bold;
}
.card-body{
    background-color:#333a56;
    color:#e8e8e8;
    text-align: left;
}
.leftside{
    color:#f7f5e6;
    margin:1%;
    padding:1%;
    opacity:0.95;
    filter:alpha(opacity=95); 
    background-color:#333a56;
    border:1px solid #f7f5e6;
    border-radius:0.5em;
    box-shadow:2px 2px 3px #aaaaaa;
}
.rightside{
    margin:1%;
    padding:1%;    
    opacity:0.95;
    filter:alpha(opacity=95);
    background-color:#f7f5e6;
    border:1px solid #333a56;
    border-radius:0.5em;
    box-shadow:2px 2px 3px #aaaaaa;
    
}
#box-navModule{
    border-width:1px; 
    border-color:rgb(150,150,150);
    border-style:solid;
    padding:0%;
    background-color:#333a56;
    border-radius:0.5em;
    box-shadow:2px 2px 3px #aaaaaa;
}
#box-contactModule{
    height:650px;
    border-width:0px; 
    border-color:#333a56;
    border-style:solid;
    padding:0%;
    background-color:rgb(200,255,200);
    border-radius:0.5em;
    box-shadow:2px 2px 3px #aaaaaa;
}
.contact{
    color:#333a56; 
    text-align:center; 
}
/* === end content style === */
/* === start footer style === */
/* goal is to rotate a div 360 with words and the div doubling in size, gradually changing colour from red to amber to green and then holding as long as the mouse is hovered over the div*/
#miLogo{
	display:inline-block;
	text-align:center;
	width: 130px;
	background:red;
	font-size:14px;
	border-radius: 0.5em;
	padding:2px 5px;
    -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
    transition: background 2s;
}
#miLogo:hover{
    background: rgb(68,157,68); 
    text-transform:uppercase; 
    box-shadow: 1px 1px grey;
}
a.miTag:link,a.miTag:visited,a.miTag:hover,a.miTag:active{
    text-decoration:none;
}
/* === end footer style === */