@font-face { 
 font-family: 'icomoon'; 
 src:url('../fonts/icomoon.eot'); 
 src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), 
 url('../fonts/icomoon.woff') format('woff'), 
 url('../fonts/icomoon.ttf') format('truetype'), 
 url('../fonts/icomoon.svg#icomoon') format('svg'); 
 font-weight: normal; 
 font-style: normal; 
 } 
 .dr-menu { 
 width: 100%; 
 max-width: 400px; 
 min-width: 300px; 
 position: relative; 
 font-size: 1.3em; 
 line-height: 2.5; 
 font-weight: 400; 
 color: #fff; 
 padding-top: 2em; 
 } 
 .dr-menu > div { 
 cursor: pointer; 
 position: absolute; 
 width: 100%; 
 z-index: 100; 
 } 
 .dr-menu > div .dr-icon { 
 top: 0; 
 left: 0; 
 position: absolute; 
 font-size: 150%; 
 line-height: 1.6; 
 padding: 0 10px; 
 transition: all 0.4s ease; 
 } 
 .dr-menu.dr-menu-open > div .dr-icon { 
 color: #60a773; 
 left: 100%; 
 transform: translateX(-100%); 
 } 
 .dr-menu > div .dr-icon:after { 
 content: "\e008"; 
 position: absolute; 
 font-size: 50%; 
 line-height: 3.25; 
 left: -10%; 
 opacity: 0; 
 } 
 .dr-menu.dr-menu-open > div .dr-icon:after { 
 opacity: 1; 
 } 
 .dr-menu > div .dr-label { 
 padding-left: 3em; 
 position: relative; 
 display: block; 
 color: #60a773; 
 font-size: 0.9em; 
 font-weight: 700; 
 letter-spacing: 1px; 
 text-transform: uppercase; 
 line-height: 2.75; 
 transition: all 0.2s ease-in; 
 } 

 .dr-menu.dr-menu-open > div .dr-label { 
 transform: translateY(-90%); 
 } 
 .dr-menu ul { 
 padding: 0; 
 margin: 0 3em 0 0; 
 list-style: none; 
 opacity: 0; 
 position: relative; 
 z-index: 0; 
 pointer-events: none; 
 transition: opacity 0s linear 205ms; 
 } 
 .dr-menu.dr-menu-open ul { 
 opacity: 1; 
 z-index: 200; 
 pointer-events: auto; 
 transition: opacity 0s linear 0s; 
 } 

 .dr-menu ul li { 
 display: block; 
 margin: 0 0 5px 0; 
 opacity: 0; 
 transition: opacity 0.3s ease; 
 } 

 .dr-menu.dr-menu-open ul li { 
 opacity: 1; 
 } 

 .dr-menu.dr-menu-open ul li:nth-child(2) { 
 transition-delay: 35ms; 
 } 

 .dr-menu.dr-menu-open ul li:nth-child(3) { 
 transition-delay: 70ms; 
 } 

 .dr-menu.dr-menu-open ul li:nth-child(4) { 
 transition-delay: 105ms; 
 } 

 .dr-menu.dr-menu-open ul li:nth-child(5) { 
 transition-delay: 140ms; 
 } 

 .dr-menu.dr-menu-open ul li:nth-child(6) { 
 transition-delay: 175ms; 
 } 

 .dr-menu.dr-menu-open ul li:nth-child(7) { 
 transition-delay: 205ms; 
 } 

 .dr-menu ul li a { 
 display: inline-block; 
 padding: 0 20px; 
 color: #fff; 
 } 

 .dr-menu ul li a:hover { 
 color: #60a773; 
 } 

 .dr-icon:before, 
 .dr-icon:after { 
 position: relative; 
 font-family: 'icomoon'; 
 speak: none; 
 font-style: normal; 
 font-weight: normal; 
 font-variant: normal; 
 text-transform: none; 
 -webkit-font-smoothing: antialiased; 
 } 

 .dr-menu ul .dr-icon:before { 
 margin-right: 15px; 
 } 

 .dr-icon-bullhorn:before { 
 content: "\e000"; 
 } 

 .dr-icon-camera:before { 
 content: "\e002"; 
 } 

 .dr-icon-heart:before { 
 content: "\e003"; 
 } 

 .dr-icon-settings:before { 
 content: "\e004"; 
 } 

 .dr-icon-switch:before { 
 content: "\e005"; 
 } 

 .dr-icon-download:before { 
 content: "\e006"; 
 } 

 .dr-icon-user:before { 
 content: "\e001"; 
 } 

 .dr-icon-menu:before { 
 content: "\e007"; 
 }

/* Функция Кто Онлайн для uCoz в стиле минимализм 
------------------------------------------*/ 
.statistics-user { 
 float:left; 
 width:230px; 
 padding: 5px 10px; 
 background: #fff; 
 border: 1px solid #CAD3DA; 
 border-radius:5px; 
} 

.statistics-user-l { 
 float:left; 
 width:90px; 
} 

.statistics-user-l b, 
.statistics-user-l div{ 
 float:left; 
 width:90px; 
} 

.statistics-user-l b { 
 padding-bottom: 3px; 
 border-bottom: 1px solid #CAD3DA; 
 font-size:14px; 
 color:#666; 
} 

.statistics-user-l div{ 
 color:#999; 
 height:37px; 
 padding: 3px 0px 0px 37px; 
 display:block; 
 background: url(http://webo4ka.ru/Ucoz7/statistics-user.png) no-repeat; 
} 

#onl1 {background-position:0px 0px;} 
#onl2 {background-position:0px -35px;} 
#onl3 {background-position:0px -69px;} 
#onl3 b {border-bottom:none } 

.statistics-user-r{ 
 float:right; 
 width:88px; 
 padding: 5px 0px 0px 7px; 
 border-left: 1px solid #CAD3DA; 
} 

.statistics-user-r img{ 
 margin-bottom: 5px; 
} 

.statistics-user a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);}
/*<!-- Панель разработчика -->*/ 
 .devpanell{position:fixed;top:70%;left:0;} 
 
 .devpanell a{background:#939AA4;display:block;font: 11px Tahoma;color:#fff;text-decoration:none;padding: 5px;text-align: center;} 
 .devpanell a:first-child{border-radius: 0 3px 0 0} 
 .devpanell a:last-child{border-radius: 0 0 3px 0 !important;} 
 
 .devpanell a:hover{background:#757A82;text-decoration:none;} 
 .devpanell a img{display:block} 
 .devpanell a:hover img{opacity:.5} 
 .devpanell a:active,.devpanell-active{background: #575B60 !important;box-shadow: inset 0 0 5px -2px rgba(0,0,0,.5)} 
 
 .devpanell-vars{display:none;top:0px;position: absolute;padding: 10px;background:#939AA4;border-radius: 0px;left:36px;border-radius:2px;text-shadow: rgba(0, 0, 0, 0.149) 0px 1px 0px;box-shadow: inset 0px -2px rgba(255, 255, 255, 0.102), inset 0px -3px rgba(0, 0, 0, 0.102), 0px 1px rgba(0, 0, 0, 0.047);} 
 .devpanell-vars:after{border-color: transparent #939AA4;content: '';position: absolute;border-style: solid;border-width: 5px 5px 5px 0;display: block;width: 0;z-index: 1;left: -5px;top: 9px;} 
 .devpanell-vars:before{border-color: transparent;content: '';position: absolute;border-style: solid;border-width: 5px 5px 5px 0;display: block;width: 0;z-index: 0;left: -6px;top: 9px;} 
 /*<!-- Панель разработчика -->*/
.uwaid_panel {position: fixed; right:10px; bottom:10px; display:none; list-style: none; margin: 0; padding: 0; z-index:9999999999999;} 
.uwaid_panel a { width: 200px; height: 40px; text-decoration:none; display: block; padding: 9px;text-align: left; font: 16px Tahoma; line-height: 37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; } 
.uwaid_panel a:hover { text-decoration:none;} 
.uwaid_panel a img, .uwaid_icon { height: 40px; width: 40px; float: left; margin-right: 9px; } 
.uwaid_panel a span {border-radius: 46px;float: right;padding: 0 15px;font-size: 13px;} 
.uwaid_icon {background:url('http://webo4ka.ru/_ld/39/18148035.png');} 
.settings {background-position-y: -40px;} 
.exit {background-position-y: -80px;} 
.my_profile {padding: 0 23px;z-index:9999999999999; text-align:center; font:16px Tahoma; line-height:37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; position:fixed; right:10px; bottom:10px;} 
.my_profile:hover {cursor:pointer;} 
.close_p {position: absolute;margin-left: 216px;border-radius: 17px;padding: 4px 8px;margin-top: -14px;} 
.close_p:hover {cursor:pointer;} 
/* Цветовые стили */ 
.uwaid_panel {border:7px solid #33373b;border-bottom:6px solid #33373b;border-left:none; } 
.uwaid_panel a {background: #272a2d; border-left:7px solid #33373b;color: #fff;} 
.uwaid_panel a:hover {background:#232629;border-left:7px solid #e05b5b;} 
.uwaid_panel a span {background: #e05b5b;} 
.my_profile {border:7px solid #33373b;background: #272a2d;color:#fff;} 
.my_profile:hover {background:#454B50;} 
.close_p {background: #e05b5b;color: #fff;} 
.close_p:hover {background:#F87676;}
<style type="text/css"> 
.clan_clean {padding:8px;border:1px solid #D4D4D4;background:#FFF;margin-bottom:5px} 
.clan_clean table {border:0;border-collapse:collapse;width:100%;} 
.clan_clean table td {border:0;padding:0px;vertical-align:top;text-align:left;font-size:14px;font-family:Arial;color:#161616} 
.clan_clean table .avatar {width:110px} 
.clan_clean table .avatar div {width:100px;height:100px;overflow:hidden} 
.clan_clean i {font-style:normal;color:#727272} 
.clan_clean ul {list-style-type:none;margin:0;padding:0;} 
.clan_clean li {margin:0;padding:0;padding-left:16px; padding-top:2px;padding-bottom:7px;} 
.clan_clean .user {background: url('http://yraaa.ru/test/106/user.gif') 0px 3px no-repeat} 
.clan_clean .icq {background: url('http://yraaa.ru/test/106/icq.gif') 0px 3px no-repeat;color:#35932E} 
.clan_clean .skype {background: url('http://yraaa.ru/test/106/skype.gif') 0px 3px no-repeat;color:#1EA0D7} 
.clan_clean .vkontakte {background: url('http://yraaa.ru/test/106/vkontakte.gif') 0px 3px no-repeat;color:#354F69} 
.clan_clean .facebook {background: url('http://yraaa.ru/test/106/facebook.gif') 0px 3px no-repeat;color:#5366A0} 
.clan_clean .twitter {background: url('http://yraaa.ru/test/106/twitter.gif') 0px 3px no-repeat;color:#2197CA} 
.clan_clean .russia {background: url('http://yraaa.ru/test/106/russia.gif') 0px 3px no-repeat} 
.clan_clean .ukraine {background: url('http://yraaa.ru/test/106/ukraine.gif') 0px 3px no-repeat} 
</style> 


h1{
 font-size:11pt;
}

h2{
 font-size:9pt;
}

h3{
 font-size:8pt;
}

/* start reset css */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { border: 0; vertical-align: baseline; margin: 0; padding: 0; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
html,textarea { overflow: auto; }
textarea, input { resize: none; outline: none }
body { background: #000 url(/img/bg.jpg) no-repeat center top; font-family: Cuprum; font-size: 13px; color: #444444; }
body,td {font-family: Cuprum; font-size: 13px; color: #444444;}
a { color: #fff; font-family: Cuprum; font-size: 13px; text-decoration: none }
a:hover { text-decoration: underline }
ol,ul { list-style: none; }
blockquote,q { quotes: none; }
blockquote:before,blockquote:after,q:before,q:after { content: none; }
table{ border-collapse: collapse; border-spacing: 0; }
img { vertical-align: top; }
:focus { outline: none; }
/* end reset css */

/* 
float: left, float: right clears automatically

inline-block is working for Internet Explorer 7

internet explorer class:
.ie .class { background: red; } 
.ie7 .class { background: red; } 
.ie8lte .class { background: red; } 
.ie8 .class { background: red; } 
.ie8gte .class { background: red; } 
.ie9 .class { background: red; } 
*/


@font-face {font-family:Cuprum;src:url(/ttf/Cuprum-Regular.ttf);}


.clear_auto { clear: both; display: block; height: 0; line-height: 0; font-size: 0; margin: 0; padding: 0; border: 0; }
.clear:after { clear: both; display: block; content: "."; height: 0; visibility: hidden; font-size: 0; line-height: 0; }
#wrapper { width: 1000px; margin: 0 auto; }
.header { height: 220px; position: relative; }
.header a { display: block; width: 359px; height: 64px; top: 36px; position: absolute } 
.nav { background: url(/img/nav_bg.png) no-repeat; height: 68px; margin: -5px 0 0 0; position: relative }
.nav ul { position: absolute; top: 27px }
.nav li { display: block; float: left }
.nav ul li a {margin: 0 0 0 2px; background: url(/img/nav_el.png) no-repeat left 0, url(/img/nav_el.png) no-repeat right -26px; height: 25px; display: block; padding:1px 15px 0 15px; float: left; font-family: Cuprum; font-size: 15px; text-shadow: 1px 1px #3d3530; line-height: 25px }
.nav ul li:hover a { background: url(/img/nav_el.png) no-repeat left -52px, url(/img/nav_el.png) no-repeat right -78px; height: 26px; display: block; font-family: Cuprum; font-size: 15px; text-shadow: 1px 1px #3d3530;text-decoration: none }
.nav a.reg { background: url(/img/reg_lnk.png) no-repeat; height: 57px; width: 189px; display: block; position: absolute; right: 0; top: 14px } 
.nav a.reg:hover { opacity: 0.9 } 
.nav .load { background: url(/img/load_warface.png) no-repeat; height:57px; width: 268px; display: block; position: absolute; bottom: -43px; left: -57px } 
.nav .load a { display: block; width: 147px; height: 36px; position: absolute; top: 20px; left: 65px; } 
.middle_cont { background: url(/img/middle_bg.png) repeat-y; width: 990px;padding: 0 5px 45px 5px; -webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; }
.side_left { float: left; width: 206px; padding: 43px 0 0 0 }
.side_right { float: right; width: 206px }
.side_center { margin: 0 225px; padding: 5px 0 0 0; } 
.blocktitle { background: url(/img/blocktitle.png) no-repeat; height: 36px; font-family: Cuprum; position: relative; font-size: 16px; text-shadow: 0 1px #492122; color: #f6f4f4; line-height: 36px; padding: 0 0 0 19px; letter-spacing: -1px }
.blockcontent { background: url(/img/blockbottom.png) no-repeat center bottom, url(/img/bcontent.png) repeat-y; overflow: hidden; padding: 0 5px 6px 5px}
.bnav li a { background: url(/img/bnav.png) no-repeat; width: 180px; display: block; height: 22px; line-height: 22px; font-family: Cuprum; font-size: 14px; text-transform: uppercase; padding:2px 8px 0 8px; text-decoration: none; text-shadow: 1px 1px #202121; letter-spacing: -1px}
.bnav li a:hover { background-position: 0 -24px }
.binf li { background: #151515 url(/img/bInfcont.png) repeat-x center bottom;; position: relative }
.binf li .text { font-family: Cuprum; font-size: 13px; text-shadow: 0 1px #141414; color: #d5d5d5; top: 10px; padding: 5px 11px 26px 11px } 
.binf li .podr { position: absolute; bottom: 2px; left: 11px; color: #6d6d6d; text-transform: uppercase ;font-family:Tahoma;}
.binfo { background: url(/img/info_t.png) no-repeat center top, url(/img/info_b.png) no-repeat center bottom, url(/img/info_c.png) repeat-y center center; width: 510px; overflow: hidden; padding: 12px 15px 15px 15px; font-size: 13px; color: #4f4f4f; }
.binfo div[align="right"] a { color: #916060 }
.viewn_loop { overflow: hidden; margin: 3px 0 0 0; width: 545px}
.viewn_t { background: url(/img/viewn_t.png) no-repeat; height: 22px; padding: 13px 0 0 11px; position: relative;text-shadow: 0 1px #141414;color:#fff; }
.viewn_t a { font-family: Cuprum; font-size: 14px; text-shadow: 0 1px #141414; color: #d5d5d5; }
.viewn_c { background: url(/img/viewn_bg_c.png) repeat-y; width: 545px }
.viewn_pan { background: url(/img/panel.png) no-repeat; height: 29px; position: relative }
.rating { position: absolute; left: 6px; top: 4px}
.cur_rating { background: url(/img/cur_rating.png) no-repeat; height: 15px; width: 32px; position: absolute; left: 107px; top: 5px; text-align: center; line-height: 15px; color: #fff; font-family: Cuprum; font-size: 14px; text-shadow: 0 1px #9b4343;} 
.panel { position: absolute; left: 150px }
.panel li { background: url(/img/hr_viewn.png) no-repeat right 0; height: 21px; display: block; float: left; padding: 0 7px; line-height: 23px; color: #ffd7d7; font-family: Cuprum; font-size: 13px; text-shadow: 0 1px #542727; }
.viewn_c2 { background:url(/img/info_b.png) no-repeat left bottom, url(/img/viewn_bg_c.png) repeat-y; width: 520px; overflow: hidden; padding: 0 15px 7px 10px; font-family: Cuprum; font-size: 14px; color: #585858; line-height: 18px }
.viewn_c3 { background:url(/img/info_b.png) no-repeat left bottom, url(/img/viewn_bg_c.png) repeat-y; width: 529px; overflow: hidden; padding: 3px 5px 8px 6px; font-family: Cuprum; font-size: 14px; color: #585858; line-height: 18px }
.viewn_left { float: left; margin: 0 11px 5px 0; position: relative; width:136px; height: 160px }
.viewn_left a.loop { background: url(/img/openall.png) no-repeat; display: block; position: absolute; bottom: 0; left: 0; width: 27px; height: 25px }
.viewn_t a.podr { background: url(/img/podr.png) no-repeat; display: block; height: 25px; width: 84px; position: absolute; top: 1px; right: 0px; }
.viewn_t a.podr:hover { background-position: 0 -25px }
.search_panel { height: 28px; width: 217px; background: url(/img/input_textarea.png) no-repeat; margin: 8px 0 0 0; position: relative }
.search_field { background: 0; border: 0; margin: 2px 0 0 10px; height: 20px; line-height: 18px; float: left; width: 168px; color: #5f5f5f; font-family: Cuprum; text-transform: upperacse; font-size: 14px; text-shadow: 1px 1px #1f1f1f; position: absolute }
.search_field::-webkit-input-placeholder, .search_field::-moz-placeholder { color: #5f5f5f; font-family: Cuprum; text-transform: upperacse; font-size: 14px; text-shadow: 1px 1px #1f1f1f; }
.search_sbm { background: url(/img/search_sbm.png) no-repeat 0 1px; height: 28px; width: 37px; float: right; border: 0; position: absolute; right:0; top: -2px; cursor: pointer }
.search_sbm:hover { opacity: 0.8 }
.form_login { background: url(/img/form_bg.png) no-repeat; height: 92px; text-align:left; width: 291px; overflow: hidden; margin: 5px 0 0 0; padding: 15px 0 0 16px }

.loginField, .passwordField { background: url(/img/query.png) no-repeat; height: 22px; width: 174px; border: 0; color: #484848; font-family: Cuprum; font-size: 14px; padding: 0 9px; margin:0px;}
#fcolor {display:block;}
.passwordField { margin: 4px 0 9px 0;}
.form_login a { font-family: Cuprum; font-size: 14px; text-align: center; color: #484848; text-shadow: 1px 1px #111111; padding: 0 0 0 15px; } 
a.logout { background: url(/img/logout.png) no-repeat; height: 26px; width: 68px; position: absolute; top: 7px; right: -1px}
a.inform { display: block; background: url(/img/bform_btns.png) no-repeat; width: 23px; height: 150px; float: left}
a.changeinfo { display: block; background: url(/img/bform_btns.png) no-repeat -23px 0; width: 23px; height: 150px; float: left }
.bava { position: relative; right: -1px }
.catsTable { margin: 0 0 0 5px; width: 185px; }
.catsTable td { position: relative; overflow: hidden; background: url(/img/bcat.png) no-repeat 0 -23px; width: 173px; display: block; height: 23px; line-height: 23px; padding: 0 6px }
.catsTable td a {font-family: Cuprum; font-size: 14px; text-transform: uppercase; text-decoration: none; text-shadow: 1px 1px #202121; color: #6d6d6d; display: block; float: left }
.catsTable td:hover { background-position: 0 0; }
.catsTable td:hover a { text-shadow: 1px 1px #262727; color: #fff }
.catsTable .catNumData { float: right; color: #6d6d6d; text-shadow: 1px 1px #0d0d0d; margin: -2px 10px 0 0 }
.catsTable td:hover .catNumData { color: #fff }
.pagesNav a { display: block;float: left; border: 1px solid #2b5765; padding: 2px 5px; background: #204953; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; color: #fff; font-family: Tahoma; font-size: 11px; margin: 0 3px }
.catDescr { display: none }
/* Paginator */.pages_switch a,.pages_switch b{background:url(/img/switch.png) no-repeat left 0,url(/img/switch.png) no-repeat right -21px; height:21px;display:inline-block;vertical-align:top;font-family:Tahoma;font-size:11px;color:#989898; text-shadow: 1px 1px #232323}
.pages_switch a span,.pages_switch b span{ display:inline-block;height:21px;padding:0 12px;line-height:21px;vertical-align:top;cursor:pointer}
.pages_switch a:hover,.pages_switch b{color:#fff;text-decoration:none; text-shadow: 1px 1px #371b1b }
.pages_switch a:hover span,.pages_switch b span{text-decoration:none;padding:0 12px;height:21px;background:url(/img/switch.png) no-repeat left -42px,url(/img/switch.png) no-repeat right -63px }
/*hovered*/.pages_switch .swchItemDots{height:23px;line-height:23px;display:block;float:left;margin:0 5px 0 0;font-weight:bold}
.pages_switch a span{cursor:pointer}
.pages_switch{margin:7px 14px 3px 14px}
.footer { background: url(/img/footer.png) no-repeat; height: 164px; width: 1000px; position: relative; margin: -4px 0 0 0;}
.footer a { color: #985c5c; }
.copyrights span, .copyrights span a { color: #cf8282 }
.banners { position: absolute; left: 11px ; top: 97px}
.banners li { float: left; margin: 0 6px 0 0}
.copyrights { color: #985c5c; font-family: Cuprum; font-size: 13px; position: absolute; left: 225px; top: 57px; }

/* Paginator */.catPages1 a,.catPages1 b{background:url(/img/switch.png) no-repeat left 0,url(/img/switch.png) no-repeat right -21px; height:21px;display:inline-block;vertical-align:top;font-family:Tahoma;font-size:11px;color:#989898; text-shadow: 1px 1px #232323}
.catPages1 a span,.catPages1 b span{ display:inline-block;height:21px;padding:0 12px;line-height:21px;vertical-align:top;cursor:pointer}
.catPages1 a:hover,.catPages1 b{color:#fff;text-decoration:none; text-shadow: 1px 1px #371b1b }
.catPages1 a:hover span,.catPages1 b span{text-decoration:none;padding:0 12px;height:21px;background:url(/img/switch.png) no-repeat left -42px,url(/img/switch.png) no-repeat right -63px }
/*hovered*/.pages_switch .swchItemDots{height:23px;line-height:23px;display:block;float:left;margin:0 5px 0 0;font-weight:bold}
.catPages1 a span{cursor:pointer}
.catPages1{margin:7px 14px 3px 14px}

hr { border-bottom: 1px dotted #2c2c2c; border-top: none; border-left: none; border-right: none; background: none;}
.searchSbmFl:hover,
.commTable input[type="button"]:hover, .commTable input[type="reset"]:hover, .commSbmFl:hover { opacity: 0.7; cursor: pointer }
.commTable textarea { width: 98%; } 

/* -------------- */
/* User Group Marks */
a.groupModer:link,a.groupModer:visited,a.groupModer:hover {color:5da130;}
a.groupAdmin:link,a.groupAdmin:visited,a.groupAdmin:hover {color:red;}
a.groupVerify:link,a.groupVerify:visited,a.groupVerify:hover {color:#2489f1;}
a.groupFriends:link,a.groupFriends:visited,a.groupFriends:hover {color:yellow;}
a.groupOther1:link,a.groupOther1:visited,a.grou pOther1:hover {color:#a401ab;}
a.groupOther2:link,a.groupOther2:visited,a.grou pOther2:hover {color:#be5f00;}
a.groupOther8:link,a.groupOther8:visited,a.groupOther8:hover {color:#FF8C00;} 
a.groupOther3:link,a.groupOther3:visited,a.grou pOther3:hover {color:#a401ab;}
a.groupOther5:link,a.groupOther5:visited,a.grou pOther5:hover {color:#00FF00;}
a.groupOther4:link,a.groupOther4:visited,a.grou pOther4:hover {color:#8e006b;}
a.groupOTHER7:link,a.groupOTHER7:visited,a.groupOther7:hover {color:#be5f00;}
a.groupOTHER6:link,a.groupOTHER6:visited,a.groupOther6:hover {color:red;}
#bc6, #bc4 { display: none }
.bComm_main { width: 541px; overflow: hidden }
/* ---------------- */

/* User Group Marks Forum*/
a.postuser3:link,a.postuser3:visited,a.postuser3:hover {color:00FF00;text-decoration:none}
a.postuser2:link,a.postuser2:visited,a.postuser2:hover {color:be5f00;text-decoration:none} 
a.postuser4:link,a.postuser4:visited,a.postuser4:hover {color:red;text-decoration:underline}
a.postuser5:link,a.postuser5:visited,a.postuser5:hover {color:a401ab;text-decoration:none}
a.postuser7:link,a.postuser7:visited,a.postuser7:hover {color:a401ab;text-decoration:underline}
a.postuser9:link,a.postuser9:visited,a.postuser9:hover {color:00FF00;text-decoration:underline}
a.postuser6:link,a.postuser6:visited,a.postuser6:hover {color:18eb85;text-decoration:none}
a.postuser10:link,a.postuser10:visited,a.postuser10:hover {color:red;text-decoration:none}
a.postuser12:link,a.postuser12:visited,a.postuser12:hover {color:FF8C00;text-decoration:none}
a.postuser251:link,a.postuser251:visited,a.postuser251:hover {color:yellow;text-decoration:none}
.forumContent a { color: #3a7fba; }
/* ---------------- */
.popup_m { overflow: hidden; width: 856px; margin:300px auto 0 auto; border-radius:5px; background: #1a1a1a; padding: 5px; -moz-border-radius:5px; -webkit-border-radius: 5px; }
.popup_t { color: #fff; padding:10px 0 10px 25px; font-size: 14px; font-family: Cuprum; }
.popup_c { }


/* ------------------- */
.vComm { overflow: hidden; }
.vComm_smiles { display: none }
.vComm_serv { overflow: hidden; padding: 5px 10px }
.vComm_counter { background: url('') no-repeat; float: left; height: 26px; width: 144px; color: #fff; text-shadow: 1px 1px #3c8bab; line-height: 25px; padding: 0 10px; } 
 .vComm_adder { padding: 0 10px }
 .vComm_error { color: red; }
 .vComm_inputs input { display: block; height: 30px; padding: 0 10px; color: #fff; font-family: Verdana; margin: 0 0 1px 0; font-size: 11px;
-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; border: none; background: #454545;width: 520px; }
.vComm_user_panel .vComm_bb { width: 840px; margin: 0 0 5px 0 }
 .vComm_text textarea { display: block; padding: 10px; color: #fff; font-family: Verdana; margin: 0 0 1px 0; font-size: 11px;
-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; border: none; background: #454545;width: 520px; }
.vComm_bb input { border: none; background: url(/img/inp.png) no-repeat left 0, url(/img/inp.png) no-repeat right -23px; height: 23px; padding: 0 8px; text-align: center !important; color: #fff; font-size: 13px; font-family: Cuprum; vertical-align: top; line-height: 21px } 
.vComm_bb select, .vComm_adder select { font-size: 11px !important; font-family: Verdana !important; color: #767676 !important; }
.vComm_bb input:hover, .vComm_inpt input:hover { background: url(/img/inp.png) no-repeat left -46px, url(/img/inp.png) no-repeat right -69px; cursor: pointer }
.vComm_security input {padding: 10px; color: #fff; font-family: Verdana; margin: 0 0 1px 0; font-size: 11px;
-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; border: none; background: #454545; }
.vComm_inpt input { border: none; background: url(/img/inp.png) no-repeat left 0, url(/img/inp.png) no-repeat right -23px; line-height: 21px; height: 23px; padding: 0 8px; text-align: center !important; color: #fff; font-size: 13px; font-family: Cuprum; text-shadow: 1px 1px #3c541a; vertical-align: top; margin:5px auto 0 auto; width: 200px }
.viewn_comm { width: 563px; overflow: hidden }
.viewn_comm_t { background: url('') no-repeat; height: 33px; overflow: hidden }
.viewn_comm_t_in { -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; background:rgba(255,255,255,0.17); height: 25px; margin: 5px 0 0 6px; line-height: 24px; padding: 0 7px; color: #7f6d37; font-family: Cuprum; font-size: 13px; }
.viewn_comm_t_in a { color: #7f6d37; font-family: Cuprum; font-size: 13px;}
.viewn_comm_m { overflow: hidden; padding: 5px 0 5px 4px; }
.viewn_comm_l { float: left; margin: 0 5px 0 0 }
.viewn_comm_message img { -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; }
.viewn_comm_message { float: left; background: #f2eddd; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; padding: 5px; color: #818181 }
.bVote {font:italic bold 13px/1.2 Cuprum, Arial, Helvetica, sans-serif;}

.bVote .answer {width:148px; height:26px; line-height:25px; padding:0 0 0 29px; overflow:hidden; margin:0 0 4px 0; color:#f2e7c7; }
/* Input style start */
.side_center2 input[type="text"],
.side_center2 input[type="password"],
.side_center2 textarea, 
.side_center2 select {margin:1px; font-size:11px;border: none;color:#fff !important; padding:2px; outline:none; -moz-border-radius:3px;-webkit-border-radius:3px;-khtml-border-radius:3px;border-radius:3px; background:#212121; border: 1px solid #2c2c2c}

.side_center2 input[type="text"],
.side_center2 input[type="password"] {padding:2px 0; text-indent:3px;}

.side_center2 input[type="button"],
.side_center2 input[type="submit"],
.side_center2 input[type="reset"], 
.side_center2 button,
span#bc6, span#bc4, span#bc5 {
 outline:none;
 border:1px solid #474747;
 border-top-color:#797979;
 border-bottom-color:#2a2a2a;
 font-size:11px;
 font-weight:bold;
 color:#fff;
 text-shadow:1px 1px 1px #000;
 text-decoration:none;
 text-transform:uppercase;
 margin-bottom: 2px !important;
 margin-top:2px;
 padding:2px 4px;
 cursor: pointer;
 position:relative;
 background:#081018 url('') repeat-x 0 0;
 -webkit-box-shadow:inset 0 0 3px #404040; -moz-box-shadow:inset 0 0 3px #404040; box-shadow:inset 0 0 3px #404040;
-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;
}

#tooltip {
 max-width:400px;
 position: absolute;
 z-index: 10;
 font:normal 9pt Tahoma;
 background:black;
 padding:2px 5px 2px 5px;
 color:#fff;
 border:1px dashed #6d6d6d;
}

#tooltip h3 {
 display:block; 
 margin:0; 
 padding:0; 
 font:normal 9pt Tahoma;
}

/* Страница материалов и комментариев */
.dopPanelM {background:url(../img/dopPanelM.png);width:527px;height:34px;padding:9px 6px 0 7px;}
.dopPanelM .iconD1 {background:url(/img/inDopButt.png) -269px 0;height:31px;width:109px;display:block;float:right;}
.dopPanelM .iconD2 {background:url(/img/inDopButt.png) -141px 0;height:31px;width:128px;display:block;float:right;}
.dopPanelM .iconD3 {background:url(/img/inDopButt.png) -77px 0;height:31px;width:64px;display:block;float:right;}
.dopPanelM .iconD4 {background:url(/img/inDopButt.png) 0 0;height:31px;width:77px;display:block;float:right;}
.dopPanelM .iconD1:hover, .dopPanelM .iconD2:hover, .dopPanelM .iconD3:hover, .dopPanelM .iconD4:hover {opacity:0.8;}

.dopPanelM .strelaLeft {background:url(/img/inDopSt.png);width:27px;height:28px;float:left;}
.dopPanelM .strelaRight {background:url(/img/inDopSt.png) -27px 0;width:27px;height:28px;float:left;}
.dopPanelM .strelaLeft:hover,.dopPanelM .strelaRight:hover {opacity:0.8;}
/* ---------------------------------- */

/* Вид комментариев */
.commBg {background:#171717 url(/img/commBg.png) -540px bottom no-repeat;border-radius:5px;-moz-border-radius:5px;padding:0 0 4px 0;position:relative;overflow:hidden;margin:0 0 5px 0;}
.commTitle {background:url(/img/commBg.png) 0 0 no-repeat;height:30px;color:#4b7990;font-size:11pt;text-shadow:0.1em 0.1em 0em #10191e;padding:4px 9px 0px 9px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;}
.commTitle a {color:#4b7990;}
.commMess {margin:-6px 0 0 0;}
.commMess .ava {border-radius:5px;float:left;}
.commText {padding:8px 71px 0 65px;}
.commText2 {padding:8px 71px 0 14px;}
.otvComm {background:url(/img/otvComm.png);width:71px;display:block;height:23px;position:absolute;bottom:0;right:0;margin:0 0 4px 0;}
.otvComm:hover {background-position:0 -23px;}
/* ---------------- */

/* Персональная страница */
.leftProf {float:left;width:158px;}
.profLineIn {background:url(/img/profLine.png);height:19px;width:343px;padding:3px 0 0 26px;color:#b16969;margin:0 0 0 158px;}
.profLineIn a {color:#b16969;}
.profLineO {background:url(/img/profLineO.png);height:19px;width:359px;padding:3px 0 0 10px;color:#fff;text-transform:uppercase;text-shadow:1px 1px 0px #3d1919;margin:0 0 0 158px;}
.navProf {position:absolute;right:-3px;}
.navProf a {background:url(/img/navProf.png) 0 -22px;height:20px;padding:2px 0 0 0;width:112px;display:block;text-align:center;}
.navProf a:hover {background-position:0 0;text-decoration:none;}
.profName {background:url(/img/profName.png);width:156px;height:24px;padding:3px 0 0 0;color:#fff;text-align:center;position:absolute;}
.nameAva {position:relative;min-height:27px;text-align:center;}
.nameAva img {padding:18px 0 0 0;}
.groupProf {background:url(/img/groupProf.png);height:19px;padding:3px 0 0 0;width:150px;text-align:center;text-transform:uppercase;color:#f39b9b;text-shadow:1px 1px 0 #2c1212;margin:3px auto;}
.nav_ban {padding:18px 0 4px 0;position:relative;min-height:66px;}
.nav_ban img {position:absolute;left:-5px;}
.profSinT {padding:0 0 5px 22px;color:#919191;}
.singProf {width:544px;margin:0 0 0 -3px;color:#fff;}
.singProf img {max-width:500px;text-align:center;}
.singProf a {color:#fff;}
.singProf_t {background:url(/img/sinProf.png);height:15px;}
.singProf_b {background:url(/img/sinProf.png) -1088px 0;height:15px;}
.singProf_r {background:url(/img/sinProf.png) -544px 0;padding:1px 15px 1px 15px;}
.rankProf {text-align:center;color:#ffb3b3;text-shadow:1px 0 #000;width:158px;text-transform:uppercase;}
.rankProf img {padding:2px 0 2px 0;}
/* --------------------- */

/* Форма добавления комментариев */
.smilesF {padding:4px 4px 0 0;float:right;}
.commField {background:#1e1e1e;width:448px;height:86px;border:0px;border-radius:5px;-moz-border-radius:5px;margin:4px;color:#fff;padding:5px;}
.commTables {background:#171717;border-radius:5px 5px 5px 0;-moz-border-radius:5px 5px 5px 0;padding:4px 0 0 0;margin:7px 0 0 0;}
.bgBb {background:url(/img/bgBb.png) no-repeat;width:533px;height:23px;padding:0 0 0 4px;}
.codeButtons {background:url(/img/bb.png) right 0;height:17px;padding:0 5px 0 5px;color:#272727;border:0px;font-size:12px;font-family:Cuprum;border-radius:2px;-moz-border-radius:3px;margin:0 1px 0 0;}
.commSbmFl {background:url(/img/addComm.png);height:21px;width:152px;margin:0px;padding:0px;border:0px;cursor:pointer;cursor:hand;}
.addCommBg {background:url(/img/addCommBg.png);height:29px;width:164px;padding:0 0 0 4px;}
/* ----------------------------- */

/* Форум сайта */

input[type="text"], input[type="password"], textarea {
 max-width:99%;
}

.navForum {background:url(/img/navForum.png);height:22px;width:327px;padding:5px 0 0 0;text-align:center;color:#fff;text-shadow:1px 1px 0 #2f4854;}

.gTable{ border:none;border-collapse:collapse;padding:0;margin:0px;background:none;width:992px;}
.side_forum {background:#0b0b0b;padding:18px 4px 18px 4px;}
.gTableSubTop {background:url(/img/subTop.png) center 0;height:29px;padding:0 12px 0 12px;vertical-align:middle;text-transform:uppercase;text-shadow:1px 0 #000;font-size:10pt;border-left:1px solid #262626;}

.gTableSubTop a {color:#444444;}
.gTable .gTableSubTop:last-child,
.postFirst
.gTableRightBB {background:url(/img/subTop.png) no-repeat right 0; height:29px;}
.gTable .gTableSubTop:first-child {background:url(/img/subTop.png) no-repeat left 0; border-right:0px;height:29px;border-left:0px;}
.gTableTop {background:url(/img/gTableTop.png);line-height:30px;padding:4px 13px 0 13px;text-transform:uppercase;color:#fff;text-shadow:0px 1px 0 #36191a;font-size:11pt;}
.gTableTop a {font-size:11pt;}
#subscribe {text-transform:none;padding:0px;margin:0px;height:0px;font-size:11pt;}

.forumNameTd,
.forumThreadTd,
.forumPostTd,
.forumLastPostTd {background:url(/img/forumNameTd.png) no-repeat left 0;height:47px;font-family:Tahoma;font-size:8pt;vertical-align:middle;}
.forumIcoTd {background:url(/img/forumNameTd.png) no-repeat right 0;height:47px;vertical-align:middle;}
.forumLastPostTd a {color:#406c82;font-family:Tahoma;font-size:8pt;}
.forumLastPostTd {padding:0 0 0 8px;line-height:1.1;}
.forumNameTd .forum {background:url(/img/title_forum.png) no-repeat right 0;border-left:3px solid #4c7d94;font-size:11pt;text-transform:uppercase;padding:2px 10px 1px 9px;text-shadow:1px 1px 0px #192e36;}
.forumNameTd .forum:hover {background-position:right -21px;border-left:3px solid #995a66;}
.forumNameTd {padding:0 0 0 1px;}
.forumNameTd .forumDescr {padding:5px 0 0 8px;}

.gTable .gTableBody1 {background:url(/img/forumNameTd.png) no-repeat -2px 0 #111;height:47px;border-left:1px solid #262626;font-family:Tahoma;font-size:8pt;vertical-align:middle;}
.gTable .gTableRight {background:url(/img/forumNameTd.png) no-repeat right 0 #111;height:47px;font-family:Tahoma;font-size:8pt;vertical-align:middle;}

#forum_filter {display:none;}

.threadFrmBlock {display:none;}

.threadNametd,
.threadViewTd,
.threadAuthTd,
.threadPostTd,
.threadLastPostTd {background:url(/img/forumNameTd.png) no-repeat left 0;height:47px;font-family:Tahoma;font-size:8pt;vertical-align:middle;}
.threadLastPostTd a {color:#406c82;font-family:Tahoma;font-size:8pt;}
.threadLastPostTd {padding:0 0 0 8px;line-height:1.1;}
.threadPinnedLink, .threadLink {background:url(/img/title_forum.png) no-repeat right 0;border-left:3px solid #4c7d94;font-size:11pt;text-transform:uppercase;padding:2px 10px 1px 9px;text-shadow:1px 1px 0px #192e36;}
.threadPinnedLink:hover, .threadLink:hover {background-position:right -21px;border-left:3px solid #995a66;}
.threadDescr {padding:5px 0 0 8px;}
.threadIcoTd {background:url(/img/forumNameTd.png) no-repeat left 0;height:47px;vertical-align:middle;}
.threadNametd {padding:0 0 0 1px;}
.threadsType {background:url(/img/subTop.png) center 0;height:29px;padding:0 12px 0 12px;vertical-align:middle;text-shadow:1px 0 #000;font-size:10pt;border-left:1px solid #262626;}
.threadsDetails, .forumOnlineBar {background:url(/img/subTop.png) center 0;height:26px;padding:0px 12px 0 12px;vertical-align:middle;text-shadow:1px 0 #000;font-size:10pt;border-left:1px solid #262626;}
.forumOnlineBar {height:29px;}

.bb_text {position:relative;display:block;height:27px;}
.bgBbForum {background:url(/img/bgBb.png) no-repeat right 0;height:23px;width:483px;padding:0 50px 0 4px;margin:0 0 4px 0;position:absolute;right:0;}
#bb_codes {overflow:hidden;height:18px;}
.messForPost {color:#496468;padding:4px 0 0 140px;}

.bgAddFormF {background:#171717;border-radius:5px;-moz-border-radius:5px;margin:4px 0;}
.smilesForum {verlical-align:middle;border-right:1px solid #151515;}
.messF {padding:4px 4px 4px 9px;border-left:1px solid #1f1f1f;}
.butt_on_text {position:relative;}
.postTextFl {background:#1e1e1e;width:787px;height:66px;padding:4px 4px 26px 4px;color:#fff;border:0px;border-radius:5px;-moz-border-radius:5px;margin:0px;}
.buttonsFAdd {position:absolute;bottom:4px;right:4px;}

.postSubmit {background:url(/img/butAddForm.png);height:21px;width:152px;vertical-align:middle;text-align:center;text-transform:uppercase;border:0px;font-family:Cuprum;cursor:pointer;cursor:hand;color:#fff;}
.postPreview {background:url(/img/butAddForm.png) 0 -21px;height:21px;width:174px;border:0px;cursor:pointer;cursor:hand;}
.postSubmit:hover, .postPreview:hover {opacity:0.8;}

.switches {margin:10px 0;}
.pagesInfo {padding:5px 0 0 0;}

.rang_icon {text-align:center;}
.rang_icon img {padding:0 0 4px 0;}

.forumBarA, .forumBar {color:#916060;}

.edited {text-align:right;padding:10px 0 0 0 ;}

.switch a,.switchActive {background:url(/img/switch.png) no-repeat left 0,url(/img/switch.png) no-repeat right -21px; height:21px;display:inline-block;vertical-align:top;font-family:Tahoma;font-size:11px;color:#989898; text-shadow: 1px 1px #232323}
.switch a ,.switchActive{ display:inline-block;height:21px;padding:0 12px;line-height:21px;vertical-align:top;}
.switch a:hover {color:#fff;text-decoration:none; text-shadow: 1px 1px #371b1b }
.switch a:hover {text-decoration:none;padding:0 12px;height:21px;background:url(/img/switch.png) no-repeat left -42px,url(../img/switch.png) no-repeat right -63px }
.switch a {cursor:pointer}
.switch a, .switchActive{margin:2px;}


/* Post forum */
.postTdTop {background:url(/img/subTop.png) right 0;height:29px;padding:0 12px 0 12px;vertical-align:middle;text-transform:uppercase;text-shadow:1px 0 #000;font-size:10pt;border-left:1px solid #262626;}
.postTdTop:first-child {background-position:left 0;}
.postTdTop a {color:#444444;}
.postBottom {height:24px;background:url(/img/postBottom.png) repeat-x #111;border-right:1px solid #262626;padding:0 4px;vertical-align:middle;}
.postBottom:last-child {border:0;}
.posttdMessage {background:url(/img/postBottom.png) repeat-x #111;padding:17px;font-size:9pt;text-shadow:1px 1px 0 #000;font-family:Tahoma;}
.postTdInfo {background:url(/img/postBottom.png) repeat-x #111;border-right:1px solid #262626;padding:9px 14px 9px 14px;}
.navPost div {background:url(/img/navPost.png);height:24px;width:148px;padding:3px 0 0 6px;margin:0 0 3px 0;font-size:11pt;text-transform:uppercase;color:#83b6d3;text-shadow:1px 1px 0px #1c1c1c;}
.navPost div a {color:#83b6d3;font-size:11pt;}

.repP,.banP {background:url(/img/navPost.png);height:27px;width:154px;margin:0 0 3px 0;font-size:11pt;text-transform:uppercase;color:#83b6d3;text-shadow:1px 1px 0px #1c1c1c;text-align:center;}
.repP a {color:#83b6d3;font-size:11pt;}
.banP a {color:#a45c2b;font-size:11pt;}
.banP {color:#afafaf;}
.banP span,.repP span {padding:4px 0 0 0;display:block;}
.banDo2 {float:right;background:url(/img/rep_ban_b.png) 0 -25px ;width:23px;height:25px;display:block;}
.banDo1 {float:left;background:url(/img/rep_ban_b.png) -23px -25px ;width:23px;height:25px;display:block;}
.repDo2 {float:right;background:url(/img/rep_ban_b.png);width:23px;height:25px;display:block;}
.repDo1 {float:left;background:url(/img/rep_ban_b.png) -23px 0;width:23px;height:25px;display:block;}
.banDo2:hover,.banDo1:hover,.repDo1:hover,.repDo2:hover {opacity:0.8;}
.userAvatar {background:url(/img/bgAva.png);padding:4px;margin:0 0 4px 0;}

/* ----------- */

/*--ubutton-fix--*/ 
.myBtnLeft img, .myBtnRight img, .myBtnLeftA img, .myBtnRightA img, .myBtnRight + td input, .myBtnRightA + td input { display: block } 
.myBtnCenter, .myBtnCenterA { line-height:19px !important } 
.myBtnCont { height:19px; padding-bottom:0 !important } 

@font-face { 
font-family: 'fontawesome-selected'; 
src: url("/css/fontawesome-selected.eot"); 
src: 
url("/css/fontawesome-selected.eot?#iefix") format('embedded-opentype'), 
url("/css/fontawesome-selected.woff") format('woff'), 
url("/css/fontawesome-selected.ttf") format('truetype'), 
url("/css/fontawesome-selected.svg#fontawesome-selected") format('svg'); 
font-weight: normal; 
font-style: normal; 
} 

.timeline { 
position: relative; 
list-style-type: none; 
padding: 30px 0 50px 0; 
font-family: 'Gorditas', Arial, sans-serif; 
width:650px; 
background:#ddd 
} 

.timeline:before { 
content: ''; 
position: absolute; 
width: 5px; 
height: 100%; 
top: 0; 
left: 165px; 
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==); 
color:#aaa 
} 

.event { 
position: relative; 
margin-bottom: 80px; 
padding-right: 40px; 
} 

.thumb { 
position: absolute; 
width: 100px; 
height: 100px; 
box-shadow: 
0 0 0 8px rgba(65,131,142,1), 
0 1px 1px rgba(255,255,255,0.5); 
background-repeat: no-repeat; 
border-radius: 50%; 
-webkit-transform: scale(0.8) translateX(24px); 
-moz-transform: scale(0.8) translateX(24px); 
-o-transform: scale(0.8) translateX(24px); 
-ms-transform: scale(0.8) translateX(24px); 
transform: scale(0.8) translateX(24px); 
} 

.thumb:before { 
content: ''; 
position: absolute; 
height: 8px; 
z-index: -1; 
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC); 
width: 51px; 
top: 42px; 
left: 100%; 
margin-left: 8px; 
} 

.thumb span { 
color: #41838e; 
width: 100%; 
text-align: center; 
font-weight: 700; 
font-size: 15px; 
text-transform: uppercase; 
position: absolute; 
bottom: -30px; 
} 

/* Transparent Checkbox/radio hack: leave the checkbox on top, hide it with opacity 0 */ 

.event label, 
.event input[type="radio"] { 
width: 24px; 
height: 24px; 
left: 158px; 
top: 36px; 
position: absolute; 
display: block; 
} 

.event input[type="radio"] { 
opacity: 0; 
z-index: 10; 
cursor: pointer; 
} 

.event label:after { 
font-family: 'fontawesome-selected'; 
content: '\e702'; 
background: #fff; 
border-radius: 50%; 
color: #41838E; 
font-size: 26px; 
height: 100%; 
width: 100%; 
left: -2px; 
top: -3px; 
line-height: 24px; 
position: absolute; 
text-align: center; 
} 

.content-perspective { 
margin-left: 230px; 
position: relative; 

-webkit-perspective: 600px; 
-moz-perspective: 600px; 
-o-perspective: 600px; 
-ms-perspective: 600px; 
perspective: 600px; 
} 

.content-perspective:before { 
content: ''; 
width: 37px; 
left: -51px; 
top: 45px; 
position: absolute; 
height: 1px; 
z-index: -1; 
background: #fff; 
} 

.content { 
-webkit-transform: rotateY(10deg); 
-moz-transform: rotateY(10deg); 
-o-transform: rotateY(10deg); 
-ms-transform: rotateY(10deg); 
transform: rotateY(10deg); 

-webkit-transform-origin: 0 0; 
-moz-transform-origin: 0 0; 
-o-transform-origin: 0 0; 
-ms-transform-origin: 0 0; 
transform-origin: 0 0; 

-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
-ms-transform-style: preserve-3d; 
-o-transform-style: preserve-3d; 
transform-style: preserve-3d; 
} 

.content-inner { 
position: relative; 
padding: 20px; 
color: #333; 
border: none; 
border-left: 5px solid #41838e; 
box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
background: #fff; 
} 

.content-inner h3 { 
font-size: 26px; 
padding: 5px 0 5px 0; 
color: #41838e; 
} 

.content-inner p { 
font-size: 18px; 
overflow: hidden; 
color: transparent; 
color: #777; 
text-align: left; 
} 

.content-inner:before { 
font-family: 'fontawesome-selected'; 
content: '\25c2'; 
font-weight: normal; 
font-size: 54px; 
line-height: 54px; 
position: absolute; 
width: 30px; 
height: 30px; 
color: #41838e; 
left: -22px; 
top: 19px; 
z-index: -1; 
} 

/* Transitions */ 

.thumb, 
.thumb span, 
.content-inner h3 { 
-webkit-transition: all 0.6s ease-in-out 0.2s; 
-moz-transition: all 0.6s ease-in-out 0.2s; 
-o-transition: all 0.6s ease-in-out 0.2s; 
-ms-transition: all 0.6s ease-in-out 0.2s; 
transition: all 0.6s ease-in-out 0.2s; 
} 

.content-inner { 
-webkit-transition: box-shadow 0.8s linear 0.2s; 
-moz-transition: box-shadow 0.8s linear 0.2s; 
-o-transition: box-shadow 0.8s linear 0.2s; 
-ms-transition: box-shadow 0.8s linear 0.2s; 
transition: box-shadow 0.8s linear 0.2s; 
} 

.content { 
-webkit-transition: -webkit-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s; 
-moz-transition: -moz-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s; 
-o-transition: -o-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s; 
-ms-transition: -ms-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s; 
transition: transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s; 
} 

.content-inner p { 
-webkit-transition: max-height 0.5s linear, color 0.3s linear; 
-moz-transition: max-height 0.5s linear, color 0.3s linear; 
-o-transition: max-height 0.5s linear, color 0.3s linear; 
-ms-transition: max-height 0.5s linear, color 0.3s linear; 
transition: max-height 0.5s linear, color 0.3s linear; 
} 

/* Checked */ 

.event input[type="radio"]:checked + label:after { 
content: '\2714'; 
color: #F26328; 
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8); 
} 

.event input[type="radio"]:checked ~ .content-perspective:before { 
background: #F26328; 
} 

.event input[type="radio"]:checked ~ .content-perspective .content-inner h3 { 
color: #F26328; 
} 

.event input[type="radio"]:checked ~ .content-perspective .content { 
-webkit-transform: rotateY(-5deg); 
-moz-transform: rotateY(-5deg); 
-o-transform: rotateY(-5deg); 
-ms-transform: rotateY(-5deg); 
transform: rotateY(-5deg); 
} 

.event input[type="radio"]:checked ~ .content-perspective .content-inner { 
border-color: #F26328; 
box-shadow: 10px 0px 10px -6px rgba(0, 0, 0, 0.1); 
} 

.event input[type="radio"]:checked ~ .content-perspective .content-inner p { 
max-height: 260px; /* Add media queries */ 
color: rgba(0,0,0,0.6); 
-webkit-transition-delay: 0s, 0.6s; 
-moz-transition-delay: 0s, 0.6s; 
-o-transition-delay: 0s, 0.6s; 
-ms-transition-delay: 0s, 0.6s; 
transition-delay: 0s, 0.6s; 
} 

.event input[type="radio"]:checked ~ .content-perspective .content-inner:before { 
color: #F26328; 
} 

.event input[type="radio"]:checked ~ .thumb { 
-webkit-transform: scale(1); 
-moz-transform: scale(1); 
-o-transform: scale(1); 
-ms-transform: scale(1); 
transform: scale(1); 
box-shadow: 
0 0 0 8px rgba(242,99,40,1), 
0 1px 1px rgba(255,255,255,0.5); 
} 

.event input[type="radio"]:checked ~ .thumb span { 
color: #F26328; 
} 

.event input[type="radio"]:checked ~ .thumb:before { 
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAOfUjX+882+wYgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQBbNyaHFmzEqgAAAABJRU5ErkJggg==); 
} 

.content-inner p, 
.thumb span, 
.event label { 
-webkit-backface-visibility: hidden; 
} 

@media screen and (max-width: 850px) { 
.content-inner h3 { 
font-size: 20px; 
} 

.content-inner p { 
font-size: 14px; 
text-align: justify; 
} 

.event input[type="radio"]:checked ~ .content-perspective .content-inner p { 
max-height: 500px; 
} 
} 

@media screen and (max-width: 540px) { 
.timeline::before { 
left: 50px; 
} 

.event { 
padding-right: 0px; 
margin-bottom: 100px; 
} 

.thumb { 
-webkit-transform: scale(0.8); 
-moz-transform: scale(0.8); 
-o-transform: scale(0.8); 
-ms-transform: scale(0.8); 
transform: scale(0.8); 
} 

.event input[type="radio"] { 
width: 100px; 
height: 100px; 
left: 0px; 
top: 0px; 
} 

.thumb:before, 
.event input[type="radio"]:checked ~ .thumb:before { 
background: none; 
width: 0; 
} 

.event label { 
display: none; 
} 

.content-perspective { 
margin-left: 0px; 
top: 80px; 
} 

.content-perspective:before { 
height: 0px; 
} 

.content { 
-webkit-transform: rotateX(-10deg); 
-moz-transform: rotateX(-10deg); 
-o-transform: rotateX(-10deg); 
-ms-transform: rotateX(-10deg); 
transform: rotateX(-10deg); 
} 

.event input[type="radio"]:checked .content-perspective .content { 
-webkit-transform: rotateX(10deg); 
-moz-transform: rotateX(10deg); 
-o-transform: rotateX(10deg); 
-ms-transform: rotateX(10deg); 
transform: rotateX(10deg); 
} 

.content-inner { 
border-left: none; 
border-top: 5px solid #41838e; 
} 

.event input[type="radio"]:checked ~ .content-perspective .content-inner { 
border-color: #F26328; 
box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1); 
} 

.content-inner:before { 
content: '\25b4'; 
left: 33px; 
top: -32px; 
} 

.event input[type="radio"]:checked ~ .content-perspective .content-inner p { 
max-height: 300px; 
} 
}