<!--HTML-->
<script type="text/javascript">
function move(id,spd) {
 var obj=document.getElementById(id);
 var max=-obj.offsetHeight+obj.parentNode.offsetHeight;
 var top=parseInt(obj.style.top);

 if ((spd>0&&top<=0)||(spd<0&&top>=max)){
  obj.style.top=top+spd+"px";
  move.to=setTimeout(function(){ move(id,spd); },20);
 }
 else obj.style.top=(spd>0?0:max)+"px";
}
</script>



<style type="text/css">
.faq2 { width: 612px; height: 800; margin-left: -1px; padding-top: 120px; padding-bottom: 30px; display: ; background: url(http://funkyimg.com/i/2gdHK.png) top no-repeat, url(http://funkyimg.com/i/2gdHL.png) bottom no-repeat, url(http://funkyimg.com/i/2gdHM.png) repeat-y;} 

#rt1 img { float: right; margin: 0 2px 1px 0; border: 1px solid #D8EAC2; padding: 0px; width: 80px; }
#rt2 img { float: left; margin: 0 2px 1px 0; border: 1px solid #D8EAC2; padding: 0px; width: 80px; }

</style>

<center>


<div class="faq2">

<br>


<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
<center>
<div style="width: 450px; background: #; padding: 20px;">
<div style="font-family: lobster; font-size: 35px; color: #6e1002; margin-left: 163px; line-height: 70%;">ххх</div>
<div style="width: 220px; height: 8px; background: #feb813; border-left: 80px solid #400601; border-right: 150px solid #d15f00;"></div>
<div style="width: 500px; height: auto; font-family: Cuprum; font-size: 16px; line-height: 95%; color: #400601; overflow: ; text-align: justify; padding-top: 20px; margin-bottom: -15px; margin-left: -30px;">
<link href="dark.css" type="text/css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>

<style type="text/css">




#tab-content1::-webkit-scrollbar {width: 5px; background: fff}
#tab-content1::-webkit-scrollbar-thumb {background:fff}
#tab-content1::-webkit-scrollbar-corner {background:fff}

#tab-content2::-webkit-scrollbar {width: 5px; background: fff}
#tab-content2::-webkit-scrollbar-thumb {background:fff}
#tab-content2::-webkit-scrollbar-corner {background:fff}

#tab-content3::-webkit-scrollbar {width: 5px; background: fff}
#tab-content3::-webkit-scrollbar-thumb {background:fff}
#tab-content3::-webkit-scrollbar-corner {background:fff}

#tab-content4::-webkit-scrollbar {width: 5px; background: fff}
#tab-content4::-webkit-scrollbar-thumb {background:fff}
#tab-content4::-webkit-scrollbar-corner {background:fff}

#tab-content5::-webkit-scrollbar {width: 5px; background: fff}
#tab-content5::-webkit-scrollbar-thumb {background:fff}
#tab-content5::-webkit-scrollbar-corner {background:fff}

#tab-content6::-webkit-scrollbar {width: 5px; background: fff}
#tab-content6::-webkit-scrollbar-thumb {background:fff}
#tab-content6::-webkit-scrollbar-corner {background:fff}

.pages [type=radio] {
/*position: absolute;
 top: -9999px;
 left: -9999px;  */ 
 display: none;
}

   
.dcontainer {
width: 500px;
height: 500px;
font-family: 'Open Sans Condensed';
   background: url();
   margin: 0 auto;
   padding-left: 20px;
   padding-top: 20px;

}


   
.pages {
   float: none;
   list-style-type: none;
   position: relative;
   padding: 0;
}

.pages p {
margin: 0;
padding: 0;
}

.pages li{
       float: left;
     }
     
.pages label {
         display: block;
         /*padding: 10px 20px;*/
         border-radius: 2px;
        /* color: #08C;
         font-size: 24px;
         font-weight: normal;
         font-family: 'Lily Script One', helveti;
         background: rgba(255,255,255,0.2);
         cursor: pointer;*/
         width: 85px;
         padding: 5px 0 5px 0;
         margin: 0 9px 0 0;
         text-align: center;
 	font-size: 14px;
 	text-shadow: 1px 1px 0 #fff;
         background-color:#EEF0F2;
         text-transform: uppercase;
         -webkit-transition: all 0.2s ease-in-out;
         -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
         transition: all 0.2s ease-in-out;
     }
     
.pages label:hover {
background-color:#A2999E;
}
      
[id^=tab]:checked + label {
   top: 0;
   background-color:#98473E;
}
      
[id^=tab]:checked ~ [id^=tab-content] {
   display: block;
}

.tab-content{
width: 461px;
height: 340px;
border-radius: 2px;
overflow: auto;
background:#EEF0F2;
   z-index: 2;
   display: none;
   text-align: left;
   line-height: 120%;
   padding: 15px;
   position: absolute;
   top: 30px;
   left: 0;

   font-size: 13px;
   box-sizing: border-box;
   -webkit-animation-duration: 0.5s;
   -o-animation-duration: 0.5s;
   -moz-animation-duration: 0.5s;
   animation-duration: 0.5s;
}
</style>

<div class="dcontainer">

<div class="dimage"> 
<h2> First.Last</h2>
</div>

<ul class="pages">
       <li>
         <input type="radio" checked name="pages" id="tab1">
         <label for="tab1"><p>Profile</p></label></class>
         <div id="tab-content1" class="tab-content animated fadeIn">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum scelerisque ex, at fringilla enim blandit at. Maecenas convallis enim velit, pharetra malesuada arcu suscipit sed. Nulla metus nulla, euismod vel aliquet vel, consequat quis velit. Pellentesque scelerisque nibh ut dolor tincidunt, sit amet interdum urna fringilla. Nunc posuere turpis vel enim rhoncus hendrerit vestibulum sit amet metus. Vestibulum efficitur bibendum accumsan. Ut sollicitudin ut nisi ut porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut rhoncus nunc sed hendrerit congue. Cras id augue scelerisque, euismod leo eget, tristique dolor. Duis volutpat velit quam, consectetur ullamcorper diam finibus a.
         </div>
       </li>
       <li>
         <input type="radio" name="pages" id="tab2">
         <label for="tab2"><p>Ships</p></label>
         <div id="tab-content2" class="tab-content animated fadeIn">
         Fusce quis mollis odio. Curabitur ut ex sed massa facilisis scelerisque. Etiam tincidunt tortor dolor, sit amet viverra leo lobortis at. Pellentesque mollis nisi at quam placerat vehicula. Ut leo odio, pellentesque sed viverra non, hendrerit vel arcu. Donec nec erat sed tortor blandit facilisis eu at quam. In sagittis sodales lectus, a pretium lorem rhoncus id. Aliquam interdum metus et consequat dapibus.
         </div>
       </li>
       <li>
         <input type="radio" name="pages" id="tab3">
         <label for="tab3"><p>Other</p></label>
         <div id="tab-content3" class="tab-content animated fadeIn">
          Aliquam purus ante, volutpat sit amet lacus ac, convallis efficitur quam. Ut bibendum, sapien non vehicula imperdiet, justo eros feugiat orci, ut laoreet metus lorem vel nibh. In posuere sapien quis erat blandit cursus. Quisque at felis eu mi vehicula feugiat. Aliquam pretium ante odio. Phasellus in elementum sapien. Donec laoreet consequat lacus ut consequat. Curabitur ut nisi bibendum, venenatis lorem eu, mattis elit. Fusce metus eros, maximus vitae aliquet a, efficitur non diam. Phasellus dictum pretium elit, sit amet scelerisque lectus lacinia in. Morbi volutpat nunc eu metus iaculis semper. Ut vitae euismod nunc, at cursus tellus. Aliquam molestie tincidunt enim. Aliquam ut tellus accumsan tellus convallis molestie. Maecenas facilisis sed dolor ac interdum.
         </div>
       </li>
<li>
         <input type="radio" checked name="pages" id="tab4">
         <label for="tab4"><p>hhrgrg</p></label>
         <div id="tab-content4" class="tab-content animated fadeIn">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum scelerisque ex, at fringilla enim blandit at. Maecenas convallis enim velit, pharetra malesuada arcu suscipit sed. Nulla metus nulla, euismod vel aliquet vel, consequat quis velit. Pellentesque scelerisque nibh ut dolor tincidunt, sit amet interdum urna fringilla. Nunc posuere turpis vel enim rhoncus hendrerit vestibulum sit amet metus. Vestibulum efficitur bibendum accumsan. Ut sollicitudin ut nisi ut porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut rhoncus nunc sed hendrerit congue. Cras id augue scelerisque, euismod leo eget, tristique dolor. Duis volutpat velit quam, consectetur ullamcorper diam finibus a.
         </div>
       </li>

<li>
         <input type="radio" checked name="pages" id="tab5">
         <label for="tab5"><p>gggg</p></label>
         <div id="tab-content5" class="tab-content animated fadeIn">
     HUjsdjfhsjdfhjksgfshdg
         </div>
       </li>
<li>
         <input type="radio" checked name="pages" id="tab6">
         <label for="tab6"><p>Rrarr</p></label>
         <div id="tab-content6" class="tab-content animated fadeIn">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum scelerisque ex, at fringilla enim blandit at. Maecenas convallis enim velit, pharetra malesuada arcu suscipit sed. Nulla metus nulla, euismod vel aliquet vel, consequat quis velit. Pellentesque scelerisque nibh ut dolor tincidunt, sit amet interdum urna fringilla. Nunc posuere turpis vel enim rhoncus hendrerit vestibulum sit amet metus. Vestibulum efficitur bibendum accumsan. Ut sollicitudin ut nisi ut porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut rhoncus nunc sed hendrerit congue. Cras id augue scelerisque, euismod leo eget, tristique dolor. Duis volutpat velit quam, consectetur ullamcorper diam finibus a.
         </div>
       </li>
</ul>

</div>
<br><br><br>
</center>