/* jQuery Roundrr CSS Stylesheet 1.0 */ .my_class { font-size: 1.5em; color: #abc; background-color: #ffffff; border: 2px solid white; } .my_class:hover { border: 2px solid #ccc; } .my_class img { height: 48px; width: 48px; } .centerImage { width: 180px; } .roundrr_center { background-color: transparent; height: 160px; margin-bottom: 0; margin-left: auto; margin-right: auto; position: relative; top: 100px; width: 195px; } .roundrr_speech { background-color: transparent; background-image: url("../images/speech.png"); height: 62px; left: -6px; margin-bottom: 0; margin-left: 41%; margin-right: auto; position: absolute; top: 30px; width: 180px; display: none; } #roundrr_pick { background-image: url(../images/pick4.png); height: 105px; margin-bottom: 0; margin-left: 45%; margin-right: auto; position: absolute; top: -81px; width: 94px; z-index: 500; } .keyboard{ margin-left:-78px; } #roundrr_caption { color: white; font-size: 27px; height: 22px; left: -2px; letter-spacing: -1px; margin-bottom: 0; margin-left: 42%; margin-right: auto; position: absolute; top: 54px; width: 155px; z-index: 500; /*comment out the following to disable @font-face use*/ font-family: "Open Sans" !important; } #roundrr_container, #roundrr_container2 { height: auto; left: 20px; margin: 100% auto 0; position: relative; text-align: center; top: -370px; width: 100px; } .selected{ background-color:red; border:2px solid red; color:#AABBCC; font-size:1.5em; } /*OVERVIEW CSS*/ .center{ width:35%; margin:20px auto; text-align: center; padding:20px; } .center h1{ color:#009530; font-weight:bold; margin:0; font-size:32px; } .center h3{ margin:10px 0; } .overview-button-center{ width:200px; padding:15px; background:#fbbc21; color:white; border:none; text-align:center; } .banner{ width:100%; color:White; margin-top:60px; padding: 20px 0; overflow:hidden; } .banner .upper{ border-bottom: 1px solid #009530; } .banner .lower{ padding:20px; } .banner input{ width: 24%; padding: 12px; color: green; border: 3px solid #eeeeee; } .banner button{ border: 3px solid #fbbc21; padding: 12px; width: 96px; background: transparent; color: #fbbc21; margin-left: -5px; cursor: pointer; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear; } .banner button:hover{ color:#047b2a; background: #fbbc21; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear; } .path{ background: url("../images/path.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 398px; margin-left: -422px; margin-top: 45px; position: absolute; width: 843px; left:50%; } .slider-links >li{ float:left; list-style: none; background:url('../images/item.png'); width:103px; height:103px; } .icons-unactive{ background: url('../images/icons-01.png'); width:100px; height:100px; } .icons-active{ background: url('../images/icons-active.png') no-repeat; } .b-index-bnn .e-bitrix { width: 142px; height: 142px; position: absolute; z-index: 100; top: 0; right: 0; } .b-index-bnn .gl-wrap { height: 552px; padding: 31px 0 0; } .b-index-bnn h2 { margin-bottom: 7px; color: #ffffff; } .b-index-bnn h2 a { color: inherit; } .b-index-bnn h2 a:hover { color: #caf1fd; } .b-index-bnn.m-transition .b-carousel > li, .b-index-bnn.m-transition .b-carousel > li i { -o-transition: background-image 0.5s; -moz-transition: background-image 0.5s; -webkit-transition: background-image 0.5s; transition: background-image 0.5s; } .b-index-bnn .js-ie-fix, .b-index-bnn .js-ie-fix-list > li { z-index: 0; } .b-index-bnn .js-ie-fix > i.ie, .b-index-bnn .js-ie-fix-list > li > i.ie { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -100; display: block; } .b-index-bnn.m-ready .r-details, .b-index-bnn.m-ready .b-carousel { display: block; } /* .b-index-banner .r-menu ************************************************************************************************************************************/ .b-index-bnn .r-menu { position: relative; z-index: 101; margin: 0 auto; display: inline-block; } .b-index-bnn .r-menu:after { content: ' '; display: block; clear: both; } .b-index-bnn .r-menu li { font-size: 14px; line-height: 16px; color: #00518f; font-weight: bold; float: left; } .b-index-bnn .r-menu li + li { margin-left: 1px; } .b-index-bnn .r-menu li a { border-radius: 16px; -o-transition-property: color, border-color; -moz-transition-property: color, border-color; -webkit-transition-property: color, border-color; transition-property: color, border-color; -pie-watch-ancestors: 1; display: block; color: inherit; border: 1px solid transparent; padding: 6px 12px 7px; } .b-index-bnn .r-menu li a:hover { color: #0c7cae; } .b-index-bnn .r-menu li.is-active a { border-color: #9bebfb; color: #ffffff; } /* .b-index-banner .e-arrow ***********************************************************************************************************************************/ .b-index-bnn .e-arrow { border-radius: 50%; position: absolute; top: 245px; width: 64px; height: 64px; background: #ffffff; text-indent: -9999px; overflow: hidden; z-index: 999; } .b-index-bnn .e-arrow:before { content: ' '; background: url('../images/arrow-icon.png') 0 0 no-repeat; position: absolute; top: 18px; width: 15px; height: 26px; } .b-index-bnn .e-arrow.n-prev { left: 45px; z-index: 999; } .b-index-bnn .e-arrow.n-prev:before { background-position: 0 0px; left: 22px; } .b-index-bnn .e-arrow.n-next { right: 45px; z-index: 999; } .b-index-bnn .e-arrow.n-next:before { background-position:-1px -52px; right: 22px; } .b-index-bnn .e-arrow:hover { background: #c1effd; } /* .b-clouds **************************************************************************************************************************************************/ .b-clouds { list-style: none; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; margin-top:140px; } .b-clouds > li { position: absolute; margin-left: 50%; background: no-repeat; } .b-clouds > li.m-type-1 { background-image: url('../images/cloud-1.png'); width: 60px; height: 38px; } .b-clouds > li.m-type-2 { background-image: url('../images/cloud-2.png'); width: 80px; height: 51px; } .b-clouds > li.m-type-3 { background-image: url('../images/cloud-3.png'); width: 106px; height: 67px; } .b-clouds > li.n1 { top: 50px; left: 352px; } .b-clouds > li.n2 { top: 107px; left: -439px; } .b-clouds > li.n3 { top: 209px; left: 485px; } .b-clouds > li.n4 { top: 222px; left: -613px; } /* .b-carousel ************************************************************************************************************************************************/ .b-carousel{ content: ' '; background: url('../images/path.png') no-repeat; width: 843px; height: 398px; position: absolute; left: -422px; } .roundrr_item { width: 102px; height: 102px; position: absolute; left: -55px; z-index: 100; top:-470px; } .roundrr_item > a { background-image: url('../images/item-icon.png'); width: 103px; height: 113px; position: absolute; z-index: 70; top: 6px; left: 6px; z-index: 100; } .roundrr_item > i { -o-transition: background-image 0.3s; -moz-transition: background-image 0.3s; -webkit-transition: background-image 0.3s; transition: background-image 0.3s; background: 0 0 no-repeat; width: 105px; height: 160px; position: absolute; top: 2px; left: -1px; pointer-events: none; z-index: 100; } .roundrr_item > a.is-active:before { content: ''; width: 122px; height: 122px; background-color: transparent; position: absolute; top: 7px; left: -9px; border-radius: 50%; z-index: 9; -webkit-transition: border-color 0.6s; -moz-transition: border-color 0.6s; -o-transition: border-color 0.6s; transition: background-color 0.6s; } .roundrr_item > a:hover { cursor:pointer; } .roundrr_item > a.is-active { content: ''; width: 105px; height: 113px; background-image: url('../images/active-icon.png'); position: absolute; left: 0px; z-index: 99; cursor:pointer; } .n1  { background-position: 0 -19px; } .n2  { background-position: 0 -132px; } .n3  { background-position: 0 -245px; } .n4  { background-position: 0 -358px; } .n5  { background-position: 0 -584px; } .n6  { background-position: 0 -697px; } .n7  { background-position: 0 -810px; } .n8  { background-position: 0 -471px; } .n9  { background-position: 0 -930px; } .slider-text{ text-align:center; float:none; width: 350px; position:absolute; left:50%; margin-left:-175px; top:50%; z-index:99; } .slider-text h1 { color: #fbbc21; font-size: 18px; font-weight: bold; } .slider-text p { color: #808080; font-size: 13px; margin-top: 15px; margin-bottom: 35px; } .slider-text a { padding: 10px; color: #047b2a; font-weight: bold; font-size: 16px; border: 3px solid #047b2a; background: transparent; width: 200px; text-transform: uppercase; margin-top: 20px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .slider-text a:hover { color: white; text-decoration: none; cursor: pointer; background: #047b2a; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }