<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” />
<title>Swanky little accordian list</title>

<style type=”text/css”>

/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Oswald);
/* Variables */
/* Styles */
body {
background: #86bb89;
font-family: “Oswald”, sans-serif;
}
body .title {
width: 500px;
margin: 0 auto;
text-align: center;
}
body .title h1,
body .title h2 {
color: white;
font-weight: normal;
margin: 0;
text-shadow: 0px 2px rgba(0, 0, 0, 0.18);
}
body .title h1 {
font-size: 30px;
margin-top: 40px;
}
body .title h2 {
font-size: 15px;
margin-bottom: 30px;
}
body .wrapper {
width: 400px;
margin: 0 auto;
background: white;
border-radius: 4px;
position: relative;
box-shadow: 0px 2px rgba(0, 0, 0, 0.12);
}
body .wrapper label {
display: block;
position: relative;
color: #b5abab;
overflow: hidden;
cursor: pointer;
height: 56px;
-webkit-transition: text-indent 0.2s;
text-indent: 20px;
padding-top: 1px;
}
body .wrapper ul {
margin: 0;
padding: 0;
}
body .wrapper li {
color: white;
list-style-type: none;
}
body .wrapper li a {
display: block;
width: 100%;
padding: 15px 0px;
text-decoration: none;
color: white;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body .wrapper li a:hover {
background-color: rgba(0, 0, 0, 0.06);
}
body .wrapper label:hover {
background: rgba(203, 228, 205, 0.6) !important;
color: #4f7351;
text-indent: 30px;
transition: text-indent 0.2s;
}
body .wrapper input[type=checkbox] {
display: none;
}
body .wrapper span {
height: 3px;
position: absolute;
width: 0px;
display: block;
top: 58px;
background: #38b087;
}
body .wrapper .content {
height: 0;
background: rgba(92, 127, 94, 0.72);
height: 300px;
position: relative;
border-top: 2px solid rgba(0, 0, 0, 0.12);
top: 4px;
}
body .wrapper .lil_arrow {
width: 5px;
height: 5px;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
border-top: 2px solid rgba(0, 0, 0, 0.33);
border-right: 2px solid rgba(0, 0, 0, 0.33);
float: right;
position: relative;
top: -30px;
right: 27px;
transform: rotate(45deg);
}
body .wrapper input[type=checkbox]:checked + label > .content {
display: block;
}
body .wrapper input[type=checkbox]:checked + label > span {
display: none;
}
body .wrapper input[type=checkbox]:checked + label > .lil_arrow {
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform: rotate(135deg);
}
body .wrapper input[type=checkbox]:checked + label {
display: block;
background: rgba(203, 228, 205, 0.6) !important;
color: #4f7351;
text-indent: 30px;
height: 225px;
transition: height 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
body .wrapper label:hover > span {
width: 100%;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: width 0.4s;
}
body .wrapper input[type=checkbox]:not(:checked) + label {
display: block;
transition: height 0.8s;
height: 60px;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

::-webkit-scrollbar {
display: none;
}

</style>
</head>

<body>
<div class=’title’>
</div>
<div class=’wrapper’>
<input id=’pictures’ type=’checkbox’>
<label for=’pictures’>
<p>Microsoft VIVA</p>
<div class=’lil_arrow’></div>
<div class=’content’>
<ul>
<li>
<a href=’#’>Design briefs</a>
</li>
<li>
<a href=’#’>Non Disclosure</a>
</li>
<li>
<a href=’#’>Company Brochure</a>
</li>
</ul>
</div>
<span></span>
</label>
<input id=’jobs’ type=’checkbox’>
<label for=’jobs’>
<p>Upcoming Jobs</p>
<div class=’lil_arrow’></div>
<div class=’content’>
<ul>
<li>
<a href=’#’>Weekly Forecast</a>
</li>
<li>
<a href=’#’>Timescales</a>
</li>
<li>
<a href=’#’>Quotes</a>
</li>
</ul>
</div>
<span></span>
</label>
<input id=’events’ type=’checkbox’>
<label for=’events’>
<p>Events & Task Management</p>
<div class=’lil_arrow’></div>
<div class=’content’>
<ul>
<li>
<a href=’#’>Calendar</a>
</li>
<li>
<a href=’#’>Important Dates</a>
</li>
<li>
<a href=’#’>Someting Event related</a>
</li>
</ul>
</div>
<span></span>
</label>
<input id=’financial’ type=’checkbox’>
<label for=’financial’>
<p>Invoicing & financial</p>
<div class=’lil_arrow’></div>
<div class=’content’>
<ul>
<li>
<a href=’#’>Invoicing Templates</a>
</li>
<li>
<a href=’#’>Invoice Archives</a>
</li>
<li>
<a href=’#’>Send Invoice</a>
</li>
</ul>
</div>
<span></span>
</label>
<input id=’settings’ type=’checkbox’>
<label for=’settings’>
<p>System Settings</p>
<div class=’lil_arrow’></div>
<div class=’content’>
<ul>
<li>
<a href=’#’>User Settings</a>
</li>
<li>
<a href=’#’>Edit Profile</a>
</li>
<li>
<a href=’#’>Do something cool</a>
</li>
</ul>
</div>
<span></span>
</label>
</div>

</body>

</html>