img.bg {
min-height : 100%;
min-width : 1024px;
width : 100%;
height : auto;
position : fixed;
top : 0;
left : 0;
}
@media screen and (max-width:1024px) {
img.bg {
left : 50%;
margin-left : -512px;
}
}
html {
background : url(../images/landscapes/rainy-day-Image2-22-002.jpg) center center no-repeat fixed;
background-size : cover;
}
.image70 {
width : 100%;
max-width : 400px;
margin-left : auto;
margin-right : auto;
padding : 10px;
border : #000000 solid 2px;
border-radius : 8px;
}
.image50a {
float : left;
margin-right : 2%;
margin-left : 2%;
width : 35%;
max-width : 270px;
min-width : 140px;
padding : 10px;
border : #000000 solid 1px;
border-radius : 8px;
}
.image50b {
float : right;
margin-right : 2%;
max-width : 300px;
min-width : 140px;
padding : 10px;
border : #000000 solid 1px;
border-radius : 8px;
}
.box-shadow {
width : 100%;
max-width : 400px;
margin-left : auto;
margin-right : auto;
padding : 10px;
border : #000000 solid 2px;
border-radius : 8px;
box-shadow : 10px 10px 5px #888888;
}
img.displayed2a {
display : block;
max-width : 450px;
margin-left : auto;
margin-right : auto;
padding : 10px;
border : #000000 solid 1px;
border-radius : 8px;
box-shadow : 10px 10px 5px #888888;
}
@keyframes mymove {
from {
background-color : red;
}
to {
background-color : blue;
}
}
.white {
background-color : white;
}
a:link {
color : blue;
background-color : yellow;
}
a:visited {
color : blue;
background-color : #ffffff;
}
a:hover {
color : red;
background-color : #ffffff;
}
a:active {
color : yellow;
background-color : #ffffff;
}
.image70 {
width : 100%;
max-width : 400px;
margin-left : auto;
margin-right : auto;
padding : 10px;
border : #000000 solid 2px;
border-radius : 8px;
}
#banner {
clear : left;
float : left;
width : 95%;
margin-left : 2%;
overflow : hidden;
font-size : 14px;
background-color : lightblue;
box-shadow : 10px 10px 5px #888888;
}
.tooltip .tooltiptext {
visibility : hidden;
width : 300px;
background-color : #555;
color : #fff;
text-align : center;
border-radius : 6px;
padding : 5px 0;
position : absolute;
z-index : 1;
bottom : 50%;
left : 40%;
margin-left : -60px;
opacity : 0;
transition : opacity 1s;
}
.tooltip .tooltiptext::after {
content : "";
position : absolute;
top : 100%;
left : 50%;
margin-left : -5px;
border-width : 5px;
border-style : solid;
border-color : #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility : visible;
opacity : 1;
}
#content {
border : #435ccc solid 1px;
width : 95%;
height : auto;
text-align : justify;
background : #ffffee;
padding : 10px;
}
h2 {
font-family : Arial, Helvetica, sans-serif;
margin-left : 2%;
padding-right : 0.5%;
font-size : 20px;
color : brown;
text-align : center;
}
p {
font-family : Arial, Helvetica, sans-serif;
margin-left : 2%;
padding-right : 2%;
font-size : 14px;
}
p.blocktext {
margin-left : auto;
margin-right : auto;
width : 80%;

}
p.largetext {
margin-left : auto;
margin-right : auto;
width : 80%;
font-size : 16px;
}
.image70 {
width : 100%;
max-width : 400px;
margin-left : auto;
margin-right : auto;
padding : 10px;
border : #000000 solid 2px;
border-radius : 8px;
}
.image50a {
float : left;
margin-right : 2%;
margin-left : 2%;
width : 35%;
max-width : 270px;
min-width : 140px;
padding : 10px;
border : #000000 solid 1px;
border-radius : 8px;
}
.image50b {
float : right;
margin-right : 2%;
max-width : 300px;
min-width : 140px;
padding : 10px;
border : #000000 solid 1px;
border-radius : 8px;
}
.box-shadow {
width : 100%;
max-width : 400px;
margin-left : auto;
margin-right : auto;
padding : 10px;
border : #000000 solid 2px;
border-radius : 8px;
box-shadow : 10px 10px 5px #888888;
}
img.displayed2black {
background-color : #ffffff;
display : block;
max-width : 300px;
margin-left : auto;
margin-right : auto;
padding : 20px;
border : #000000 solid 2px;
border-radius : 8px;
box-shadow : 10px 10px 5px #888888;
}
img.displayed2fifty {
background-color : #ffffff;
display : block;
max-width : 40px;
margin-left : auto;
margin-right : auto;
padding : 20px;
border : #000000 solid 2px;
border-radius : 8px;
box-shadow : 10px 10px 5px #888888;
}
 .h4 {
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
text-weight : normal;
text-align: right;
}
.button {
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font: 14px/100% Arial, Helvetica, sans-serif;
        padding: .5em .5em 1em .55em;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-border-radius: .5em; 
        -moz-border-radius: .5em;
        border-radius: .5em;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
  }
  .button:hover {
        text-decoration: none;
  }
  .button:active {
        position: relative;
        top: 1px;
  }

  /* blue */
  .blue {
        color: #000000;
        border: solid 1px #fff;
        background: #0095cd;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffadee), to(#0078a5));
        background: -moz-linear-gradient(top,  #ffadee,  #0078a5);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffadee', endColorstr='#0078a5');
  }
  .blue:hover {
        background: #ffffff;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#00678e));
        background: -moz-linear-gradient(top,  #0095cc,  #00678e);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00678e');
  }
  .blue:active {
        color: #80bed6;
        background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
        background: -moz-linear-gradient(top,  #0078a5,  #00adee);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
  }