Chapter 1 - cattery layout codes

<style>heyyy there, ceeder! thank you kindly for purchasing this layout, i really appreciate the profit. xD
i'm dolce, and i'm just going to hove around here and show you how to customize this layout. fun, right? i have five rules, though:
1) DON'T touch the coding in the boxes or style brackets. don't remove stuff, add stuff, or play with the hex codes. if there's a place where you can tough the coding, i will specify so. otherwise, don't.
2) please only use the boxes for their intended purposes, don't change them up.
3) unless otherwise specified, don't touch any font sizes or "br"s or what-have-you's. they've been carefully formatted to make sure everything's aligned well.
4) the coding below the big "don't touch coding beyond here" line is very fragile. don't touch it!!
5) eek i guess i only have four rules.
now let's get started!</style>

<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700';; rel='stylesheet' type='text/css'>

<style>this little box, right below me? this is the banner up top. you can keep the message at "welcome," or you can change it to your cattery name, or something else. it should be relatively short, though.</style>
<div style=
"width:100%px;
height:125px;
box-shadow: 1px 1px 10px #7A8999;
border: 1px solid #7A8999; 
padding:10px;
margin: 10px; 
background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4005/4005772.png);
color:#7A8999;">
<br><div align="right"><font size=8><b><span style="text-shadow: 1px 1px 10px #234367;">welcome</span></b></font size></div>
</div>

<style>this is the box in the top left corner. put whatever you want in here. ^^</style>
<div style=
"width:200px; 
height:125px; 
overflow:hidden;
box-shadow: 1px 1px 10px #7A8999; 
border: 1px solid #234367;
padding:10px; 
margin: 10px;
float:left;
background:#EFF5FC;
color:#234367;
font-family:verdana;">
<div align="right"><h1>header here</h1></div>
bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books 
</div>

<style>this is the ~*~tags~*~ box. you can put a few of your favorite avatars in here, just paste the urls in. you can add more, too. make sure they're 100px by 100px, though!</style>
<div style=
"width:200px; 
height:125px; 
overflow:hidden;
box-shadow: 1px 1px 10px #7A8999; 
border: 1px solid #7A8999;
padding:10px; 
margin: 10px;
float:left;
background:#234367;
color:#7A8999;
font-family:verdana;">
<center><br><marquee behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" id="marquee">
<img src="http://colourlovers.com.s3.amazonaws.com/images/patterns/4005/4005772.png"; height="100px" width="100px"></img>
<img src="http://colourlovers.com.s3.amazonaws.com/images/patterns/4005/4005772.png"; height="100px" width="100px"></img>
<img src="http://colourlovers.com.s3.amazonaws.com/images/patterns/4005/4005772.png"; height="100px" width="100px"></img></marquee>
</div>

<img src="http://ceederscharahub.weebly.com/uploads/2/3/0/0/23001564/1894773_orig.png"; id="char" width="250px" height="300px"></img>

<style>this is the nav box. you really don't have to touch it, however, due to mweor's symbol malfunctioning, the star might go all wonky, so you might have to fix it every so often.</style>
<div style=
"width:150px; 
height:442px; 
overflow:hidden;
box-shadow: 1px 1px 10px #7A8999; 
border: 1px solid #7A8999;
padding:10px; 
margin: 10px;
float:right;
background:#234367;
color:#7A8999;
font-family:verdana;">
<center><br><br><br><a class="compose" cid="1339">message</a>
<br><a href=/report.php?loc=1&other=1339>report</a>
<br><a href=/searchtopics.php?subject=&author=1339&mweor=&board=0&search=Search>my posts</a>
<br><br><br><br><br><a href=/usershop.php?id=1339>shop</a>
<br><a href=/cattery_offspring.php?id=1339>offspring</a>
<br><a href=/cattery_expected.php?id=1339>expected</a>
<br><a href=/cattery_retired.php?id=1339>retired</a>
<br><br><br><br><br><a href=/cattery.php>cattery</a>
<br><a href=/explore.php>explore</a>  
<br><a href=/chat.php>chat</a>
<br><a href=/news.php>news</a> 
<br><a href=/help.php>help</a> 
<br><a href=/logout.php>logout</a> 
<br><br><br><a href=/cattery.php?id=43641>credits</a></center>
</div>

<style>this is the little box in between the marquee box and the nav box. do what you want with it.</style>
<div style=
"width:270px; 
height:125px; 
overflow:hidden;
box-shadow: 1px 1px 10px  #7A8999; 
border: 1px solid  #234367;
padding:10px; 
margin: 10px;
float: right;
background:#EFF5FC;
color: #234367;
font-family:verdana;">
<div align="right"><h1>header here</h1></div>
bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden 
</div>

<style>this is the big box under the first box and the tag box. it's a good place to introduce yourself or put some art or links or whatever you may fancy.</style>
<br><br><div style=
"width:442px; 
height:274px; 
overflow:hidden;
box-shadow: 1px 1px 10px #7A8999; 
border: 1px solid #234367;
padding:10px;
margin: 10px;
float:left; 
background:#EFF5FC;
color:#234367;
font-family:verdana;">
<div align="right"><h1>header here</h1></div>
<br>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days
</div>

<style>this box contains patting mweor links! [yayyyy]. you may have up to six. if you don't know how to make the small mweor images or how to do picture links, you can just replace the mweor id's. c:</style>
<div style=
"width:125px; 
height:100px; 
overflow:hidden;
box-shadow: 1px 1px 10px  #7A8999; 
border: 1px solid  #7A8999;
padding:10px; 
margin: 10px;
float: left;
background:#234367;
color: #7A8999;
font-family:verdana;">
<div align="right"><font size=1><h1>mweors</h1></font size></div>
<a href=/mweor.php?id=2440974&pat=yes><img src=/mweori.php?id=2440974&tiny=1></a>
<a href=/mweor.php?id=1300590&pat=yes><img src=/mweori.php?id=1300590&tiny=1></a>
<a href=/mweor.php?id=1703932&pat=yes><img src=/mweori.php?id=1703932&tiny=1></a>
<a href=/mweor.php?id=495988&pat=yes><img src=/mweori.php?id=495988&tiny=1></a>
<a href=/mweor.php?id=480433&pat=yes><img src=/mweori.php?id=480433&tiny=1></a>
<a href=/mweor.php?id=375071&pat=yes><img src=/mweori.php?id=375071&tiny=1></a>
</div>

<style>this is the box for dEEp ARTsy qoUOTEs. you can put a quote in there. you may have to play with the font size a little. enjoy!</style>
<div style=
"width:100px; 
height:100px; 
overflow:hidden;
box-shadow: 1px 1px 10px  #7A8999; 
border: 1px solid  #234367;
padding:10px; 
margin: 10px;
float: right;
background:#EFF5FC;
color: #234367;">
<h1><font size=4.5><b>"Be yourself; everyone else is already taken." - Oscar Wilde</b></font size></h1>
</div>

<style>this is the little rectangle below the mweor and quotes box.</style>
<div style=
"width:272px; 
height:133px; 
overflow:hidden;
box-shadow: 1px 1px 10px  #7A8999; 
border: 1px solid  #7A8999;
padding:10px; 
margin: 10px;
float: right;
background:#234367;
color: #7A8999;
font-family:verdana;">
<br>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days
</div>

<style>these are the content slider boxes. /pleasepleasepleasepleaseplease/ do not touch ANY of the coding but the text, but because of mweor's symbol glitch, you may have to redo the bullets every so often.</style>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<link rel="stylesheet" href="gallery.css">
<link rel="stylesheet" href="gallery.theme.css">
<div class="gallery autoplay items-3">
<div id="item-1" class="control-operator"></div>
<div id="item-2" class="control-operator"></div>
<div id="item-3" class="control-operator"></div>
<figure class="item">
<div align="right"><h1>header here</h1></div>
<blockquote>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics </blockquote>
</figure>
<figure class="item">
<div align="right"><h1>header here</h1></div>
<blockquote>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics </blockquote>
</figure>
<figure class="item">
<div align="right"><h1>header here</h1></div>
<blockquote>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics </blockquote>
</figure>
<br><br>
<div class="controls"> <a href="#item-1" class="control-button">•</a> <a href="#item-2" class="control-button">•</a> <a href="#item-3" class="control-button">•</a> </div>
</div>

<style>well, that brings us to the end of our journey. your layout is formatted! [whee!] farewell, my friend. if you have any trouble changing something or have additional questions, just pm me! i'll be happy to help. ^^ enjoy your snazzy new layout.</style>

<style>
/////////////////////////////////////////////DO NOT TOUCH CODING BEYOND THIS POINT///////////////////////////////////////////////
</style>

<font color=#234367>

<style>
#char
{float:right;
position:fixed;
left:1000px;
top-margin:-300px;
z-index:1;}
</style>

<style>
#marquee
{-webkit-marquee-style: alternate;
-moz-marquee-style: alternate;
-o-marquee-style: alternate;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
opacity: .85;}
#marquee:hover
{opacity: 1;}
</style>

<style>
#topbanner,
#bottombanner,
#titlebar,
#bodyi, .titlebar,.sf-menu {display: none;} 
#footer{display:none;}
#titleimg { display:none;}
#titletxt { display:none; }
.titlebar { display:none; height:0px}
#topbanner { display:none;}
#bottombanner img { display:none;}
#menu_holder { display:none; }
#cattery_infobox { display:none;}
img.trans {display:none;}
.tip.good_label {display:none;}
.tip.neutral_label {display:none;}
</style>

<style>
#mweor_tabs 
{background: #234367; 
border:1px solid #7A8999;
color: #FFB900!important;
font-family:verdana!important; }
.ui-widget-header 
{background:#7A8999;
color: #FFB900!important;
font-family:verdana!important;
border: none;}
ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default 
{background: #17032B;
color: #FFB900!important;
border: 1 px solid #17032B;
font-family:verdana!important;}
</style>

<style>
#cattery_descbox
{background:#17032B;
width:991px;
height:925px;
float: right;
left:250px;
background-repeat:repeat;
background-attachment:fixed;
background-position:right;}
body
{background:#17032B;
background-repeat:repeat;
background-attachment:fixed;
background-position:right;}
#content 
{background:#17032B;
width:991px;
height:875px;
float:right;
background-repeat:repeat;
background-attachment:fixed;
background-position:right;}
</style>

<style>
.button
{color:#7A8999;
background:#234367;
border:1px solid #7A8999;
font-family: 'Lobster Two', cursive;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;}
.button:hover
{color:#FFB900;
border:1px solid#FFB900;}
#notice
{display:none;}
.theader
{property: value;
box-shadow: 1px 1px 10px #7A8999;
background: #EFF5FC;
font-family:verdana;
color:#234367; 
position:relative;}
#eventtxt
{color:#234367;
background:#EFF5FC;
box-shadow: 1px 1px 10px #7A8999;
font-family:verdana;
position: relative;
border:1px solid #234367;} 
.popup 
{background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4005/4005772.png);
color:#234367; 
border: 1px solid #234367;
box-shadow: 1px 1px 10px #7A8999;
font-family:verdana;}
#lightbox-container-image
{background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4005/4005772.png);
color:#234367; 
border: 1px solid #234367;
font-family:verdana;}
.ui-tooltip 
{background: #7A8999!important;
color:#234367;!important
box-shadow: 1px 1px 10px #7A8999!important;
border:7px solid transparent;
-webkit-border-image:url(http://www.colourlovers.com/paletteImg/EFF5FC/7A8999/FFB900/234367/17032B/Osteospermum.png-) 30 30 stretch; 
-o-border-image:url(http://www.colourlovers.com/paletteImg/EFF5FC/7A8999/FFB900/234367/17032B/Osteospermum.png) 30 30 stretch; 
border-image:url(http://www.colourlovers.com/paletteImg/EFF5FC/7A8999/FFB900/234367/17032B/Osteospermum.png) 30 30 stretch;}
font-family:verdana!important;}
</style>

<style>
font
{color:#234367; !important
font-family:verdana;}
a 
{color:#FFB900; !important
text-shadow: 0px 0px 10px #234367;
font-family:verdana;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;}
a:hover
{color:#7A8999;
font-family:verdana;}
i
{display:none;}
h1
{color:#FFB900;
font-family: 'Lobster Two', cursive;
text-shadow: 0px 0px 10px #234367;}
b
{color:#7A8999;
font-family: 'Lobster Two', cursive;}
</style>

<style>
.gallery .control-operator:target ~ .controls .control-button 
{color: #FFB900;}
.gallery .control-button:first-of-type,
.items-2 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.items-2 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.items-3 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.items-3 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.items-3 .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),
.items-4 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.items-4 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.items-4 .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),
.items-4 .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4),
.items-5 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.items-5 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.items-5 .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),
.items-5 .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4),
.items-5 .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5) 
{color: #7A8999;}
.gallery .item:first-of-type 
{position: absolute;
  opacity: 1;}
.gallery .item 
{position: absolute;
margin: 10px;
 float:left;
  top: 25px;
  width:970px;
  height: 200px;
  opacity: 0;
box-shadow: 1px 1px 10px #7A8999;
color:#234367;
font-family:verdana;
text-align:left;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;}
.gallery .control-operator 
{display: none;}
.gallery .control-operator:target ~ .item 
{pointer-events: none;
  opacity: 0;
  -webkit-animation: none;
  -o-animation: none;
  animation: none;}
.gallery .control-operator:target ~ .controls .control-button 
{-webkit-animation: none;
  -o-animation: none;
  animation: none;}
@-webkit-keyframes controlAnimation-2 
{0% 
{color: #FFB900;}
14.3%, 50% 
{color: #7A8999;}
64.3%, 100% 
{color: #FFB900;}
}
@-o-keyframes controlAnimation-2 
{0% 
{color: #FFB900;}
14.3%, 50% 
{color: #7A8999;}
64.3%, 100% 
{color: #FFB900;}
}
@keyframes controlAnimation-2 
{0% 
{color: #FFB900;}
14.3%, 50% 
{color: #7A8999;}
64.3%, 100% 
{color: #FFB900;}
}
@-webkit-keyframes galleryAnimation-2 {
  0% 
{opacity: 0;}
14.3%, 50% 
{opacity: 1;}
64.3%, 100% 
{opacity: 0;}
}
@-o-keyframes galleryAnimation-2 
{0% 
{opacity: 0;}
14.3%, 50% 
{opacity: 1;}
64.3%, 100% 
{opacity: 0;}
}
@keyframes galleryAnimation-2 
{0% 
{opacity: 0;}
14.3%, 50% 
{opacity: 1;}
64.3%, 100% 
{opacity: 0;}
}
.items-2.autoplay .control-button
{ -webkit-animation: controlAnimation-2 14s infinite;
  -o-animation: controlAnimation-2 14s infinite;
  animation: controlAnimation-2 14s infinite;}
.items-2.autoplay .item 
{-webkit-animation: galleryAnimation-2 14s infinite;
  -o-animation: galleryAnimation-2 14s infinite;
  animation: galleryAnimation-2 14s infinite;}
.items-2 .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) 
{ pointer-events: auto;
  opacity: 1;}
.items-2 .control-button:nth-of-type(1),
.items-2 .item:nth-of-type(1) 
{-webkit-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;}
.items-2 .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) 
{pointer-events: auto;
  opacity: 1;}
.items-2 .control-button:nth-of-type(2),
.items-2 .item:nth-of-type(2) 
{-webkit-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;}
@-webkit-keyframes controlAnimation-3 
{0% 
{color: #FFB900;}
9.5%, 33.3% 
{color: #7A8999;}
42.9%, 100% 
{color: #FFB900;}
}
@-o-keyframes controlAnimation-3 {
  0% 
{color: #FFB900;}
9.5%, 33.3% 
{color: #7A8999;}
42.9%, 100% 
{color: #FFB900;}
}
@keyframes controlAnimation-3 {
  0% 
{color: #FFB900;}
9.5%, 33.3% 
{color: #7A8999;}
42.9%, 100% 
{color: #FFB900;}
 }
@-webkit-keyframes galleryAnimation-3 
{0% 
{opacity: 0;}
9.5%, 33.3% 
{opacity: 1;}
42.9%, 100% 
{opacity: 0;}
}
@-o-keyframes galleryAnimation-3 
{ 0% 
{opacity: 0;}
9.5%, 33.3% 
{opacity: 1;}
42.9%, 100% 
{opacity: 0;}
}
@keyframes galleryAnimation-3 
{0% 
{opacity: 0;}
9.5%, 33.3% 
{opacity: 1;}
42.9%, 100% 
{opacity: 0;}
}
.items-3.autoplay .control-button 
{-webkit-animation: controlAnimation-3 21s infinite;
  -o-animation: controlAnimation-3 21s infinite;
  animation: controlAnimation-3 21s infinite;}
.items-3.autoplay .item 
{-webkit-animation: galleryAnimation-3 21s infinite;
  -o-animation: galleryAnimation-3 21s infinite;
  animation: galleryAnimation-3 21s infinite;}
.items-3 .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) 
{pointer-events: auto;
  opacity: 1;}
.items-3 .control-button:nth-of-type(1),
.items-3 .item:nth-of-type(1) {
  -webkit-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;}
.items-3 .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2)
 {pointer-events: auto;
  opacity: 1;}
.items-3 .control-button:nth-of-type(2),
.items-3 .item:nth-of-type(2) 
{ -webkit-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;}
.items-3 .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) 
{pointer-events: auto;
  opacity: 1;}
.items-3 .control-button:nth-of-type(3),
.items-3 .item:nth-of-type(3) 
{ -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;}
@-webkit-keyframes controlAnimation-4 
{0% 
{color: #FFB900;}
7.1%, 25% 
{color: #7A8999;}
32.1%, 100% 
{color: #FFB900;}
}
@-o-keyframes controlAnimation-4 
{0% 
{color: #FFB900;}
7.1%, 25% 
{color: #7A8999;}
32.1%, 100% 
{color: #FFB900;}
}
@keyframes controlAnimation-4 
{0% 
{color: #FFB900;}
7.1%, 25% 
{color: #7A8999;}
32.1%, 100% 
{color: #FFB900;}
}
@-webkit-keyframes galleryAnimation-4 
{0% 
{opacity: 0;}
7.1%, 25% 
{opacity: 1;}
32.1%, 100% 
{opacity: 0;}
}
@-o-keyframes galleryAnimation-4 
{0% 
{opacity: 0;}
7.1%, 25% 
{opacity: 1;}
32.1%, 100% 
{opacity: 0;}
}
@keyframes galleryAnimation-4 
{0%
{opacity: 0;}
7.1%, 25% 
{opacity: 1;}
32.1%, 100% 
{opacity: 0;}
}
.items-4.autoplay .control-button 
{-webkit-animation: controlAnimation-4 28s infinite;
  -o-animation: controlAnimation-4 28s infinite;
  animation: controlAnimation-4 28s infinite;}
.items-4.autoplay .item 
{ -webkit-animation: galleryAnimation-4 28s infinite;
  -o-animation: galleryAnimation-4 28s infinite;
  animation: galleryAnimation-4 28s infinite;}
.items-4 .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) 
{ pointer-events: auto;
  opacity: 1;}
.items-4 .control-button:nth-of-type(1),
.items-4 .item:nth-of-type(1) 
{ -webkit-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;}
.items-4 .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) 
{pointer-events: auto;
  opacity: 1;}
.items-4 .control-button:nth-of-type(2),
.items-4 .item:nth-of-type(2) 
 -webkit-animation-delay: 5s;
-o-animation-delay: 5s;
  animation-delay: 5s;}
.items-4 .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) 
{pointer-events: auto;
  opacity: 1;}
.items-4 .control-button:nth-of-type(3),
.items-4 .item:nth-of-type(3) 
{ -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;}
.items-4 .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) 
{pointer-events: auto;
  opacity: 1;}
.items-4 .control-button:nth-of-type(4),
.items-4 .item:nth-of-type(4) 
{ -webkit-animation-delay: 19s;
  -o-animation-delay: 19s;
  animation-delay: 19s;}
@-webkit-keyframes controlAnimation-5 
{ 0% 
{color: #FFB900;}
5.7%, 20% 
{color: #7A8999;}
25.7%, 100% 
{color: #FFB900;}
}
@-o-keyframes controlAnimation-5 
{0% 
{color: #FFB900;}
5.7%, 20% 
{color: #7A8999;}
25.7%, 100% 
{color: #FFB900;}
}
@keyframes controlAnimation-5 
{0% 
{color: #FFB900;}
5.7%, 20% 
{color: #7A8999;}
25.7%, 100% 
{color: #FFB900;}
}
@-webkit-keyframes galleryAnimation-5 
{0%
{opacity: 0;}
5.7%, 20%
{opacity: 1; }
25.7%, 100% 
{opacity: 0;}
}
@-o-keyframes galleryAnimation-5 
{ 0% 
{opacity: 0;}
5.7%, 20% 
{opacity: 1;}
25.7%, 100% 
{opacity: 0;}
}
@keyframes galleryAnimation-5 {
  0% 
{opacity: 0;}
5.7%, 20% 
{opacity: 1;}
25.7%, 100% 
{opacity: 0;}
}
.items-5.autoplay .control-button 
{  -webkit-animation: controlAnimation-5 35s infinite;
  -o-animation: controlAnimation-5 35s infinite;
  animation: controlAnimation-5 35s infinite;}
.items-5.autoplay .item 
{  -webkit-animation: galleryAnimation-5 35s infinite;
  -o-animation: galleryAnimation-5 35s infinite;
  animation: galleryAnimation-5 35s infinite;}
.items-5 .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(1),
.items-5 .item:nth-of-type(1) 
{  -webkit-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;}
.items-5 .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(2),
.items-5 .item:nth-of-type(2) 
{  -webkit-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;}
.items-5 .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(3),
.items-5 .item:nth-of-type(3) 
{  -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;}
.items-5 .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(4),
.items-5 .item:nth-of-type(4) 
{  -webkit-animation-delay: 19s;
  -o-animation-delay: 19s;
  animation-delay: 19s;}
.items-5 .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(5),
.items-5 .item:nth-of-type(5) 
{ -webkit-animation-delay: 26s;
  -o-animation-delay: 26s;
  animation-delay: 26s;}
.gallery .control-button
{color: #FFB900;}
.gallery .control-button:hover 
{color: #7A8999;}
.gallery 
{ position: relative;}
.gallery .item 
{ height: 200px;
  overflow: hidden;
  text-align: center;
 float:left;
  background: #EFF5FC;
border: 1px solid #234367;}
.gallery .controls 
{  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;}
.gallery .control-button 
{  display: inline-block;
  margin: 0 .02em;
  font-size: 3em;
  text-align: center;
  text-decoration: none;
  -webkit-transition: color .1s;
  -o-transition: color .1s;
  transition: color .1s;}
</style>

</div>

You are not authorized to comment here. Your must be registered and logged in to comment