Doves are a symbol of peace

<!DOCTYPE html>
<html>
<head>
<!--

==============================================

Coded by Monica T.
http://monicagalaxy.info/
Theme: doves are a symbol of peace
Updated: August 4th, 2017
DO NOT REMOVE CREDITS

external sources - image credit:
cranes: https://s-media-cache-ak0.pinimg.com/736x/72/e9/dd/72e9ddf1734913ae008066dbdddd9396--birds-flying-tattoo-bird-flying.jpg
smaller cranes: https://fiumidiinchiostro.files.wordpress.com/2015/03/cropped-tree_bird.png
animation css: https://browngirl.tumblr.com/post/68377491864/expanding-updates-box-tutorial

==============================================

-->

<meta charset="UFT-8">

<title>doves are a symbol of peace</title>

<style type="text/css">

html {
    background-color: #fff;
    height: 100%;
    color: #555555;
}

body {
    background-image: url('http://i.imgur.com/6r1fMTd.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.content {
    position: relative;
    padding: 11px;
    left: 265px;
    width: 640px;
    background-color: #fff;
    font: 13.5px calibri;
    line-height: 19px;
}

#image {
    background-image: url('https://secure.static.tumblr.com/a283801fc2836d6fe0bec9368536207e/vdapdks/lWCnjxy7y/tumblr_static_tumblr_static_d5afctv6mg8owwkw8goksowgs_640.png');
    float: right;

}


body::-webkit-scrollbar {
    width: 4px;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #fff;
}

body::-webkit-scrollbar-thumb {
  background-color: #000;
  outline: 1px solid #121212;
}


h1 {
    font-family: calibri;
    text-align: left;
    font-weight: normal;
    font-size: 39px;
    color: #000;
    line-height: 1px;
}

h2 {
    font-family: calibri;
    text-align: left;
    font-weight: normal;
    font-size: 29px;
    line-height: 29px;
    margin-bottom: 10px;
    color: #000;
    border-bottom: 1px solid #000;

}

h3 {
    font-family: calibri;
    text-align: left;
    font-weight: normal;
    font-size: 29px;
    line-height: 1px;
    color: #555555;
}


a:link, a:visited {
    color: #999;
    text-decoration: none;
}
a:hover {
    color: #999;
    text-decoration: underline;
}

i {
    color: #8c8c8c;
}

u {
    color: #8c8c8c;
}

p {
    font: 13.5px calibri;
}

blockquote {
    background-color: #e5e5e5;
    padding: 10px;
    margin-left: 1px;

}

#hardziamupdatestab{
    position:fixed;
    top: 72px;
    left: 53px;
    width: 160px;
    z-index: 100;
    font: 17px calibri;
}

#hardziamupdatestab a {
    display: block;
    text-decoration: underline;
    color: #555555;
    font: 13.5px calibri;
}

.ziam {
    display: inline-block;
    background: #000;
    color: #fff;
    width: 160px;
    margin-left: 15px;
    padding: 5px;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
}

#bonruffians, #hardziam, #feverfires{
    margin-bottom: 19px;
}

#bonruffians:hover .ziam, #hardziam:hover .ziam, #feverfires:hover .ziam{
   margin-left: 122px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

#hardziam:hover .ziam:before, #bonruffians:hover .ziam:before, #feverfires:hover .ziam:before{
   opacity: 1;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

#hardziam:hover .ziam:after, #bonruffians:hover .ziam:after, #feverfires:hover .ziam:after{
   width: 83px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

.ziam:after{
   position: fixed;
   width: 0px;
   height: 1px;
   margin-top: -8px;
   left: 65px;
   background: #fff;
   -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

.ziam:before{
   position: fixed;
   width: 8px;
   height: 8px;
   margin-top: 1px;
   left: 40px;
   background: #fff;
   opacity:0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
}

.mulan{
    height: 0px;
    width: 155px;
    opacity:0;
    margin-top:-15px;
    background: #fff;
    margin-left: 16px;
    border-right:1px solid #000;
    border-left:1px solid #000;
    border-bottom:1px solid #000;
    border-top:1px solid #000;
    padding: 5px;
    overflow: hidden;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
}

#hardziam:hover .mulan, #feverfires:hover .mulan, #bonruffians:hover .mulan{
    height: 130px;
    margin-top:8px;
    opacity:1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s; /* Safari */
}

#hardziamupdatestab h3 {
    font: 17px calibri;
    color: #000;
    padding: 2px;
    width: 120px;
    font-weight: bold;
    height: 11px;
}

#hardziamupdatestab h4{
    font: 12px Calibri;
    color: #555555;
    padding: 2px;
    width: 150px;
    margin-top: -6px;
}

</style>
</head>
<body>
<div id="image"></div>
<div id="hardziamupdatestab">
<div id="hardziam">
 <div class="ziam">updates</div>
 <div class="mulan">
 <h3>navigation</h3>
 <h4>subtitle for your links</h4>
<a href="#">one</a>
<a href="#">two</a>
<a href="#">three</a>
</div>
</div>

<div id="bonruffians">
 <div class="ziam">sidebar</div>
 <div class="mulan">
 <h3>sidebar one</h3>
 <h4>and a subtitle</h4>
<p>
-idea one<br>
-idea two<br>
-idea three<br>
</p>
</div>
</div>

<div id="feverfires">
 <div class="ziam">sidebar</div>
 <div class="mulan">
 <h3>sidebar two</h3>
 <h4>and a subtitle</h4>
<p>Lorem ipsum dolor sit amet, eum meis audire postulant.</p>
</div>
</div>
</div>

<div class="content">
<h1><b>doves</b> are a symbol of peace</h1>
<blockquote><a href="/">link</a> <b>bold</b> <i>italics</i> <u>underline</u> <s>strike through</s></blockquote>
Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne. Fabulas habemus vivendum vix ei. Ad duo erat primis. Quo vero dicta cetero id, ut pri electram dissentiet.
Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne. Fabulas habemus vivendum vix ei. Ad duo erat primis.
</div>

<div class="content">
<h2>header</h2>
Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne. Fabulas habemus vivendum vix ei. Ad duo erat primis. Quo vero dicta cetero id, ut pri electram dissentiet.
Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne. Fabulas habemus vivendum vix ei. Ad duo erat primis. Quo vero dicta cetero id, ut pri electram dissentiet.
Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne. Fabulas habemus vivendum vix ei. Ad duo erat primis. Quo vero dicta cetero id, ut pri electram dissentiet.
Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne. Fabulas habemus vivendum vix.
</div>

<div class="content">
<h3>header</h3>
Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne. Fabulas habemus vivendum vix ei. Ad duo erat primis. Quo vero dicta cetero id, ut pri electram dissentiet.
Lorem ipsum dolor sit amet, eum meis audire postulant et, dicit delicata accommodare ex sit, quo te nemore audire. Pro verear oblique ne. Fabulas habemus vivendum vix ei.
</div>
</body>
</html>