Вид на главную:
Главная страница
Сроим графики, которые отображают поточное состояние мировых рынков.
Мировые рынки
Регистрация нового пользователя:
Регистрация
Пример оформления статьи:
Дополнительная информация
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
%html(xmlns="http://www.w3.org/1999/xhtml")
%head
%meta(content="text/html; charset=utf-8" http-equiv="Content-Type")
%title Volia
%meta(name="description" content="")
%meta(name="author" content="")
%link(rel="shortcut icon" href="images/favicon.ico")
%link(rel="stylesheet" href="css/default.css")
%link(rel="stylesheet" href="css/styles.css")
%script(type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js")
%script(type="text/javascript" src="js/main.js")
<!--[if IE]><link rel="stylesheet" href="css/ie.css" /><![endif]-->
%body.index
#header
%h1#logo
%a(href="#" title="Volia")
%img(src="images/logo.png" alt="Volia")
.top
%ul.menu
%li.active
%a(href="#" title="For Private Customer") For Private Customer
%li
%a(href="#" title="For Business Customer") For Business Customer
%li
%a(href="#" title="Data-Center") Data-Center
%li
%a(href="#" title="About Volia") About Volia
%ul.localization
%li
%a(href="#" title="Русский") рус
%li
%a(href="#" title="Українська") укр
%li.last.active
%a(href="#" title="English") eng
%span.location
%a(href="#" title="Select location")
Dnepropetrovsk
.user
%ul.menu
%li
Hello, <a href="#" title="Oksana Savoliuk">Oksana Savoliuk</a>
%li
%a(href="#" title="Quick payment") Quick payment
%li
%a(href="#" title="Volia mail") Volia mail
%li
%a(href="#" title="Locations") Locations
%ul.menu.main
%li
%a(href="#" title="Digital TV") Digital TV
%li
%a(href="#" title="Internet") Internet
%li
%a(href="#" title="TV+Internet") TV+Internet
%li
%a(href="#" title="Connection") Connection
%li
%a(href="#" title="Payment") Payment
%li
%a(href="#" title="Support") Support
%li.important
%a(href="#" title="My Volia") My Volia
.clearfix
#content
#article
.advert
%img.active(src="images/advert.jpg" alt="Advert")
%ul.promo
%li
%a(href="#" title="Digital TV + Internet")
%img(src="images/catalog-tvinet.png" alt="Digital TV + Internet")
%span.title Digital TV + Internet
%span.description Bundles from only 99,90 uah
%li
%a(href="#" title="High Speed Internet")
%img(src="images/catalog-highspeed.png" alt="High Speed Internet")
%span.title High Speed Internet
%span.description Best spe med unlimited 150 Mbit/s
%li.last
%a(href="#" title="The full effect of the presence")
%img(src="images/catalog-fullhd.png" alt="The full effect of the presence")
%span.title The full effect of the presence
%span.description Volia HD only 40 uah per month
.news
%h2 Hot News
%span.more-link
<a href="#" title="All news">All news</a> →
%ul
%li.first
%a(href="#" title="VOLIA announced September results of the measurement of customer satisfaction")
VOLIA announced September results of the measurement of customer satisfaction
%span.date
20 October 2011
%li
%a(href="#" title="Mikhail Dmitrichenko has joined management team of VOLIA")
Mikhail Dmitrichenko has joined management team of VOLIA
%span.date
3 October 2011
%li.last
%a(href="#" title="VOLIA has embarked on a major transformation program")
VOLIA has embarked on a major transformation program
%span.date
29 September 2011
#aside.right
%form(action="/")
%fieldset
%input.search(type="text")
%button(type="submit")
.quick-links
%h3 Quick links
%ul
%li.customer-account
%a(href="#" title="Customer Account")
%span Customer Account
%li.volia-mail
%a(href="#" title="Volia Mail")
%span Volia Mail
%li.payment-options
%a(href="#" title="Payment options")
%span Payment options
%li.order-service
%a(href="#" title="Order service")
%span Order service
%li.tv-programs
%a(href="#" title="TV program")
%span TV program
%li.hdtv
%a(href="#" title="HD TV")
%span HD TV
%li.nvod
%a(href="#" title="NVOD")
%span NVOD
.widgets
.widget.first.tutorial
%h3 TV tutorial guide
%a(href="#" title="TV tutorial guide")
%img(src="images/tv-tutorial-guide.jpg" alt="TV tutorial guide")
%a.selector(href="#" title="Learn how to...")
%span Learn how to...
.widget.last.poll
%h3 Poll
%span How do you like new site?
%form(action="/")
%fieldset
%ul
%li
%input#poll-answer-very-good(type="radio" name="poll-new-site" value="very-good")
%label(for="poll-answer-very-good") Very good!
%li
%input#poll-answer-good(type="radio" name="poll-new-site" value="good")
%label(for="poll-answer-good") Good, I like this
%li
%input#poll-answer-old-better(type="radio" name="poll-new-site" value="old-better")
%label(for="poll-answer-old-better") Old one was better
.clearfix
#footer
.social
.likebox
%img(src="images/likebox.png" alt="likebox")
.network
%a.yt(href="#" title="Volia YouTube")
%span YouTube
%a.tw(href="#" title="Volia Twitter")
%span Twitter
%a.fb(href="#" title="Volia Facebook")
%span Facebook
%a.vk(href="#" title="Volia Vkontakte")
%span Vkontakte
%span Volia in social networks:
%ul.navigation
%li.first
%a(href="#" title="Bundles") Bundles
%ul
%li
%a(href="#" title="TV + Internet for 299") TV + Internet for 299
%li
%a(href="#" title="Internet") Internet
%ul
%li
%a(href="#" title="Dr. Web") Dr. Web
%li
%a(href="#" title="Dr. Web") VoIP
%li
%a(href="#" title="Television") Television
%ul
%li
%a(href="#" title="HD TV") HD TV
%li
%a(href="#" title="TV Program") TV Program
%li
%a(href="#" title="Supports") Supports
%ul
%li
%a(href="#" title="Billing") Billing
%li
%a(href="#" title="Customer accounts") Customer accounts
%li
%a(href="#" title="About Volia") About Volia
%ul
%li
%a(href="#" title="Volia Company") Volia Company
%li
%a(href="#" title="Press-center") Press-center
%li
%a(href="#" title="Carrier at Volia") Carrier at Volia
%li
%a(href="#" title="For Business") For Business
%ul
%li
%a(href="#" title="Bundles") Bundles
%li
%a(href="#" title="Internet") Internet
%li
%a(href="#" title="Hosting") Hosting
%li.last
%a(href="#" title="Contacts") Contacts
.disclaimer
%p
Veggies sunt bona vobis, proinde vos postulo esse magis sea lettuce avocado silver beet potato wakame
water chestnut asparagus lotus root green bean radicchio azuki bean arugula chickweed tomato.Artichoke
garbanzo sorrel bush tomato rock melon gourd lotus root taro burdock summer purslane spring onion napa
cabbage soko grape groundnut tomatillo catsear. Gumbo winter purslane beet greens bush tomato bitterleaf
rutabaga melon cabbage cucumber kale fava bean water chestnut chickpea. Avocado maize bell pepper burdock
amaranth carrot fava bean scallion parsnip komatsuna rutabaga green bean. Taro plantain tigernut lettuce
sea lettuce garbanzo komatsuna salad parsnip seakale bok choy kakadu plum welsh onion fava bean salsify.
Maize aubergine lentil garlic bitterleaf fava bean silver beet potato avocado onion bush tomato endive
zucchini. Horseradish chard turnip greens tomatillo gumbo bunya nuts cress sorrel radicchio collard greens
black-eyed pea quandong corn watercress. Lotus root brussels sprout prairie turnip quandong pea garlic
wakame plantain kombu broccoli komatsuna dulse potato parsnip. Radicchio soybean endive epazote seakale
gumbo spring onion cress artichoke tigernut.
%hr
%span.support
Customer Support:
%span.bold (044) 502–22–50
%span.copyright
© 2002 – 2011
%a(href="/" title="Volia") Volia
#popup-container
%form#login-form(action="/")
%fieldset
%h3 Login
%p
%label(for="field-agreement-number") Agreement number
%input#field-agreement-number(type="text")
%p
%label(for="field-password") Password
%input#field-password(type="password")
%p.checkbox
%input#field-remember-me(type="checkbox")
%label(for="field-remember-me") Remember me
%p.btn
%button(type="submit") Submit
%p
%a(href="#" title="Forget the password?") Forget the password?
%p.close
%a(href="#" title="Close") Close
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
%html(xmlns="http://www.w3.org/1999/xhtml")
%head
%meta(content="text/html; charset=utf-8" http-equiv="Content-Type")
%title volia_fpc_television_tvguide_1b
%meta(name="description" content="")
%meta(name="author" content="")
%link(rel="shortcut icon" href="images/favicon.ico")
%link(rel="stylesheet" href="css/default.css")
%link(rel="stylesheet" href="css/styles.css")
%script(type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js")
%script(type="text/javascript" src="js/main.js")
<!--[if IE]><link rel="stylesheet" href="css/ie.css" /><![endif]-->
%body
#header
#login-block
%a.login(href="#" title="Log In")
%img(src="images/login-icon.png" alt="Log In")
%span Log In
%a#logo(href="#" title="Volia")
%img(src="images/logo.png" alt="Volia")
.top
%ul.menu
%li.active
%a(href="#" title="For Private Customer") For Private Customer
%li
%a(href="#" title="For Business Customer") For Business Customer
%li
%a(href="#" title="Data-Center") Data-Center
%li
%a(href="#" title="About Volia") About Volia
%ul.localization
%li
%a(href="#" title="Русский") рус
%li
%a(href="#" title="Українська") укр
%li.last.active
%a(href="#" title="English") eng
%span.location
%a(href="#" title="Select location")
Dnepropetrovsk
.user
%ul.menu
%li
Hello, <a href="#" title="Oksana Savoliuk">Oksana Savoliuk</a>
%li
%a(href="#" title="Quick payment") Quick payment
%li
%a(href="#" title="Volia mail") Volia mail
%li
%a(href="#" title="Locations") Locations
%ul.menu.main
%li.active
%a(href="#" title="Digital TV") Digital TV
%li
%a(href="#" title="Internet") Internet
%li
%a(href="#" title="TV+Internet") TV+Internet
%li
%a(href="#" title="Connection") Connection
%li
%a(href="#" title="Payment") Payment
%li
%a(href="#" title="Support") Support
%li.important
%a(href="#" title="My Volia") My Volia
#content
%div.nav
.search-block.float-right
%form(action="/")
%fieldset
%input.search(type="text")
%button(type="submit")
.breadcrumbs
%ul
%li.home
%a(href="#" title="Home")
%img(src="images/breadcrumbs-home.png" alt="Home")
→
%li
%a(href="#" title="For Private Customer") For Private Customer
→
%li.active
%a(href="#" title="TV Guide") TV Guide
#article.wide.tv-guide
%a.button.small.right(href="#" title="Create your own list") Create your own list
%h1 TV Guide
.search-block
%form(action="/")
%fieldset
%input.search(type="text")
%button(type="submit")
#select-package.list-selector
%span.label Package
%ul
%li.active All
%li Ukraine
%li Ukraine & World
%li Universe
%li Planet of Knowledge
%li Music
%li LifeStyle
%li Movie
%li Sport
%li VoliaHD
#select-category.list-selector
%span.label Category
%ul
%li.active All
%li Family
%li Music and Fashion
%li Russian
%li Ukrainian
%li Sports
%li News
%li Kids
%li Movie
%li Educational
#select-day.block-selector
%span.label Day
%ul
%li Monday
%span 12 October
%li Tuesday
%span 13 October
%li.active Wednesday
%span 14 October
%li Thursday
%span 15 October
%li Friday
%span 16 October
%li Saturday
%span 17 October
%li Sunday
%span 18 October
#select-time.block-selector
%span.label Time
%ul
%li.active 6:00 - 12:00
%li 12:00 - 16:00
%li 16:00 - 20:00
%li 20:00 - 23:00
%li 23:00 - 2:00
%li 2:00 - 6:00
#timetable
%ul.labels
%li.now
Now
%span.time 18:20
%li 18:00
%li.half 18:30
%li 19:00
%li.half 19:30
%li 20:00
%li.half 20:30
.timeline
%ul.chanels
%li
%span.logo
%img(src="images/channels-icons/euronews.jpg" alt="logo")
%span.title euronews
%ul.programs
%li.d-20
%span.time 17:10
%span.category Cinema
%span.title Let's get married!
%li.d-40.movie
%span.time 18:20
%span.category Movie
%span.title "Let Them Talk" with Andrey Malakhov
%li.d-50.show
%span.time 19:00
%span.category TV-show
%span.title Top Gear USA: Episode 4
%li.d-120
%span.time 19:50
%span.category TV-show
%span.title "Let Them Talk" with Andrey Malakhov
%li
%span.logo
%img(src="images/channels-icons/discovery-world.jpg" alt="logo")
%span.title Discovery
%ul.programs
%li.d-30.movie
%span.time 17:10
%span.category Cinema
%span.title Battle of the dinosaurs: Perfect Prey
%li.d-40
%span.time 18:20
%span.category Movie
%span.title Joanna Lumley Nile: Series 2
%li.d-30.show
%span.time 19:00
%span.category TV-show
%span.title Download: the true story of the Internet: eBay / Amazon
%li.d-40.series
%span.time 19:50
%span.category TV-show
%span.title Opening New Industrial Europe: Cotton, linen and hemp
%li.d-80.doc
%span.time 19:50
%span.category TV-show
%span.title Joanna Lumley Nile
%li
%span.logo
%img(src="images/channels-icons/euronews.jpg" alt="logo")
%span.title CNN
%ul.programs
%li.d-20
%span.time 17:10
%span.category Cinema
%span.title Let's get married!
%li.d-40.movie
%span.time 18:20
%span.category Movie
%span.title "Let Them Talk" with Andrey Malakhov
%li.d-50.show
%span.time 19:00
%span.category TV-show
%span.title Top Gear USA: Episode 4
%li
%span.time 19:50
%span.category TV-show
%span.title "Let Them Talk" with Andrey Malakhov
%li
%span.logo
%img(src="images/channels-icons/euronews.jpg" alt="logo")
%span.title СТБ
%ul.programs
%li.d-30.movie
%span.time 17:10
%span.category Cinema
%span.title Battle of the dinosaurs: Perfect Prey
%li.d-40
%span.time 18:20
%span.category Movie
%span.title Joanna Lumley Nile: Series 2
%li.d-30.show
%span.time 19:00
%span.category TV-show
%span.title Download: the true story of the Internet: eBay / Amazon
%li.d-40.series
%span.time 19:50
%span.category TV-show
%span.title Opening New Industrial Europe: Cotton, linen and hemp
%li.d-80.doc
%span.time 19:50
%span.category TV-show
%span.title Joanna Lumley Nile
%li
%span.logo
%img(src="images/channels-icons/euronews.jpg" alt="logo")
%span.title Music
%ul.programs
%li.d-20
%span.time 17:10
%span.category Cinema
%span.title Let's get married!
%li.d-40.movie
%span.time 18:20
%span.category Movie
%span.title "Let Them Talk" with Andrey Malakhov
%li.d-50.show
%span.time 19:00
%span.category TV-show
%span.title Top Gear USA: Episode 4
%li.d-120
%span.time 19:50
%span.category TV-show
%span.title "Let Them Talk" with Andrey Malakhov
%li
%span.logo
%img(src="images/channels-icons/euronews.jpg" alt="logo")
%span.title HTH
%ul.programs
%li.d-30.movie
%span.time 17:10
%span.category Cinema
%span.title Battle of the dinosaurs: Perfect Prey
%li.d-40
%span.time 18:20
%span.category Movie
%span.title Joanna Lumley Nile: Series 2
%li.d-30.show
%span.time 19:00
%span.category TV-show
%span.title Download: the true story of the Internet: eBay / Amazon
%li.d-40.series
%span.time 19:50
%span.category TV-show
%span.title Opening New Industrial Europe: Cotton, linen and hemp
%li.d-80.doc
%span.time 19:50
%span.category TV-show
%span.title Joanna Lumley Nile
%li
%span.logo
%img(src="images/channels-icons/euronews.jpg" alt="logo")
%span.title M-tv
%ul.programs
%li.d-20
%span.time 17:10
%span.category Cinema
%span.title Let's get married!
%li.d-40.movie
%span.time 18:20
%span.category Movie
%span.title "Let Them Talk" with Andrey Malakhov
%li.d-50.show
%span.time 19:00
%span.category TV-show
%span.title Top Gear USA: Episode 4
%li.d-120
%span.time 19:50
%span.category TV-show
%span.title "Let Them Talk" with Andrey Malakhov
.now-line
.scroll-control.reverse
.scroll-control.forward
.scroll-control.bottom
.clearfix
%ul.legend
%li.show TV Shows
%li.movie Movie
%li.series Series
%li.doc Documentary
.clearfix.separator
#footer
.social
.likebox
%img(src="images/likebox.png" alt="likebox")
.network
%a.yt(href="#" title="Volia YouTube")
%span YouTube
%a.tw(href="#" title="Volia Twitter")
%span Twitter
%a.fb(href="#" title="Volia Facebook")
%span Facebook
%a.vk(href="#" title="Volia Vkontakte")
%span Vkontakte
%span Volia in social networks:
%ul.navigation
%li.first
%a(href="#" title="Bundles") Bundles
%ul
%li
%a(href="#" title="TV + Internet for 299") TV + Internet for 299
%li
%a(href="#" title="Internet") Internet
%ul
%li
%a(href="#" title="Dr. Web") Dr. Web
%li
%a(href="#" title="Dr. Web") VoIP
%li
%a(href="#" title="Television") Television
%ul
%li
%a(href="#" title="HD TV") HD TV
%li
%a(href="#" title="TV Program") TV Program
%li
%a(href="#" title="Supports") Supports
%ul
%li
%a(href="#" title="Billing") Billing
%li
%a(href="#" title="Customer accounts") Customer accounts
%li
%a(href="#" title="About Volia") About Volia
%ul
%li
%a(href="#" title="Volia Company") Volia Company
%li
%a(href="#" title="Press-center") Press-center
%li
%a(href="#" title="Carrier at Volia") Carrier at Volia
%li
%a(href="#" title="For Business") For Business
%ul
%li
%a(href="#" title="Bundles") Bundles
%li
%a(href="#" title="Internet") Internet
%li
%a(href="#" title="Hosting") Hosting
%li.last
%a(href="#" title="Contacts") Contacts
.disclaimer
%p
Veggies sunt bona vobis, proinde vos postulo esse magis sea lettuce avocado silver beet potato wakame
water chestnut asparagus lotus root green bean radicchio azuki bean arugula chickweed tomato.Artichoke
garbanzo sorrel bush tomato rock melon gourd lotus root taro burdock summer purslane spring onion napa
cabbage soko grape groundnut tomatillo catsear. Gumbo winter purslane beet greens bush tomato bitterleaf
rutabaga melon cabbage cucumber kale fava bean water chestnut chickpea. Avocado maize bell pepper burdock
amaranth carrot fava bean scallion parsnip komatsuna rutabaga green bean. Taro plantain tigernut lettuce
sea lettuce garbanzo komatsuna salad parsnip seakale bok choy kakadu plum welsh onion fava bean salsify.
Maize aubergine lentil garlic bitterleaf fava bean silver beet potato avocado onion bush tomato endive
zucchini. Horseradish chard turnip greens tomatillo gumbo bunya nuts cress sorrel radicchio collard greens
black-eyed pea quandong corn watercress. Lotus root brussels sprout prairie turnip quandong pea garlic
wakame plantain kombu broccoli komatsuna dulse potato parsnip. Radicchio soybean endive epazote seakale
gumbo spring onion cress artichoke tigernut.
%hr
%span.support
Customer Support:
%span.bold (044) 502–22–50
%span.copyright
© 2002 – 2011
%a(href="/" title="Volia") Volia
#popup-container
%form#login-form(action="/")
%fieldset
%h3 Login
%p
%label(for="field-agreement-number") Agreement number
%input#field-agreement-number(type="text")
%p
%label(for="field-password") Password
%input#field-password(type="password")
%p.checkbox
%input#field-remember-me(type="checkbox")
%label(for="field-remember-me") Remember me
%p.btn
%button(type="submit") Submit
%p
%a(href="#" title="Forget the password?") Forget the password?
%p.close
%a(href="#" title="Close") Close =background-gradient($from, $to)
background: $from
background: -moz-linear-gradient(top, $from 0%, $to 100%)
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to))
background: -webkit-linear-gradient(top, $from 0%,$to 100%)
background: -o-linear-gradient(top, $from 0%,$to 100%)
background: -ms-linear-gradient(top, $from 0%,$to 100%)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$from', endColorstr='$to', GradientType=0)
background: linear-gradient(top, $from 0%,$to 100%)
a, button, input, ul
-webkit-transition: all 0.1s ease
-moz-transition: all 0.1s ease
-o-transition: all 0.1s ease
body
position: relative
font-family: 'Arial'
padding: 0
margin: 0
font-size: 12px
input, textarea, button
font-family: 'Arial'
z-index: 1
&.invalid
border-color: #ff0000 !important
textarea
padding: 3px
font-size: 14px
line-height: 18px
color: #777
a
color: #f05a21
&:hover
color: #d13a00
h1, h2, h3, h4, h5, h6
font-weight: bold
h2
font-size: 18px
line-height: 18px
color: #010101
&.text-center
margin-bottom: 5px !important
h3
font-size: 14px
line-height: 14px
h4
font-size: 12px
line-height: 12px
hr
&.bold
border-width: 3px 0 0
border-color: #d0d0cd
&.dotted
border-style: dotted none none
border-color: #848484
.error
color: #ff0000 !important
.disabled
opacity: 0.5
.small
font-size: 11px
span
&.label
color: #8f8f8f
&.yes
background: url("../images/order-direct-icons.png") no-repeat -24px -24px
display: block
height: 24px
width: 24px
&.no
background: url("../images/order-direct-icons.png") no-repeat -48px -48px
display: block
height: 24px
width: 24px
.margin-auto
margin: 0 auto
.padding-left-25
padding-left: 25px
.padding-left-50
padding-left: 50px
.padding-left-75
padding-left: 75px
.padding-right-25
padding-right: 25px
.padding-right-50
padding-right: 50px
.padding-right-75
padding-right: 75px
.width-200
width: 200px
.width-175
width: 175px
.width-150
width: 150px
.width-125
width: 125px
.width-100
width: 100px
.odd
background-color: #fff
.even
background-color: #f8f8f8
.right
float: right
img.right
margin-left: 15px
.left
float: left
img.left
margin-right: 15px
.float-right
float: right
.float-left
float: left
.text-right
text-align: right
.text-center
text-align: center
.text-left
text-align: left
.border-bottom-dotted
border-bottom: 1px dotted #999
.border-bottom-solid
border-bottom: 1px solid #999
table
&.border-dotted
margin: 0 0 25px
tr
border-bottom: 1px dotted #999
th
padding: 9px 0
td
padding: 9px 0
color: #777
a
font-size: 12px
line-height: 12px
font-weight: bold
text-decoration: none
border-bottom: 1px dashed #F05A21
&:hover
border-bottom-color: #D13A00
tr
&.border-bold
border-bottom: 3px solid #D0D0CD
&.border
border-bottom: 1px solid #999
&.grey
background-color: #f7f7f7
&.border-none
border-bottom: 0 none
.clearfix
clear: both
height: 0
&.separator
height: 20px
.spinbox
position: relative
width: 51px
input
box-shadow: 0 1px 1px #888888 inset
border: 1px solid #e9e9e9
border-radius: 3px
font-size: 14px
line-height: 14px
font-weight: bold
padding: 2px 17px 1px 2px
width: 30px
height: 21px
text-align: center
span
background: url("../images/spinbox-arrow.png") no-repeat
display: block
height: 5px
width: 11px
position: absolute
right: 5px
opacity: 0.8
&.inc
background-position: 0 0
top: 6px
&.dec
top: 16px
background-position: 0 -5px
&:hover
opacity: 1
cursor: pointer
ul
&.list-style-triangle
list-style-image: url("../images/list-style-triangle.png")
margin: 10px 0 20px
li
margin-bottom: 10px
font-size: 14px
line-height: 14px
&.list-style-none
list-style: none
margin: 10px 0 20px;
padding: 0 0 0 15px;
li
color: #777
margin-bottom: 5px
font-size: 14px
li.hidechildren
ul
display: none !important
a.print
font-size: 11px
line-height: 11px
height: 11px
background: url("../images/print-icon.png") no-repeat left center
padding-left: 16px
margin-left: 10px
a.more-link
text-decoration: none
&:hover
text-decoration: underline
&.arr
span
text-decoration: underline
.bold
font-weight: bold
.italic
font-style: italic
.underline
text-decoration: underline
.black
color: #333333 !important
.margin-top-2em
margin-top: 2em
.margin-bottom-2em
margin-bottom: 2em
#header, #content, #footer
width: 960px
margin: 0 auto
#header
padding-top: 18px
height: 109px
position: relative
#login-block
position: absolute
z-index: 9999
top: 0
right: 0
a.login
height: 16px
display: block
padding: 4px 9px 5px
border-left: 1px solid #a8a8a8
border-right: 1px solid #a8a8a8
border-bottom: 1px solid #a8a8a8
border-radius: 0px 0px 3px 3px
+background-gradient: (#e7eae3, #cacdc7)
text-decoration: none
&:hover
span
color: #000
img
float: left
span
font-weight: bold
color: #333
margin: 3px 0 0 5px
font-size: 14px
line-height: 14px
text-shadow: 0 1px 1px #fff
display: block
float: left
#logo
margin: 0
float: left
div.top
margin: 0 0 0 185px
padding: 10px 0 0
border-bottom: 1px solid #bbb
height: 27px
ul
margin: 0
padding: 0
list-style: none
li
float: left
&.menu
li
margin-right: 3px
border-radius: 3px 3px 0 0
border-top: 1px solid #ccc
border-right: 1px solid #ccc
border-left: 1px solid #ccc
background-color: #f9faf4
height: 26px
a
padding: 8px 15px
font-size: 11px
text-decoration: none
color: #333
display: block
line-height: 11px
&:hover
background-color: #fff
&.active
height: 27px
border-top: 1px solid #999
border-right: 1px solid #999
border-left: 1px solid #999
background-color: #fff
a
color: #555
font-weight: bold
&.localization
float: right
margin: 6px 0 0 0
li
line-height: 11px
a
font-size: 11px
border-right: 1px solid #ccc
color: #999
text-decoration: none
padding: 0 5px
&.last
a
padding: 0 0 0 3px
border-right: 0 none
&.active
a
font-weight: bold
color: #9ab82e
&:hover
color: #9ab82e
&:hover
a
color: #555
span.location
float: right
background: url("../images/location.png") no-repeat 9px 4px
padding: 5px 11px 2px 24px
height: 15px
display: block
line-height: 11px
border-top: 1px solid transparent
border-left: 1px solid transparent
border-right: 1px solid transparent
position: absolute
right: 98px
z-index: 9999
a
text-decoration: none
line-height: 11px
font-size: 11px
color: #333
font-weight: bold
border-bottom: 2px dotted #000
&:hover
color: #000
&.active
border-top: 1px solid #ababab
border-left: 1px solid #ababab
border-right: 1px solid #ababab
background-color: #f9faf7
div.user
margin: 5px 0 0 185px
height: 11px
ul.menu
float: right
padding: 0
margin: 0
list-style: none
li
float: left
font-size: 11px
line-height: 11px
margin-left: 15px
a
color: #333
text-decoration: none
&:hover
text-decoration: underline
ul.menu.main
margin: 20px 0 0 185px
padding: 0 0 0 8px
list-style: none
border-bottom: 1px solid #eaeaea
height: 25px
li
float: left
margin: 0 15px 0 5px
a
color: #555
font-size: 16px
line-height: 16px
text-decoration: none
&:hover
color: #000
&.important
a
color: #f05a21
&:hover
color: #d13a00
&.active
a
color: #9ab82e
#content
.form-selector
font-size: 14px
margin-bottom: 18px
>span.label
margin: 3px 5px 0 0
float: left
>.values
display: inline-block
position: relative
width: 200px
padding: 2px 20px 3px 6px
border: 1px solid #cdcbcb
border-radius: 3px
cursor: pointer
box-shadow: 0 1px 0px #eeeeee inset
background: white
&:hover
background-color: #f5f5f5
>span.current
input
width: 200px
height: 17px
border: 0 none
padding: 0
margin: 0
background-color: transparent
>span.toggle
position: absolute
width: 0px
height: 0px
right: 8px
top: 10px
border-width: 5px
border-style: solid
border-color: #555 transparent transparent
>ul
display: none
position: absolute
list-style: none
left: 0
margin: 4px 0 0
padding: 5px 20px 7px 6px
border: 1px solid #bbbbbb
background: #f0f0f0
z-index: 999
width: 198px
height: auto
overflow-y: auto
box-shadow: 1px 1px 6px #555555
>li
width: 100%
padding: 3px 5px 4px
cursor: pointer
&:hover
color: #f5f5f5
background: #444444
&.active
background-color: #f5f5f5
>ul
display: block
.list-selector
font-size: 14px
margin-bottom: 5px
clear: both
display: inline-block
width: 100%
span.label
float: left
color: black
width: 100px
padding-top: 2px
font-weight: bold
ul
margin: 0 0 0 100px
padding: 0
list-style: none
li
float: left
padding: 2px 9px 3px
margin: 0 1px
border-radius: 5px
border-width: 1px
border-color: transparent
font-weight: normal
backgraund: transparent
color: #728d0f
cursor: pointer
&.active
font-weight: bold
color: black
background: #eff2eb
&:hover
background: #eff2eb
.block-selector
clear: both
border-top: 1px solid #cdcdcd
border-right: 1px solid #cdcdcd
height: 40px
+background-gradient: (#efefef, #e3e3e3)
span.label
float: left
height: 27px
width: 80px
margin: 0
padding: 13px 10px 0
font-size: 14px
line-height: 14px
font-weight: bold
color: #000000
border-left: 1px solid #cdcdcd
border-right: 1px solid #cdcdcd
+background-gradient: (#efefef, #e3e3e3)
ul
list-style: none
margin: 0
padding: 0
li
float: left
height: 27px
width: auto
margin: 0
padding: 13px 10px 0
font-size: 14px
line-height: 14px
font-weight: bold
color: #000000
border-left: 1px solid #f0f0f0
border-right: 1px solid #cdcdcd
+background-gradient: (#efefef, #e3e3e3)
span
display: block
font-size: 11px
color: #333333
white-space: nowrap
font-weight: normal
&:hover
cursor: pointer
+background-gradient: (#d5d5d5, #e3e3e3)
border-left: 1px solid #d5d5d5
&.active
border-left: 1px solid #3d3d3d
+background-gradient: (#343434, #454545)
color: white
span
color: white
.search-block, .widget_volia_search
>form
fieldset
position: relative
display: inline
input.search
color: #999
background-color: #fff
border: 1px solid #bbb
border-radius: 5px
width: 144px
padding: 3px 24px 3px 7px
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.13)
button
position: absolute !important
filter: none !important
background: url("../images/search-icon.png") no-repeat !important
width: 17px !important
height: 16px !important
border: 0 none !important
box-shadow: none !important
padding: 0 !important
margin: 0 !important
right: 4px !important
top: 3px !important
opacity: 0.8 !important
&:hover
opacity: 1 !important
.nav
margin: 0 0 15px 190px
height: 22px
padding: 0 0 0 8px
.breadcrumbs
ul
list-style: none
margin: 0
padding: 0
li
float: left
color: #8f8f8f
font-size: 14px
line-height: 14px
margin: 5px 3px 0 0
a
color: #555
font-size: 11px
&:hover
color: #000
&.active
a
text-decoration: none
color: #3f3f3f
font-weight: bold
&:hover
color: #000
&.home
a
border-bottom: 1px solid #555
display: block
float: left
height: 13px
margin-right: 3px
&:hover
border-bottom-color: #000
#article
margin-left: 20px
margin-bottom: 30px
float: left
.wrap
width: 568px
.half-width
width: 284px
float: left
.wide
width: 762px
&.wide
margin-left: 0
margin-right: 0
width: 960px
float: none
&.order-direct
h1
margin: -25px 0 15px 0
#order-direct
width: 960px
ul.steps
height: 65px
margin: 0
padding: 0
list-style: none
&.steps-3
li
width: 280px
&.first
width: 279px
&.last
width: 279px
li
position: relative
float: left
height: 65px
width: 200px
padding: 0 20px
background: url("../images/order-direct-bg.png") repeat-x
span
display: block
&.arrow
width: 20px
height: 65px
background: url("../images/order-direct-arrow.png") no-repeat 0 0
position: absolute
left: -20px
top: 0
z-index: 9999
&.title
color: #000
font-size: 13px
line-height: 13px
font-weight: bold
margin: 18px 0 2px 0
&.description
color: #777
font-size: 15px
line-height: 15px
&.first
border-left: 1px solid #cecece
border-radius: 5px 0 0 0
width: 199px
&.last
border-right: 1px solid #cecece
border-radius: 0 5px 0 0
width: 199px
&.active
background-position: 0 -65px
span
&.arrow
background-position: 0 -65px
&.description
color: #000
>.content
border-left: 1px solid #cecece
border-right: 1px solid #cecece
border-bottom: 1px solid #cecece
border-radius: 0 0 5px 5px
padding: 25px 62px 17px
h2
font-size: 27px
line-height: 27px
color: #777
font-weight: normal
margin-bottom: 20px
span
color: #333
h3
font-size: 18px
line-height: 18px
p
&.label
color: #777
font-size: 14px
line-height: 14px
margin-bottom: 7px
display: block
&.text
color: #333
font-size: 17px
line-height: 17px
text-align: center
font-weight: bold
margin-bottom: 20px
.customer-information
float: right
border-radius: 5px
background-color: #f0f4f6
padding: 21px 25px 15px
width: 250px
h3
font-weight: bold
color: #000
font-size: 18px
line-height: 18px
margin: 0 0 15px 0
a
color: #5f5f5f
font-size: 12px
line-height: 12px
margin-top: 5px
font-weight: normal
&:hover
color: #333
p
margin: 0 0 12px 0
font-size: 14px
line-height: 14px
color: #000
.detailed-order-summary
width: 520px
margin: 41px 0 45px 0
table
margin: 0 -10px
tbody
tr
td
padding: 5px 10px
hr
margin: 7px 0 0 0
border-color: #999
span
font-size: 14px
line-height: 14px
color: #000
display: block
&.price
float: right
margin-left: 7px
&.old
text-decoration: line-through
&.description
color: #676767
font-size: 11px
line-height: 11px
margin-top: 3px
&.info
color: #777
font-size: 11px
line-height: 11px
margin-top: 3px
h4
color: #9ab82e
font-size: 14px
line-height: 14px
margin: 0 0 5px 0
&.monthly
background-color: #e0f0b8
td
padding: 6px 10px
span.title, span.price
font-size: 16px
line-height: 16px
span.old
font-size: 14px
line-height: 16px
&.total-price
background-color: #d7d7d7
span
font-size: 16px
line-height: 16px
.controls
border-top: 1px solid #cecece
margin: 0 -62px
padding: 0 62px
border-radius: 0
background-color: #fff
box-shadow: none
width: 834px
p
margin: 25px 0 8px 0
padding: 0
height: 35px
form
fieldset
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
background-color: #f9faf7
border-radius: 5px
margin-bottom: 25px
padding: 25px 0 9px
.form-selector
position: relative
margin-bottom: 18px
.values
padding: 3px 20px 4px 6px
&.error
border-color: #ff0000
input
color: #333
font-weight: bold
span.current
color: #333
font-weight: bold
span
&.label
text-align: right
display: block
width: 186px
margin: 6px 9px 0 0
font-size: 14px
line-height: 14px
color: #555
float: left
&.message
position: absolute
left: 470px
top: 3px
font-size: 13px
line-height: 13px
display: block
width: 450px
&.error
color: #ff0000 !important
p
margin-bottom: 18px
padding-right: 30px
position: relative
a.change-address
color: #777
font-size: 14px
line-height: 14px
padding-top: 4px
span.title
display: block
padding: 4px 0 0 0
color: #333
margin: 0 0 0 201px
&.apartment
input
width: 50px
&.calendar-picker
input
padding-right: 31px
width: 216px
span.calendar-picker-icon
position: absolute
top: 5px
left: 424px
background: url("../images/calendar-picker-icon.png") no-repeat
display: block
width: 20px
height: 20px
&:hover
cursor: pointer
&.btn
margin: 5px 0 18px 195px
display: inline-block
&.adress-message
margin: 10px 0 25px 195px
font-size: 12px
line-height: 12px
color: #777
>span
display: block
padding-top: 6px
margin-left: 30px
.bold
color: #333
.green
color: #9ab82e
&.img
height: 24px
width: 24px
float: left
margin: 0 6px 0 0
padding: 0
&.loading
background: url("../images/order-direct-loader.gif") no-repeat
&.not-available
background: url("../images/order-direct-icons.png") no-repeat
&.available
background: url("../images/order-direct-icons.png") no-repeat -24px -24px
label
text-align: right
display: block
width: 186px
margin: 6px 9px 0 0
font-size: 14px
line-height: 14px
color: #555
float: left
input
border: 1px solid #EAEAEA
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) inset
color: #000
font-weight: bold
font-size: 14px
line-height: 14px
padding: 5px 6px
width: 241px
&.error
border-color: #ff0000
input[type="password"]
letter-spacing: 1px
.house
display: inline-block
ul
margin: 6px 0 0 0
padding: 0
list-style: none
float: left
width: 520px
li
float: left
margin-bottom: 10px
a
background-color: #ebebeb
border-radius: 5px
padding: 2px 5px
margin-right: 5px
text-decoration: none
font-size: 14px
line-height: 14px
&:hover
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)
&.active
a
color: #fff
font-weight: bold
background-color: #9ab82e
&.message
padding: 45px 62px 40px
h2
color: #333
p
span.bold
color: #333
&.btn
display: inline-block
#order-configurator
display: inline-block
margin-top: 25px
.hidden
display: none !important
>.wrap
width: 630px
float: left
margin: 0 20px 0 0
>.packages
position: relative
margin: 15px 0
.to-basket
display: block
background-image: url('../images/to-basket.png')
background-position: right -5px
background-repeat: no-repeat
height: 50px
width: 60px
top: 0
right: 0
position: absolute
cursor: pointer
&.advantage
width: 235px
border-radius: 5px
border-style: solid
border-width: 1px
border-color: #94cb13 #8abc14 #696969
background-color: #a6d522
box-shadow: 0 1px 0 #c4e361 inset, 0 1px 0 #7faf0e inset
height: 48px
&:hover
background-color: #9bc720
>span
font-size: 14px
font-weight: bold
color: #000000
display: block
position: absolute
top: 17px
left: 20px
height: 14px
line-height: 14px
>.price-labels
position: absolute
top: 0
left: 220px
width: 350px
height: 25px
>span
position: absolute
width: 90px
bottom: 0
text-align: center
font-size: 11px
color: #777777
&.package
left: 0
&.additional
left: 50%
margin-left: -45px
&.total
right: 0
>ul
margin: 0
padding: 0
list-style: none
>li
.toggle
margin-left: 19px
cursor: pointer
font-size: 11px
color: #777777
width: 140px
margin-bottom: 9px
background-image: url('../images/toggle-arrows.png')
background-repeat: no-repeat
background-color: transparent
background-position: right 2px
&.extra-hide
background-position: right -10px
>div
display: block
width: 628px
height: 50px
border-width: 1px
border-style: solid
border-radius: 5px
border-color: #f7f8f6 #f1f1f0 #ebece9
+background-gradient: (#fafafa, #f5f5f5)
margin: 0 0 10px
position: relative
cursor: pointer
>.name
position: absolute
display: block
width: 210px
height: 30px
top: 8px
left: 17px
>span
display: block
white-space: nowrap
&.title
font-size: 14px
font-weight: bold
color: #f05a21
margin-bottom: 1px
&.description
font-size: 14px
font-weight: normal
color: #777777
>.prices
position: absolute
top: 18px
left: 220px
width: 350px
height: 18px
>span
position: absolute
width: 90px
bottom: 0
text-align: center
font-size: 18px
color: #333333
font-weight: bold
display: none
&.package
left: 0
display: block
&.additional
left: 50%
margin-left: -45px
&.total
right: 0
color: #9ab82e
&.price
>span
position: absolute
font-size: 11px
top: 2px
&.operator
width: 20px
&.plus
left: 29%
&.equals
left: 66%
>span, >ul
display: none
>ul
margin: 0 0 20px
padding: 0 0 0 10px
list-style: none
>li
display: block
width: 618px
height: 28px
cursor: pointer
border-width: 1px
border-style: solid
border-radius: 5px
border-color: #f7f8f6 #f1f1f0 #ebece9
+background-gradient: (#fafafa, #f5f5f5)
margin: 0 0 10px
position: relative
&.active
background: #fffed0
filter: none
border-color: #e5e7e2 #d0d2c9 #bcbfb7
.to-basket
height: 28px
background-position: right -15px
.name
position: absolute
top: 7px
left: 9px
font-size: 11px
color: #777777
.title
color: #f05a21
font-weight: bold
font-size: 12px
.price
width: 90px
height: 14px
left: 210px
top: 6px
position: absolute
text-align: center
font-size: 14px
font-weight: bold
color: #333333
>span
position: absolute
top: 0
font-size: 9px
&.active
.prices
>span
display: block
>div
background: #fffed0
filter: none
border-color: #e5e7e2 #d0d2c9 #bcbfb7
.to-basket
background-position: right -65px
ul.additional
li.active
.to-basket
background-position: right -76px !important
.toggle
display: block
>ul
display: block
&.internet
>ul
>li
>div
+background-gradient: (#f5f7fa, #e5f2f9)
>ul
>li
+background-gradient: (#f5f7fa, #e5f2f9)
&.active
background: #fffed0
filter: none
border-color: #e5e7e2 #d0d2c9 #bcbfb7
&.active
>div
background: #fffed0
filter: none
border-color: #e5e7e2 #d0d2c9 #bcbfb7
>.aside
float: left
width: 180px
margin: 0
.widget
width: 180px
background: #f7f7f7
border-radius: 5px
padding: 0! important
margin-bottom: 15px
>div
padding: 12px
border-style: solid
&.header
border-width: 0 0 1px
border-color: #cdcdcd
&.content
border-width: 1px 0
border-color: #fdfdfd transparent #cdcdcd
&.footer
border-width: 1px 0 0
border-color: #fdfdfd
h3
font-size: 14px
font-weight: normal
color: #333333
padding: 0
margin: 0 !important
h4
font-size: 12px
font-weight: bold
color: #9ab82e
&.basket
padding: 0 !important
.price
width: 45px
&.old
margin-top: 1px
width: 40px
font-size: 11px
font-weight: normal
text-decoration: line-through
ul
padding: 0
margin: 0
border: 0
background: none
li
padding-top: 0
margin-bottom: 10px
position: relative
.description
margin-top: 1px
.title
font-weight: bold
&.advantage
position: relative
.curve
position: absolute
display: block
width: 14px
height: 61px
top: 50%
margin-top: -30px
background: url('../images/curve.png') center no-repeat transparent
right: 37px
.price
position: absolute
line-height: 12px
height: 12px
top: 50%
margin-top: -6px
right: -1px
.delete-button
top: 50%
margin-top: -4px
right: -9px
h3
background: url('../images/basket-icon.png') center right no-repeat
.delete-button
top: 2px
right: -8px
.per-month
padding: 7px 7px
margin: 10px -7px
.total
padding: 7px 7px
margin: 10px -7px 5px
background: #d2d2d2
.title
font-weight: bold
.price
float: right
text-align: right
font-weight: bold
p.btn
text-align: center
margin: 7px 0 12px !important
a.button
padding: 6px 24px !important
&.advantage-proposal
.header
background: #99ce15
border-radius: 5px 5px 0 0
h4
margin: 0
padding: 0
font-size: 14px
color: #000000
font-weight: bold
hr.dotted
margin: 10px -10px
border-style: dotted
border-color: #cdcdcd
border-width: 1px 0 0
.your-selection
>span.label
font-size: 12px
color: #777777
display: block
font-weight: normal
margin-bottom: 5px
>span.title
font-size: 11px
color: #333333333
display: block
font-weight: bold
.suggestion
>span.label
font-size: 12px
color: #777777
display: block
font-weight: normal
margin-bottom: 5px
>span.title
font-size: 14px
color: #333333333
display: block
font-weight: bold
>ul
margin: 15px 0
padding: 0
list-style: none
>li
margin-bottom: 5px
position: relative
>span
position: absolute
font-size: 12px
color: #333333
font-weight: normal
line-height: 12px
height: 12px
margin-top: -6px
top: 50%
left: 40px
.per-month
color: #333333
padding: 7px 7px
margin: 10px -7px 5px
background: #e9e9e9
.title
font-weight: bold
.price
float: right
text-align: right
font-weight: bold
width: 45px
&.old
margin-top: 1px
width: 40px
font-size: 11px
font-weight: normal
text-decoration: line-through
.price-info
color: #777777
font-size: 11px
line-height: 11px
.footer
.add-to-card
cursor: pointer
display: block
width: 135px
background: url('../images/to-basket.png') no-repeat right -17px transparent
padding: 3px 0 0 10px
font-size: 14px
font-weight: bold
color: #333333
margin: 0 auto
#comparsion-packages
border: 1px solid #d0d5d8
border-radius: 5px
table
thead
tr
th
background: url("../images/comparsion-packages-line.png") no-repeat right top
padding: 0
.header
background: url("../images/comparsion-packages-header-bg.png") repeat-x
height: 85px
span
display: block
font-weight: normal
&.package-name
padding: 10px 0 1px 0
color: #6c5951
font-size: 14px
line-height: 14px
&.description
color: #777
font-size: 11px
line-height: 11px
&.package-bar
background-image: url("../images/packages-tv.png")
height: 19px
width: 101px
margin: 10px auto 0
&.maximum
background-position: 0 0
visibility: visible
&.stream
background-position: -102px 0
visibility: visible
&.start
background-position: -204px 0
visibility: visible
&.light
background-position: -306px 0
visibility: visible
&.last
background: none repeat scroll 0 0 transparent
&.package-ukraine
border-radius: 5px 0 0 0
.header
span.package-bar
background-position: -202px 0
&.package-ukraine-world
.header
span.package-bar
background-position: -101px 0
&.package-universe
border-radius: 0 5px 0 0
.header
span.package-bar
background-position: 0 0
tbody
tr
td
padding: 15px 20px
vertical-align: text-top
border-right: 1px dotted #d3d7da
&.last
border-right: 0 none
ul
margin: 0
padding: 0
list-style: none
color: #333
font-size: 12px
line-height: 14px
li
border-bottom: 1px solid #d3d7da
padding: 3px 6px
a
color: #333
text-decoration: none
&:hover
color: #000
&.ukraine
li
background-color: #fff
&.last
border-bottom-color: #fff
&.ukraine-world
li
background-color: #f2f7e5
border-bottom-color: #fff
&.universe
li
background-color: #d6e9a7
border-bottom-color: #fff
.category-label
background: url("../images/category-label.png") no-repeat left center
padding-left: 15px
margin-right: 5px
font-size: 11px
line-height: 11px
a
text-decoration: none
color: #8f8f8f
&:hover
color: #555
ul.news
list-style: none
margin: 0
padding: 0
>li
padding: 0 0 10px 0
margin: 10px 0 0 0
border-bottom: 1px dotted #848484
line-height: 20px
&.last
border-bottom: 0 none
span.date
color: #000
font-size: 11px
line-height: 11px
h3
margin: 0
font-weight: normal
line-height: 20px
p
color: #333
margin-bottom: 5px
a.read-more, a.more-link
text-decoration: none
white-space: nowrap
span
&.title
color: #f05a21
border-bottom: 1px solid #f05a21
&.arrow
color: #d5d5d5
&:hover
span
&.title
color: #d13a00
border-bottom-color: #d13a00
&.arrow
color: #8f8f8f
>span
font-size: 11px
line-height: 11px
color: #8f8f8f
a
text-decoration: none
color: #8f8f8f
&:hover
color: #555
&.source
a
color: #333
&:hover
color: #000
.channel-block
padding: 10px 0 0 0
margin: 0 0 15px 0
overflow-x: hidden
overflow-y: auto
border: 1px solid #bfbfbf
.channel-block, .list-channels, .package-channels
.popup-block
display: none
width: 600px
height: auto
padding: 20px
position: fixed
top: 50%
left: 50%
margin-left: -320px
overflow: auto
z-index: 9999
>img
float: left
margin: 0 20px 10px 0 !important
&.active
display: inline-block
.description
font-size: 14px
margin: 0 !important
font-weight: normal !important
width: 600px !important
diplay: inline-block
line-height: 1.2em
p
margin: 20px 0 !important
font-size: 14px
font-weight: normal !important
color: #555555
ul.list-channels
list-style: none
margin: 0
padding: 0
display: inline-block
width: 100%
>li
float: left
height: 25px
width: 50%
a
text-decoration: none
img
width: 23px
float: left
padding: 1px 10px 0 15px
span
font-size: 11px
line-height: 11px
float: left
padding-top: 6px
&.title
border-bottom: 1px dashed #333
color: #333
margin-right: 5px
&.add-info
color: #777
&:hover
span.title
color: #000
border-bottom-color: #000
ul.package-channels
margin: 0
padding: 0
list-style: none
display: inline-block
width: 100%
li
float: left
width: 75px
height: 95px
margin-right: 3px
img
display: block
margin: 0 auto 5px
a
text-decoration: none
text-align: center
display: block
span.title
color: #333
border-bottom: 1px dashed #333
font-size: 11px
line-height: 11px
&:hover
.title
color: #000
.technical-info
h2
margin-bottom: 15px
ul
margin: 0 0 10px 0
padding: 0
list-style: none
border-top: 3px solid #d0d0cd
border-bottom: 1px solid #848484
li
border-bottom: 1px dotted #848484
padding: 10px 0 8px
&.last
border-bottom: 0 none
span
font-size: 14px
line-height: 14px
&.value
float: right
font-weight: bold
display: block
width: 105px
color: #000
.speed
float: left
margin-top: 1px
img
float: left
margin-right: 5px
&.title
color: #777
p
font-style: italic
color: #777
font-size: 13px
.add-packages
margin: 10px 0 20px
h3
margin: 0 0 10px 0
>span
>ul
list-style: none
margin: 0
padding: 0
>li
padding: 10px 15px
width: 538px
margin-bottom: 10px
background-color: #eff2eb
border-radius: 5px
display: inline-block
.price
float: right
margin-top: 20px
width: 90px
text-align: center
span
color: #333
font-size: 12px
font-weight: bold
line-height: 12px
display: block
&.value
font-size: 16px
line-height: 16px
position: rlative
>span
position: absolute
display: inline
font-size: 11px
line-height: 11px
.check
float: left
width: 142px
margin: 0 15px 0 0
input
float: left
margin-top: 30px
label
float: right
img.landing-image
width: 90px
.description
width: 285px
margin: 0 0 0 157px
.title
display: inline-block
>span
-moz-transition: none 0s ease 0s
&.arrow
margin: 8px 0 0 5px
display: block
float: left
width: 11px
height: 7px
background: url("../images/add-packages-arrows.png") no-repeat 0 0
&.text
float: left
color: #f05a21
font-size: 18px
border-bottom: 2px dotted #f05a21
&:hover
cursor: pointer
span
&.arrow
background-position: -11px 0
&.text
color: #d13a00
border-bottom-color: #d13a00
p
margin: 4px 0 0 0
.list-channels
display: none
width: 538px
float: left
margin-top: 10px
ul
border: 0 none
height: auto
&.active
.list-channels
display: block
.description
span
&.text
color: #333
font-weight: bold
border-bottom-color: #333
&.arrow
background-position: 0 -7px
&:hover
span
&.text
color: #000
border-bottom-color: #000
&.arrow
background-position: -11px -7px
p
font-weight: bold
color: #777
.equipment-config, #order-configurator .equipment
display: inline-block
>div
float: left
&#tv_spot_list_module
margin-right: 8px
&#inet_spot_list_module
>ul
background: #f1f5f6
span.label
display: block
font-size: 12px
font-weight: bold
color: #333333
margin-bottom: 8px
>ul
display: inline-block
margin: 0
padding: 0
list-style: none
border: 1px solid #d5d5d5
border-radius: 5px
background: #f9faf4
>li
float: left
border-right: 1px solid #d5d5d5
padding: 1px
position: relative
width: 121px
height: 178px
&.not-connected
.form-selector
>.values
background: transparent
&.last
border-right: 0 none
> input[type="checkbox"]
position: absolute
top: 5px
left: 5px
> label
position: absolute
top: 7px
left: 22px
font-size: 11px
line-height: 11px
height: 11px
>ul
margin: 0
padding: 0
position: absolute
list-style: none
>li
display: none
position: relative
&.current
display: block
img
position: absolute
top: 29px
.price-label
position: absolute
top: 131px
width: 121px
text-align: center
.price
position: absolute
top: 146px
width: 121px
text-align: center
font-size: 24px
span
font-size: 12px
position: absolute
top: 2px
>.form-selector
position: absolute
top: 100px
>.values
border-radius: 0
border-width: 1px 0
border-style: dotted
border-color: #aeafaa
width: 101px
padding-left: 3px !important
padding-right: 16px !important
background: #fffed0
> .toggle
right: 5px
> .current
font-size: 11px
white-space: nowrap
> ul
height: auto
overflow-y: auto
width: 120px
padding-left: 0
padding-right: 0
li
display: block
width: auto
font-size: 11px
.additional-services
margin: 20px 0
h3
margin: 0 0 10px 0
>div
padding: 20px
background-color: #eff2eb
border-radius: 5px
.price
float: right
margin-top: 25px
width: 90px
text-align: center
span
color: #333
font-size: 12px
font-weight: bold
line-height: 12px
display: block
&.value
font-size: 16px
line-height: 16px
position: rlative
>span
position: absolute
font-size: 11px
line-height: 11px
display: inline
.check
float: left
width: 110px
margin: 10px 20px 0 0
input
float: left
margin-top: 30px
label
float: right
img.landing-image
width: 90px
margin-top: -20px
.description
width: 285px
margin: 0 0 0 130px
.title
color: #f05a21
font-size: 18px
border-bottom: 2px dotted #f05a21
p
margin: 2px 0 0 0
.left-side, .right-side
float: left
width: 275px
margin-bottom: 15px
padding-top: 5px
>h2
margin-bottom: 20px
padding: 10px 10px
>table
margin-bottom: 0
font-size: 12px
td
&.orange
color: #f05a21
font-size: 18px
&.green
color: #99ce15
font-size: 18px
a.button
display: block
width: 85px
padding-left: 0
padding-right: 0
text-align: center
margin: 0 auto
.left-side
border-right: 1px solid #e1e1e1
padding-right: 8px
>h2
background-color: #e6f1c6
.right-side
border-left: 1px solid #e1e1e1
padding-left: 8px
>h2
background-color: #fff8d7
.trailer
padding-left: 50px
background: url("../images/play-button.png") no-repeat
height: 42px
display: inline-block
line-height: 20px
font-size: 14px
ul.nvod-list
margin: 0
padding: 0
list-style: none
>li
border-bottom: 3px solid #d0d0cd
display: inline-block
margin-bottom: 10px
a.trailer
background: url("../images/nvod-play-button.png") no-repeat
height: 45px
padding-left: 53px
a.selector
text-decoration: none
display: inline-block
line-height: 14px
cursor: pointer
>span
&.current
border-bottom: 2px dotted #F05A21
float: left
&.toggle
border-color: #F05A21 transparent transparent
border-style: solid
border-width: 4px
height: 0
width: 0
float: left
margin: 6px 0 0 3px
&:hover
.current
border-bottom-color: #D13A00
.toggle
border-color: #D13A00 transparent transparent
>img
float: right
margin: 0 0 10px 15px
width: 185px
.content
margin-right: 200px
height: 274px
h3
font-size: 18px
line-height: 18px
margin-bottom: 10px
padding-top: 5px
font-weight: normal
p
margin-bottom: 2px
a
&.selector
margin: 10px 0 15px
.description
width: 356px
margin-top: -14px
.right-side, .left-side
margin-bottom: 0
padding-top: 0
padding-bottom: 9px
width: 274px
>div
background-color: #fff8d7
height: 78px
padding: 10px
p
margin-bottom: 10px
font-size: 14px
line-height: 14px
span.date
font-size: 16px
font-weight: bold
color: #333
.right-side
padding-left: 9px
.left-side
padding-right: 9px
>div
background-color: #e6f1c6
.nvod-poster
float: left
width: 215px
margin-right: 50px
>img
width: 215px
margin-bottom: 20px
.nvod-description
margin-left: 265px
p
margin-bottom: 7px
.label
font-size: 13px
float: left
width: 185px
margin-right: 5px
.text
margin-left: 190px
display: block
font-size: 13px
line-height: 20px
color: #333
a.text
color: #F05A21
&:hover
color: #D13A00
&.about-film
margin-top: 20px
.popup-block
box-shadow: 1px 2px 4px #444444
padding: 10px
position: absolute
+background-gradient: (#ffffff, #fafafa)
.nvod-description, .schedule
ul.program
list-style: none
margin: 20px 0
padding: 0
font-size: 14px
line-height: 14px
min-width: 250px
>li
margin-bottom: 10px
clear: both
height: 14px
.date
font-weight: bold
color: #777
float: left
margin-right: 5px
width: 55px
display: block
padding: 2px 3px
ul
display: inline-block
margin: 0
padding: 0
list-style: none
color: #777
li
float: left
padding: 2px 3px
margin-right: 5px
&.active
color: #f05a21
background-color: #c6e579
&:hover
cursor: pointer
.old
color: #ccc !important
&:hover
cursor: auto
.location-page
.address
float: left
width: 310px
margin-right: 20px
.form-selector
margin-bottom: 20px
span.label
margin-bottom: 5px
.location-city
*
transition: none
display: none
&.active
display: block
p
margin-bottom: 20px
font-size: 14px
line-height: 18px
span
font-size: 14px
line-height: 18px
a.location-link
display: block
text-decoration: none
background: url("../images/location-2.png") no-repeat 0 2px
height: 18px
padding-left: 15px
span
font-weight: normal
border-bottom: 1px dashed #F05A21
.find-on-the-map
display:inline
.you-found-it
display:none
&:hover
span
border-bottom-color: #D13A00
&.active
background: url("../images/location.png") no-repeat 0 2px
.find-on-the-map
display:none
.you-found-it
display:inline
span
border-bottom: 0 none
color: #333
.map
float: left
width: 432px
height: 285px
overflow: hidden
.billing-history
>ul
list-style: none
margin: 0
padding: 0
font-size: 14px
line-height: 14px
&.year
display: inline-block
li
float: left
margin: 0 5px 10px 0
a
padding: 3px 7px
color: #333
text-decoration: none
font-size: 14px
line-height: 14px
&:hover
color: #000
&.active
a
background-color: #eff2eb
color: #000
&.history
li
div
padding: 9px 0
display: inline-block
&:hover
cursor: pointer
>span
display: block
float: left
text-align: right
margin-right: 10px
width: 130px
color: #000
&.month
text-align: left
width: 115px
>span
font-weight: bold
border-bottom: 1px dashed #F05A21
color: #F05A21
&:hover
span
color: #D13A00
border-bottom-color: #D13A00
&.toggle
background: url("../images/toggle-arrows.png") no-repeat 0 0
width: 11px
height: 10px
margin: 2px 0 0 0
&.active
div
span.toggle
background-position: 0 -10px
&.header
border-bottom: 3px solid #D0D0CD
div
span
text-align: center
margin: 0 0 0 45px
width: 95px
font-size: 11px
line-height: 11px
color: #000
&.first
text-align: left
margin: 0 45px 0 0
>.wrap>.equipment
padding: 0 0 0 10px
border-top: 1px solid #cecece
border-bottom: 1px solid #cecece
background: url("../images/equipment-bg-gr.png") repeat-x 0 top
h2
margin: 25px 0 0 0
>ul
padding: 0
list-style: none
margin: 0 0 20px
&.border-bottom
border-bottom: 1px solid #cecece
&.border-bottom-none
border-bottom: 0 none
>li
height: 180px
position: relative
img
position: absolute
right: 0
top: 0
>span.price
background: url("../images/equipment-price-bg.png") no-repeat
display: block
height: 63px
width: 63px
position: absolute
left: 372px
top: 52px
>span
color: #fff
text-align: center
display: block
&.value
font-weight: bold
margin-top: 15px
font-size: 25px
line-height: 25px
margin-left: -15px
position: relative
>span
position: absolute
font-size: 12px
top: 0
line-height: 14px
&.title
font-size: 12px
line-height: 12px
p
width: 340px
&.check
margin: 30px 0 0 0
input
float: left
margin: 5px 7px 0 0
label
font-size: 24px
line-height: 24px
color: #777
&.checked
color: #9ab82e
&.description
margin: 25px 0 0 20px
font-size: 13px
line-height: 20px
color: #777
&.tv-package
>ul
>li
height: 250px !important
margin-bottom: 20px
img
top: 5px
right: 0
p
position: absolute
margin: 0
&.check
font-size: 20px
line-height: 20px
top: 22px
&.description
width: 255px
font-size: 14px
line-height: 20px
top: 75px
left: 30px
.number-cam-modules
position: absolute
top: 150px
left: 30px
width: 230px
height: 30px
>span.title
font-size: 14px
line-height: 14px
color: #777
left: 0
top: 6px
position :absolute
.spinbox
position: absolute
right: 0
&.disabled
span.title
color: #cbcbcb
.spinbox
opacity: 0.5
a.more-link
position: absolute
top: 205px
left: 30px
color: #555
text-decoration: none
span
color: #F05A21
border-bottom: 1px solid #F05A21
&:hover
span
color: #D13A00
border-bottom-color: #D13A00
span.price
display: block
top: 125px
left: 273px
text-align: center
font-weight: bold
color: #fff
>span.value
height: 23px
display: block
font-size: 23px
line-height: 23px
position: relative
margin-left: -15px
>span
position: absolute
top: 2px
font-size: 15px
line-height: 15px
.title
top: 0
font-size: 11px
line-height: 13px
&.page
border-top: 3px solid #cecece
border-bottom: 3px solid #cecece
background: none repeat scroll 0 0 transparent
margin-bottom: 10px
padding: 0
>ul
>li
border-bottom: 1px solid #cecece
padding: 10px 0
display: inline-block
width: 762px
height: auto
&.last
border-bottom: 0 none
span.price
> span.value
color: #fff
display: block
font-size: 23px
font-weight: bold
height: 23px
line-height: 23px
margin-left: -10px
> span
top: 0
font-size: 11px
line-height: 13px
position: absolute
img
position: relative
float: right
h2
margin-top: 20px
display: inline-block
span
float: left
color: #333
font-weight: bold
font-size: 12px
line-height: 12px
&.title
margin-right: 5px
font-weight: normal
color: #777
font-size: 20px
line-height: 20px
p.description
margin: 25px 0 0 0
span.price-info
position: absolute
left: 389px
top: 33px
display: block
font-size: 14px
line-height: 14px
font-weight: bold
&.rent
color: #777
&.buy
color: #333
ul
margin: 20px 0 10px 15px
padding: 0
list-style: none
li
span
padding: 4px 0 0 30px
width: auto
height: 20px
.equipment-list
ul
marigin: 0 0 15px 0
padding: 0
list-style: none
li
display: block
border-bottom: 1px solid #cecece
position: relative
padding-top: 15px
padding-bottom: 10px
&.last
border-bottom: 3px solid #cecece
img
position: absolute
bottom: 0
right: 0
h2
font-size: 20px
font-weight: normal
margin: 20px 230px 20px 0
p.description
margin-right: 230px
font-size: 13px
line-height: 20px
color: #777777
&.tv
ul
li
img
width: 180px
.bundle-single-package
border-top: 1px solid #cecece
background: url("../images/equipment-bg-gr.png") repeat-x 0 top #fff
position: relative
height: 230px
padding-left: 10px
img
position: absolute
top: 0
right: 0
&.landing-image
top: 5px
height: 205px
h2
margin: 20px 0 30px 0
h3
color: #9ab82e
font-size: 20px
line-height: 20px
.description
width: 300px
a.less
position: absolute
bottom: 10px
text-decoration: none
span
display: block
float: left
&.title
border-bottom: 2px dotted #333
font-size: 14px
line-height: 14px
color: #333
&.toggle
margin: 2px 0 0 4px
width: 0px
height: 0px
border-width: 4px
border-style: solid
border-color: transparent transparent #333
&:hover
span
&.title
color: #000
border-bottom-color: #000
.subscriber
margin: 25px 0
border-bottom: 1px solid #cecece
padding-bottom: 20px
display: inline-block
width: 564px
&.no-line
padding: 0
border-bottom: 0 none
.half-width
p.btn
margin-top: 35px
.new-subscriber
width: 250px
margin-right: 30px
.exesting-subscriber
width: 288px
&.nvod-page
width: auto
padding: 0
margin: 0 0 30px 0
border-bottom: 3px solid #D0D0CD
.right-side, .left-side
margin: 0
p
display: inline-block
width: 275px
&.border-bottom-dotted
padding-bottom: 15px
span
display: block
padding-top: 8px
a.button
margin: 0 0 0 10px
.right-side
border-left: 0 none
.left-side
border-right: 2px solid #E1E1E1
p
width: 273px
&.border-bottom-dotted
margin-right: 5px
padding-right: 5px
.userful-links
h2
margin: 0 0 14px
ul
margin: 0
padding: 0
list-style: none
li
margin-bottom: 5px
span
font-size: 13px
line-height: 13px
&.title
color: #333
&.text
color: #777
ul
&.list
list-style-image: url("../images/ul-circle.png")
font-size: 14px
color: #777
padding: 0 0 0 30px
margin: 10px 0 20px
li
margin-bottom: 5px
&.type-0
list-style-image: url("../images/ul-line.png")
&.clear
list-style: none
padding: 0
li
margin: 0
padding: 0
&.list-none
list-style: none
margin: 10px 0 20px
padding: 0
li
margin-bottom: 10px
font-size: 13px
line-height: 13px
span.volia-company-quote
float: left
font-size: 17px
font-weight: bold
line-height: 23px
margin: 0 20px 20px 0
width: 170px
.promoblock
margin-bottom: 20px
a
&.button
padding: 7px 20px
color: #000
text-shadow: 0 1px 1px #fff
font-weight: bold
font-size: 16px
line-height: 16px
text-decoration: none
white-space: nowrap
border-radius: 3px
border-width: 1px
border-style: solid
border-color: #b1d44f #9fc33f #8caf2c
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2)
+background-gradient: (#c0dd66, #a7ce40)
&:hover
+background-gradient: (#bbd662, #9dc13d)
&.small
font-size: 11px
padding: 3px 20px
&.orange
+background-gradient: (#eb9739, #e2751a)
border-color: #e87236 #de672e #bc4414
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
&:hover
+background-gradient: (#eb8718, #d87019)
&.blue
+background-gradient: (#7adef2, #54cfeb)
border-color: #0dbde4 #0eb0d3 #0fa3c3
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6)
&:hover
+background-gradient: (#62d3ea, #3ebedb)
&.with-arrow
text-decoration: none
span
text-decoration: underline
button
padding: 7px 20px
color: #000
text-shadow: 0 1px 1px #fff
font-weight: bold
font-size: 16px
line-height: 16px
text-decoration: none
border-radius: 3px
border-width: 1px
border-style: solid
border-color: #b1d44f #9fc33f #8caf2c
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2)
+background-gradient: (#c0dd66, #a7ce40)
&:hover
+background-gradient: (#bbd662, #9dc13d)
&.blue
+background-gradient: (#7adef2, #54cfeb)
border-color: #0dbde4 #0eb0d3 #0fa3c3
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6)
&:hover
+background-gradient: (#62d3ea, #3ebedb)
&.orange
+background-gradient: (#eb9739, #e2751a)
border-color: #e87236 #de672e #bc4414
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
&:hover
+background-gradient: (#eb8718, #d87019)
.article-header
margin-bottom: 10px
.right
font-size: 11px
>span
color: #000000
margin-left: 5px
&.location
font-weight: bold
>a.print
margin-left: 5px
.article-footer
font-size: 14px
margin: 30px 0
span.update-date
color: #777
font-size: 12px
line-height: 12px
h1
margin: 0 0 20px 0
font-size: 20px
line-height: 20px
color: #000
h2
color: #000
margin: 0 0 15px 0
h3
color: #000
margin: 0 0 10px 0
h4
color: #555555
margin: 5px 0 10px
p
color: #777
font-size: 14px
line-height: 18px
margin: 0 0 15px 0
&.prev-next
font-size: 11px
text-align: right
color: #F05A21
a
text-decoration: none
span
text-decoration: underline
&:hover
&.insert
&.left
float: left
font-size: 17px
font-weight: bold
line-height: 23px
margin: 0 20px 20px 0
width: 170px
&.working-hours
margin: 0 0 5px 30px
span
font-weight: bold
&.workplace
margin-left: 30px
span
font-weight: bold
&.message
color: #333
font-weight: bold
&.btn
margin: 20px 0 15px 0
.carrier
padding-bottom: 20px
border-bottom: 3px solid #9ab82e
div.carrier-at-volia
width: 430px
margin-right: 25px
float: left
div.address
float: left
width: 305px
p
&.phone
margin: 0 0 5px
span
font-weight: bold
font-size: 12px
line-height: 12px
&.value
color: #000
div.carrier-select
float: left
width: 100%
margin-top: 10px
>span.title
font-size: 12px
line-height: 12px
font-weight: bold
color: #777
float: left
width: 130px
margin-top: 1px
ul
list-style: none
margin: 0
padding: 0
width: 632px
float: left
li
margin: 0
float: left
a
text-decoration: none
font-size: 12px
line-height: 12px
padding: 2px 6px
span.title
border-bottom: 1px dashed #f05a21
span.value
color: #7e7e7e
&:hover
span.title
border-bottom-color: #d13a00
&.active
a
background-color: #acd373
color: #fff
border-bottom: 0 none
margin-left: 5px
span.title
border-bottom-color: transparent
span.value
color: #475121
&.department
margin-bottom: 15px
li
margin-right: 10px
&.city
li
width: 130px
margin-bottom: 10px
ul.vacancy
margin: 15px 0 20px 0
padding: 0
list-style: none
li
border-bottom: 1px dotted #848484
padding: 10px 0
a
display: block
font-size: 14px
span
color: #333
font-size: 11px
p
margin: 0
&.last
border-bottom: 0 none
.features
height: 330px
position: relative
margin-top: 20px
img
position: absolute
right: 0
>span
&.price
position: absolute
background: url("../images/packages-price-bg.png") no-repeat
height: 108px
width: 108px
display: block
top: 180px
left: 271px
text-align: center
>span.value
color: #fff
height: 35px
font-weight: bold
margin-top: 30px
display: block
line-height: 35px
font-size: 35px
position: relative
top: 0
padding-right: 15px
>span
position: absolute
top: 2px
font-size: 20px
line-height: 20px
.title
color: #fff
font-size: 14px
line-height: 20px
&.description
display: block
width: 280px
color: #777
font-size: 16px
h1
font-size: 25px
line-height: 25px
position: relative
width: 300px
.text
margin-top: 10px
width: 225px
p
font-size: 16px
line-height: 20px
color: #0f1301
margin: 0 0 15px 0
&.type-1
margin: 10px 0
.text
position: absolute
top: 70px
left: 50px
width: 300px
margin: 0
span.slogan
color: #f05a21
font-size: 18px
line-height: 18px
margin-bottom: 10px
display: block
h1
color: #f05a21
font-size: 35px
line-height: 45px
&.promotions
h1
font-size: 20px
>.wrap>.packages
background-color: #f6f6f6
border: 3px solid #f6f6f6
border-radius: 5px
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4)
margin: 0 0 0 -3px
width: 762px
.description
height: 275px
padding: 20px
border-radius: 5px 5px 0 0
+background-gradient: (#ffffff, #f5f6ee)
position: relative
>img
position: absolute
right: 0
top: 0
h1
font-size: 25px
line-height: 25px
color: #f05a21
width: 280px
.price
background: url("../images/packages-price-bg.png") no-repeat
height: 108px
width: 108px
display: block
position: absolute
top: 92px
left: 347px
text-align: center
.title
color: #fff
font-size: 14px
line-height: 20px
>span.value
color: #fff
height: 35px
font-weight: bold
margin-top: 30px
display: block
font-size: 35px
line-height: 35px
display: block
position: relative
top: 0
margin-left: -15px
>span
position: absolute
top: 2px
font-size: 20px
line-height: 20px
.speed-up
.package-bar
background: url("../images/packages.png") no-repeat
display: block
height: 17px
width: 102px
margin-bottom: 5px
&.boobles
background-image: url("../images/packages-tv.png")
.speed
color: #777
font-size: 12px
line-height: 12px
&.light
.package-bar
background-position: -306px 0
&.start
.package-bar
background-position: -204px 0
&.stream
.package-bar
background-position: -102px 0
&.maximum
.package-bar
background-position: 0 0
>p
position: absolute
left: 20px
bottom: 95px
width: 280px
color: #0f1301
font-size: 16px
line-height: 20px
a.button
position: absolute
left: 20px
top: 228px
padding: 8px 30px
.more-info
background: url("../images/packages-more-info.png") no-repeat left center
padding-left: 10px
font-size: 12px
line-height: 12px
position: absolute
left: 20px
top: 278px
ul.packages-selector
background: url("../images/packages-selector.jpg") repeat-x
height: 92px
width: 762px
margin: 0
padding: 0
list-style: none
border-radius: 0 0 5px 5px
&.packages-2
li
width: 50%
&.packages-3
li
width: 33.3%
&.packages-4
li
width: 24.95%
&.slim
height: 70px !important
li
a
height: 65px !important
span
&.package-name
margin-top: 7px
&.price
margin-top: 5px
li
background: url("../images/packages-selector-line.png") no-repeat right bottom
float: left
a
display: block
padding: 15px 0 0 0
height: 77px
text-decoration: none
text-align: center
>span
display: block
margin: 0 auto
&.package-name
color: #6c5951
font-size: 16px
line-height: 16px
font-weight: bold
&.speed
color: #333
font-size: 11px
line-height: 11px
margin: 1px 0
&.price
color: #000
font-weight: bold
display: block
position: relative
margin-top: 3px
>span.value
font-size: 20px
line-height: 20px
>span
font-size: 10px
line-height: 13px
position: absolute
top: 0
width: 15px
text-align: left
>span.title
font-size: 10px
line-height: 10px
font-weight: normal
margin-left: 10px
color: #555
&.package-bar
background-image: url("../images/packages.png")
background-repeat: no-repeat
display: block
height: 17px
width: 102px
margin-top: 4px
visibility: hidden
&.boobles
background-image: url("../images/packages-tv.png")
&.maximum
span.package-bar
background-position: 0 0
visibility: visible
&.stream
span.package-bar
background-position: -102px 0
visibility: visible
&.start
span.package-bar
background-position: -204px 0
visibility: visible
&.light
span.package-bar
background-position: -306px 0
visibility: visible
&.last
background: none repeat scroll 0 0 transparent
&.active
a
background: url("../images/packages-selector-arrow.png") no-repeat center top
span.package-name
color: #f05a21
&.type-2
box-shadow: none
border-radius: 0px
border: 0 none
background-color: transparent
margin: 0
padding-bottom: 23px !important
ul.packages-selector
+background-gradient: (#ffffff, #f7f7f7)
border: 3px solid #f6f6f6
border-radius: 5px
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4)
height: 80px
list-style: none
margin: 0 -3px 0
padding: 0
width: 762px
li
background: url("../images/packages-selector-line2.png") no-repeat right top
a
padding: 5px 0 0 0
height: 75px
position: relative
span
&.package-name
font-weight: normal
font-size: 14px
line-height: 14px
&.speed
color: #777
&.arrow
height: 17px
width: 100%
position: absolute
bottom: -17px
left: 0
display: none
background: url("../images/packages-selector-arrow2.png") no-repeat center bottom
filter: none !important
&.active
a
background: url("../images/package-gr.jpg") repeat-x left top
span
&.package-name
color: #f05a21
font-weight: bold
&.speed
color: #333
&.arrow
display: block
&.last
background: none repeat scroll 0 0 transparent
.description
background: none repeat scroll 0 0 transparent
h1
color: #000
top: 35px
left: 0
.price
top: 187px
left: 322px
background: url("../images/packages-price-bg2.png") no-repeat
.text
position: absolute
top: 95px
left: 0
width: 290px
p
color: #0f1301
font-size: 16px
line-height: 20px
ul.promo
margin: 12px 0 0 0
padding: 0
display: inline-block
list-style: none
>li
float: left
margin-right: 11px
>a
text-decoration: none
display: block
position: relative
border-radius: 5px
border: 1px solid #e1dbdb
+background-gradient: (#fefefe, #f3f4e9)
height: 210px
width: 180px
&:hover
border-color: #BBBBBB
span.title
text-decoration: underline
>span
position: absolute
left: 12px
&.title
color: #e4561d
font-weight: bold
font-size: 17px
top: 12px
width: 160px
&.description
color: #333
font-size: 13px
line-height: 18px
bottom: 10px
width: 160px
span.rarr
color: #e4561d
img
margin: 40px 0 0 10px
&.last
margin-right: 0!important
&.type-1
>li
position: relative
+background-gradient: (#fefefe, #f3f4e9)
>ul
margin: 0
padding: 0 0 0 38px
width: 180px
position: absolute
top: 164px
li
font-size: 14px
line-height: 14px
color: #333
font-weight: bold
margin: 0 0 9px 0
>a
background: none repeat scroll 0 0 transparent
height: 288px
span.title
top: 6px
>span.description
left: 38px
bottom: 14px
width: auto !important
span.title
color: #ea7323
font-size: 16px
line-height: 16px
font-weight: bold
&.type-2
>li
position: relative
+background-gradient: (#fefefe, #f3f4e9)
>ul
margin: 0
padding: 0 0 0 38px
width: 180px
position: absolute
top: 230px
li
font-size: 14px
line-height: 18px
color: #333
margin: 0 0 7px 0
>a
background: none repeat scroll 0 0 transparent
height: 430px
span.title
top: 6px
font-size: 14px
line-height: 14px
>span.description
left: 38px
bottom: 14px
width: auto !important
span.title
color: #ea7323
font-size: 16px
line-height: 16px
font-weight: bold
&.type-3
>li
a
height: 250px
img
margin-top: 70px
&.rows-3
margin-top: 18px
li
margin-right: 18px
margin-bottom: 17px
>a
width: 240px
>span
&.title
width: 215px
&.description
width: 215px
img
position: absolute
left: 0
top: 0
margin: 0
&.type-0
margin-top: 0
li
margin-right: 20px
margin-bottom: 10px
height: 190px
>span
display: block
width: 240px
span.label
font-weight: bold
color: #777777
font-size: 14px
margin-bottom: 7px
span.link
margin-top: 6px
line-height: 17px
>a
height: 126px
width: 238px
border-radius: 3px
span
left: 12px
&.title
top: 7px
width: 120px
&.description
font-size: 12px
line-height: 16px
top: 70px
bottom: auto
width: 105px
color: #3c4a09
img
left: auto
right: 0px
top: 0px
position: absolute
margin: 0
height: 126px
&.type-4
>li
margin-right: 10px
background: url("../images/tv-internet-box-bg.jpg") repeat-x left top #F3F4E9
width: 245px
height: 383px
border-radius: 5px
border: 1px solid #E1DBDB
position: relative
&.last
margin-right: 0
&:hover
border-color: #bbb
>img
position: absolute
right: 0
top: 0
>span.title
color: #e4561d
font-weight: bold
font-size: 17px
top: 12px
left: 12px
width: 215px
display: block
position: absolute
.price
position: absolute
background: url("../images/price-bg-violet.png") no-repeat
height: 72px
width: 72px
display: block
top: 100px
left: 23px
text-align: center
>span.value
color: #fff
height: 22px
font-weight: bold
margin-top: 22px
display: block
line-height: 24px
font-size: 24px
position: relative
top: 0
margin-left: -12px
>span
position: absolute
font-size: 14px
line-height: 14px
.title
color: #fff
font-size: 11px
line-height: 11px
.packages
position: absolute
top: 225px
padding: 0 0 6px 12px
margin: 0 3px
border-bottom: 1px dotted #6d6d6b
width: 225px
img
margin-right: 10px
float: left
p
margin: 0 0 8px 48px
span
display: block
&.title
color: #333
font-size: 14px
line-height: 12px
font-weight: bold
&.description
margin-top: 2px
color: #777
font-size: 12px
line-height: 12px
&.internet-package
margin-top: 13px
p.bottom
position: absolute
top: 333px
left: 12px
a
font-size: 12px
line-height: 12px
display: block
float: left
margin-top: 10px
&.button
font-size: 16px
line-height: 16px
margin: 0 10px 0 0
ul.customer-account-items
list-style: none
margin: 0 0 30px 0
padding: 0
display: inline-block
li
float: left
width: 170px
height: 235px
padding: 0 0 0 84px
margin-right: 30px
position: relative
img
position: absolute
top: 0
left: 0
width: 84px
h2
font-size: 27px
line-height: 27px
color: #777
font-weight: normal
margin: 10px 0 15px
p
color: #777
font-size: 12px
line-height: 18px
ul.support-category
margin: 12px 0 0 0
padding: 0 0 0 1px
list-style: none
>li
float: left
margin-right: 13px
display: block
position: relative
border-radius: 5px
background-color: #f9faf7
height: 290px
width: 150px
box-shadow: 0 1px 1px #bbb
padding: 20px 15px 0
a
&.title
display: table-cell
height: 50px
width: 100px
padding: 0 50px 0 0
margin: 0
vertical-align: middle
text-decoration: none
font-size: 17px
line-height: 21px
font-weight: bold
color: #000000
background: url("../images/support-category-icons.png") no-repeat right 0
&:hover
text-decoration: underline
&.internet
background-position: right 0
&.dtv
background-position: right -50px
&.customer
background-position: right -100px
&.billing-info
background-position: right -150px
&.more-link
color: #777
text-decoration: none
span.link-text
color: #f05a21
text-decoration: underline
&:hover
span.link-text
color: #D13A00
ul
list-style: none
margin: 25px 0
padding: 0
li
padding: 0
margin: 0 0 7px
a
font-size: 13px
line-height: 18px
color: #777777
&:hover
color: #000000
&.last
margin-right: 0!important
&.themes
display: inline-block
padding: 0
>li
background-color: #fff
border: 1px solid #e3e3e3
box-shadow: none
padding: 12px
width: 251px
height: 204px
margin: 0 12px 12px 0
h2
font-size: 17px
line-height: 17px
color: #000
ul
margin: 0 0 23px 0
ul.eliminating-problems
padding: 0
margin: 0
list-style: none
>li
border-bottom: 1px dotted #848484
padding: 10px 0
>a
background: url("../images/problems-list-icons.png") no-repeat 0 0
font-weight: bold
font-size: 14px
line-height: 14px
text-decoration: none
height: 16px
padding: 2px 0 0 25px
display: block
>ul
display: none
padding: 0 0 0 40px
>li
a
font-size: 14px
line-height: 14px
&.active
>a
background-position: 0 -18px
>ul
display: block
&.last
border-bottom: 0 none
.helpful-answer
>form
float: right
margin: 0 20px 5px
width: 350px
fieldset
p
margin-bottom: 15px
input
label
margin-right: 15px
textarea
height: 95px
width: 348px
border-radius: 3px
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset
border: 1px solid #cbcbcb
resize: vertical
p.btn
a
>h3
margin-bottom: 20px
>span
color: #333
font-size: 14px
line-height: 18px
form.search-form
position: relative
margin: 0 0 10px 0
fieldset
display: block
background-color: #f0f2eb
height: 16px
padding: 11px 0 8px 10px
label
color: #333
input.search
color: #555
background-color: #fff
border: 0px solid transparent
border-radius: 5px
width: 400px
padding: 4px 24px 3px 7px
box-shadow: 0px 1px 1px #888 inset
position: absolute
top: 7px
right: 7px
button
filter: none !important
box-shadow: none
position: absolute
background: url("../images/search-icon.png") no-repeat
width: 17px
height: 16px
border: 0 none
padding: 0
margin: 0
right: 11px
top: 10px
opacity: 0.8
&:hover
opacity: 1
form.search-support
position: relative
fieldset
display: block
background-color: #f7f300
height: 16px
padding: 11px 0 8px 10px
label
color: #333333
input.search
color: #555555
background-color: #fff
border: 0px solid transparent
border-radius: 5px
width: 597px
padding: 4px 24px 3px 7px
box-shadow: 0px 1px 1px #888 inset
position: absolute
top: 7px
right: 7px
button
filter: none !important
position: absolute
background: url("../images/search-icon.png") no-repeat !important
box-shadow: none
width: 17px
height: 16px
border: 0 none
padding: 0
margin: 0
right: 11px
top: 10px
opacity: 0.8
&:hover
opacity: 1
form#carrier-form
background-color: #f9faf7
border-radius: 5px
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
margin: 0 0 45px 0
fieldset
padding: 5px 20px 25px
h2
font-size: 16px
line-height: 16px
color: #555
margin: 20px 0 10px 165px
p
margin: 0 0 10px 0
&.description
margin: 15px 0 10px 0
>label
margin: 0 5px 0 0
>span
margin: 0 0 0 165px
display: block
&.btn
button
margin: 0 0 0 165px
&.attach-resume
margin-bottom: 20px
a
background: url("../images/attach-resume-icon.png") no-repeat left center
padding: 0 0 0 20px
margin: 0 0 0 165px
font-size: 13px
line-height: 13px
text-decoration: none
&:hover
text-decoration: underline
label
display: block
float: left
margin: 6px 5px 0 0
width: 160px
font-size: 14px
line-height: 14px
color: #555
font-weight: bold
text-align: right
&.normal-font
font-weight: normal
span
font-size: 14px
line-height: 14px
color: #555
input, textarea
width: 241px
padding: 5px 6px
font-size: 14px
line-height: 14px
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) inset
border-radius: 3px
color: #777
border: 1px solid #eaeaea
input
textarea
resize: vertical
.radio
margin: 0 0 15px 0
>label
display: block
float: left
margin: 0 5px 0 0
width: 160px
font-size: 14px
line-height: 14px
color: #555
font-weight: bold
text-align: right
>ul
margin: 0 0 0 165px
padding: 0
list-style: none
li
margin: 0 0 5px 0
input
margin: 0 5px 0 0
label
color: #555
font-size: 14px
line-height: 14px
form#volia-mail-form
background-color: #f3faeb
border-radius: 5px 5px 5px 5px
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
margin-bottom: 20px
fieldset
padding: 25px 20px
h2
font-size: 16px
line-height: 16px
margin-bottom: 20px
text-align: center
p
margin-bottom: 20px
label
float: left
display: block
width: 160px
margin: 7px 5px 0 0
color: #333
font-size: 14px
line-height: 14px
text-align: right
&.wp-label
margin-top: 20px
input
border: 1px solid #EAEAEA
border-radius: 3px
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) inset
color: #777
font-size: 14px
line-height: 14px
padding: 5px 6px
width: 241px
&.btn
margin: 0 0 0 165px
a
font-size: 13px
line-height: 13px
text-decoration: none
margin-left: 15px
&:hover
text-decoration: underline
.features-volia-mail
border: 1px solid #cecece
border-radius: 5px
height: 345px
margin-bottom: 15px
.content
width: 485px
height: 255px
overflow: hidden
float: left
border-right: 1px dotted #cecece
padding: 45px 40px
>div
h2
font-size: 27px
line-height: 27px
color: #777
font-weight: normal
margin-bottom: 35px
img
float: left
width: 200px
margin-right: 20px
p
color: #777
font-size: 14px
line-height: 18px
margin: 0
.panel
float: left
ul
list-style: none
margin: 20px 0 0 0
padding: 0
li
width: 179px
position: relative
height: 23px
margin-bottom: 5px
span
font-size: 12px
line-height: 12px
color: #777
display: block
height: 18px
padding: 5px 0 0 15px
width: 179px
&:hover
cursor: pointer
&.active
span
position: absolute
left: -12px
padding-left: 27px
width: 181px
font-weight: bold
color: #000
background: url('../images/features-volia-mail-active-item.png') no-repeat
ul.attachments
margin: 0
padding: 0
list-style: none
display: inline-block
li
margin: 0 0 15px
padding: 0
>a
display: inline-block
width: 100%
text-decoration: none
img
border: 0 none
float: left
span
&.title
display: block
margin-left: 32px
text-decoration: none
color: #333333
font-size: 14px
font-weight: bold
&.file
display: block
margin-left: 32px
color: #777777
line-height: 14px
span.name
color: #F05A21
&:hover
span.file
span.name
color: #D13A00
text-decoration: underline
&.row-2
li
float: left
margin-right: 20px
&.last
margin-right: 0
>a
width: 185px
span
&.preview
img
width: 175px
&.row-3
li
float: left
margin-right: 20px
&.last
margin-right: 0
>a
width: 175px
span
&.preview
img
width: 175px
&.preview
li
>a
span
&.preview
display: block
height: 125px
margin-bottom: 8px
img
border: 1px solid #dddddd
margin: -1px
&.title
margin-left: 0
font-size: 12px
margin-bottom: 3px
&.file
font-size: 11px
margin-bottom: 3px
span.name
display: block
font-size: 12px
&.type-0
li
>a
span.file
margin-bottom: 0
padding-top: 2px
>span
display: block
.name
display: inline
.size
font-size: 12px
.date
margin-top: 2px
ul.payment-system-list
margin: 20px 0
padding: 0
list-style: none
li
margin: 0
padding: 30px 0
border-bottom: 1px dotted #848484
position: relative
span.title, span.description, span.additional
margin-right: 105px
margin-left: 130px
font-size: 14px
line-height: 20px
span.description, span.additional
margin-top: 10px
span.title
border-bottom: 1px dashed #f05a21
cursor: pointer
font-weight: bold
color: #f05a21
&:hover
color: #D13A00
>img.logo
position: absolute
left: 0
top: 50%
margin-top: -33px
>a.button
position: absolute
right: 0
top: 50%
margin-top: -16px
span.description, span.additional, a.button
display: none
&.active
span.description, span.additional, a.button
display: block
span.title
color: #333333
border-color: #333333
&:hover
color: #000000
ul.partner-list
list-style: none
margin: 0
padding: 0
li
display: block
padding: 0
margin: 0 0 25px 0
>img
float: left
>p
margin: 0 0 5px 165px
form.payment-system
background-color: #f9faf7
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
border-radius: 5px
margin: 10px 0 15px
padding: 35px 0 25px
fieldset
p
label
color: #555
font-size: 14px
line-height: 14px
display: block
float: left
margin: 6px 5px 0 0
width: 265px
text-align: right
input
border: 1px solid #eaeaea
border-radius: 3px
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) inset
color: #777
font-size: 14px
line-height: 14px
padding: 5px 6px
width: 258px
&.btn
margin-left: 270px
&.content
margin-bottom: 35px
img
width: 115px
float: left
margin: 0 5px 0 150px
span
&.description
display: block
margin-right: 155px
margin-left: 270px
&.additional
margin-left: 270px
.form-selector
margin-bottom: 15px
span.label
display: block
float: left
margin: 6px 5px 0 0
color: #555
text-align: right
width: 265px
.values
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) inset
border: 1px solid #eaeaea
padding: 4px 20px 4px 6px
width: 242px
>ul
width: 240px
table
width: 100%
.middle
vertical-align: middle
font-size: 14px
ul.list-none
list-style: none
margin: 10px 0 20px
padding: 0
li
margin-bottom: 4px
font-size: 11px
line-height: 12px
&.search-results
margin-top: -20px
.header
h1
float: left
margin-bottom: 15px
span.result
float: left
display: block
margin: 5px 0 0 20px
color: #777
font-size: 14px
line-height: 14px
hr
clear: both
margin: 0
border-color: #848484
.aside
.widgets
.widget
&.search
h3
margin-bottom: 15px
ul
list-style: none
margin: 0
padding: 0
li
padding: 5px 0 4px
a
color: #555
display: block
text-decoration: none
padding-left: 22px
margin-left: 6px
height: 16px
background: url('../images/widget-search-icons.png') no-repeat
&:hover
text-decoration: underline
color: #F05A21
&.last
margin-bottom: 0
&.pages-docs
a
background-position: 0 0
&.press
a
background-position: -16px -16px
&.image
a
background-position: -32px -32px
&.video
a
background-position: -48px -48px
&.active
a
font-weight: bold
color: #F05A21
.wrap
.pagination
height: 35px
margin-top: 15px
&.wp-pagin
.wp-pagenavi
>a, span
padding: 0 6px
.wp-pagenavi
padding-top: 4px
float: left
font-size: 14px
.pages
display: none
>a, span
padding: 0 6px 0 2px
border-right: 1px solid #eeeeee
>a
text-decoration: none
>.current
color: black
font-weight: bold
>.last
border: 0 none
>.first
pagging-left: 0
.show-page
float: right
span
&.title
display: block
font-size: 12px
line-height: 12px
color: #777
float: left
margin-top: 8px
.spinbox
float: left
margin: 0 5px
ul
list-style: none
margin: 0
padding: 0
li
margin-bottom: 17px
h3
font-weight: normal
font-size: 14px
line-height: 14px
margin-bottom: 5px
a
text-decoration: none
&:hover
text-decoration: underline
p
font-size: 12px
line-height: 18px
color: #333
margin-bottom: 5px
&.bottom
margin: 0
span
color: #777
font-size: 12px
line-height: 12px
border-right: 1px solid #ddd
padding: 0 9px
&.ranking
padding-left: 0
&.category
&.type
border-right: 0 none
&.border-none
border-right: 0 none
&.tv-guide
h1
font-size: 20px
float: left
.search-block
float: left
margin-left: 10px
form
fieldset
input.search
width: 290px
#select-category
>ul
li
color: #f05a21
&.active
color: black
#select-day
margin-top: 10px
&.block-selector
ul
li
padding-top: 8px
height: 32px
#select-time
&.block-selector
+background-gradient: (#2e2e2e, #232323)
border-right-color: #383838
border-bottom: 3px solid #cfcfcc
span
+background-gradient: (#2e2e2e, #232323)
color: #ffffff
border-color: #292929
ul
li
+background-gradient: (#2e2e2e, #232323)
color: #13c6f3
border-left-color: #646464
border-right-color: #232323
&:hover
+background-gradient: (#232323, #232323)
color: #e4561d
&.active
+background-gradient: (#efefef, #e3e3e3)
color: #e4561d
border-left-color: #eaeaea
border-right-color: #e2e2e2
#timetable
position: relative
>ul.labels
list-style: none
float: left
margin: 0
padding: 0
width: 45px
border-right: 1px solid #777777
li
font-size: 13px
color: #000000
text-align: center
margin: 0
padding: 0
display: block
float: none
border-top: 1px solid #ffffff
border-bottom: 1px solid #a4a4a4
padding: 5px 0 0
height: 85px
background: #e8edf1
&.now
font-size: 14px
height: 80px
padding-top: 30px
+background-gradient: (#e8edf1, #d8e1e8)
>span
font-weight: bold
&.half
font-size: 11px
color: #777777
ul.legend
margin: 10px 0 0 0
padding: 0
list-style: none
li
border-left: 4px solid transparent
float: left
padding: 0 0 5px 4px
margin: 0 10px 10px 0
font-size: 14px
color: #333333
.show
border-left-color: #df4a7f !important
.movie
border-left-color: #44aeb7 !important
.series
border-left-color: #96b447 !important
.doc
border-left-color: #4967b4 !important
>.now-line
position: absolute
width: 941px
height: 15px
top: 150px
left: 14px
background: url('../images/now-line.png') 0 0 no-repeat transparent
>.scroll-control
position: absolute
background-image: url('../images/tv-guide-controls.png')
background-repeat: no-repeat
cursor: pointer
&.reverse
width: 17px
height: 83px
top: 16px
left: 46px
border: 0 none
background-position: 0 0
&.forward
width: 17px
height: 83px
top: 16px
right: 1px
border: 0 none
background-position: -17px -83px
&.bottom
width: 911px
height: 10px
top: 99px
left: 46px
border: 1px solid #cdcdcd
background-position: 415px -165px
background-color: #eaeaea
&:hover
border-color: #bbbbbb
>.timeline
margin-left: 45px
height: 663px
border-bottom: 1px solid #777777
border-right: 1px solid #c5c5c5
overflow: hidden
width: 913px
position: relative
>ul.chanels
postion: absolute
left: 0
margin: 0
padding: 0
list-style: none
white-space: nowrap
width: 200%
>li
white-space: normal
float: left
margin: 0
width: 130px
height: 110px
border-right: 1px solid #c5c5c5
border-bottom: 1px solid #777777
border-top: 1px solid #ffffff
position: relative
text-align: center
span.logo
display: block
margin-top: 27px
margin-bottom: 4px
height: 45px
img
height: 45px
span.title
color: #333333
display: block
font-size: 12px
font-weight: bold
margin: 0 20px
>ul
margin: 0
padding: 0
position: absolute
top: 111px
left: 0
>li
text-align: left
display: block
border-left: 4px solid white
border-top: 1px solid #d6d6d6
border-bottom: 1px solid #ffffff
border-right: 1px solid #d6d6d6
width: 118px
padding-left: 5px
padding-right: 3px
span.time
font-size: 12px
color: #333333
font-weight: bold
display: inline
span.category
font-size: 11px
font-weight: normal
color: #777777
display: inline
span.title
margin: 0
display: block
&.d-5
height: 15px
&.d-10
height: 30px
&.d-15
height: 45px
&.d-20
height: 60px
&.d-25
height: 75px
&.d-30
height: 90px
&.d-35
height: 105px
&.d-40
height: 120px
&.d-45
height: 135px
&.d-50
height: 150px
&.d-55
height: 165px
&.d-60
height: 180px
&.d-65
height: 195px
&.d-70
height: 210px
&.d-75
height: 225px
&.d-80
height: 240px
&.d-85
height: 255px
&.d-90
height: 270px
&.d-95
height: 285px
&.d-100
height: 300px
&.d-105
height: 315px
&.d-110
height: 330px
&.d-115
height: 345px
&.d-120
height: 360px
&.d-125
height: 375px
&.d-130
height: 390px
&.d-135
height: 405px
&.d-140
height: 420px
&.d-145
height: 435px
&.d-150
height: 450px
&.d-155
height: 465px
&.d-160
height: 480px
&.d-165
height: 495px
&.d-170
height: 510px
&.d-175
height: 525px
&.d-180
height: 530px
#aside, .aside
width: 177px
>form
position: relative
input.search
color: #999
background-color: #fff
border: 1px solid #bbb
border-radius: 5px
width: 144px
padding: 3px 24px 3px 7px
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.13)
button
position: absolute
background: url("../images/search-icon.png") no-repeat
width: 17px
height: 16px
border: 0 none
padding: 0
margin: 0
right: 4px
top: 3px
opacity: 0.8
&:hover
opacity: 1
.volia-mail
list-style: none
margin: 50px 0 0 20px
padding: 0
li
margin-bottom: 5px
a
font-size: 14px
line-height: 14px
a.print
margin: 40px 0 0 0
display: block
.quick-links, .widget_volia_navmenu
margin-top: 15px
h3
margin: 0 0 5px 0
padding-left: 10px
color: #333
font-weight: bold
line-height: 14px
font-size: 14px
ul
margin: 0
padding: 0
list-style: none
li
+background-gradient: (#eff2eb, #c9ccc6)
border-radius: 5px
border-width: 1px
border-style: solid
border-color: #dfdfdf #c4c4c4 #a8a8a8 #c4c4c4
margin: 0
a
text-decoration: none
color: #333
padding: 7px 7px 6px 30px
display: block
font-size: 12px
line-height: 12px
text-shadow: 0px 1px 0px #fff
white-space: nowrap
span
display: block
background-position: right center
background-repeat: no-repeat
overflow: hidden
white-space: nowrap
&:hover
font-weight: bold
text-shadow: none
span
background-image: url("../images/links-arrow-right.png")
&:hover
+background-gradient: (#dfec74, #c1cc64)
border-color: #e8e8e8 #c4c4c4 #787878 #c4c4c4
&.customer-account, #menu-item-862
a
background: url("../images/customer-account.png") no-repeat 7px center
&.volia-mail, #menu-item-860
a
background: url("../images/volia-mail.png") no-repeat 7px center
&.payment-options, #menu-item-861, #menu-item-1115
a
background: url("../images/payment-options.png") no-repeat 7px center
&.order-service, #menu-item-863
a
background: url("../images/order-service.png") no-repeat 7px center
&.tv-programs, #menu-item-864
a
background: url("../images/tv-programs.png") no-repeat 7px center
&.hdtv, #menu-item-865
a
background: url("../images/hdtv.png") no-repeat 7px center
&.nvod, #menu-item-866
a
background: url("../images/nvod.png") no-repeat 7px center
.widgets
margin-top: 10px
.widget
padding: 18px 10px
border-radius: 5px
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2)
background-color: #eff2eb
h3
margin: 0
text-shadow: 0px 1px 0px #fff
color: #333
font-weight: bold
font-size: 14px
line-height: 14px
&.personal-account
box-shadow: none
border-radius: 0
background: url("../images/widget-line-bottom.png") no-repeat scroll center bottom #EFF2EB
form
fieldset
p
margin: 0 0 5px 0 !important
input
height: 21px
width: 149px
border: 1px solid #E9E9E9
border-radius: 3px
box-shadow: 0 1px 1px #888888 inset
color: #777
font-size: 12px
padding: 2px 3px 1px
label
display: inline-block
margin-bottom: 4px
width: 157px
img
float: left
margin-right: 3px
span
color: #333
display: block
font-size: 12px
line-height: 12px
&.btn
margin-top: 5px !important
display: inline-block
button
float: left
font-size: 12px !important
line-height: 12px !important
padding: 5px 20px 7px !important
&.last
border-radius: 0 0 5px 5px
background: #EFF2EB
&.login-my-volia
border-radius: 5px 5px 0 0
padding-bottom: 10px
form
fieldset
p.btn
button
margin: 0 5px 0 0
padding: 4px 9px 6px !important
a
padding: 0 !important
text-align: left
color: #2f7ec9
font-size: 11px
line-height: 11px
font-weight: bold
padding: 0
float: left
text-decoration: none
&:hover
text-decoration: underline
&.payment-option
padding-bottom: 5px
form
fieldset
p
&.btn
margin: 0 0 10px !important
.form-selector
span.label
display: inline-block
margin-bottom: 4px
img
float: left
margin-right: 5px
span
float: left
color: #333
display: block
font-size: 12px
line-height: 12px
.values
background: -moz-linear-gradient(center top , #E7EAE2 0%, #F9F9F9 100%) repeat scroll 0 0 transparent
border-color: #DFDFDF #C4C4C4 #A8A8A8
border-radius: 5px
border-style: solid
border-width: 1px
&:hover
border-color: #bbb
ul
width: 129px
height: 150px
li
&.last
margin-bottom: 0
.form-selector
.values
width: 129px
margin-top: 5px
ul
width: 129px
&.select-location
span
&.label
font-size: 14px
font-weight: bold
color: #000000
&.subpages
padding-bottom: 5px
ul
margin: 0
padding: 0
list-style: none
li
margin: 0 -10px
border-bottom: 1px solid #d7d9d3
&.last
border-bottom: 0 none
a
display: block
text-decoration: none
color: #333333
font-size: 12px
padding: 5px 10px 6px
&:hover
color: #000000
text-decoration: underline
&.active
a
color: #9ab82e
&.type-0
h3
margin-bottom: 5px
ul
li
a
font-size: 14px
line-height: 20px
.collapsible
background-color: #fafbf8
border: 1px solid #e6dede
border-radius: 5px
box-shadow: none
padding: 0
h3
background: url("../images/billing-widget-bg.jpg") no-repeat
margin: 0
padding: 10px 2px 0 10px
border-radius: 4px
height: 22px
.toggle
float: right
background: url("../images/toggle-arrows.png") no-repeat 0 0
width: 11px
height: 10px
margin: 2px 0 0 0
display: block
&:hover
cursor: pointer
.content
display: none
padding: 10px 10px 5px
p
margin: 0 0 5px 0
font-size: 14px
line-height: 18px
span, a
font-size: 12px
line-height: 18px
.label
color: #777
&.bottom
margin-top: 10px
a
color: #777
&:hover
color: #333
&.exit
float: right
display: block
background: url("../images/collapsible-exit-icon.png") no-repeat right center
padding-right: 14px
&.price
font-size: 22px
line-height: 22px
color: #333
font-weight: bold
&.active
h3
border-radius: 4px 4px 0 0
.toggle
background-position: 0 -10px
.content
display: block
>.last
margin-bottom: 45px
.poll, .widget_polls-widget
h3
margin-bottom: 15px
span
color: #333
font-size: 12px
display: block
margin-bottom: 3px
form
fieldset
ul
margin: 0
padding: 0
list-style: none
li
border-width: 1px
border-style: solid
border-color: #dfdfdf #c4c4c4 #a8a8a8 #c4c4c4
background-color: #fafafa
border-radius: 5px
padding: 6px 7px 5px
margin: 0
input
margin-right: 3px
label
color: #333
font-size: 12px
line-height: 12px
&.result
h3
font-size: 17px
line-height: 17px
margin-bottom: 5px
>a
color: #333
font-size: 12px
line-height: 12px
display: block
margin: 0 0 5px 0
&:hover
color: #000
>span
font-weight: bold
ul
list-style: none
margin: 0
padding: 0
li
position: relative
border-width: 1px
border-style: solid
border-color: #dfdfdf #c4c4c4 #a8a8a8 #c4c4c4
background-color: #fafafa
border-radius: 5px
padding: 6px 7px 5px
margin: 0
overflow: hidden
span
margin: 0
position: relative
&.ok
background: url("../images/poll-results-ok-icon.png") no-repeat
display: block
width: 16px
height: 15px
position: absolute
top: 5px
right: 6px
div
position: absolute
left: 0
top: 0
background-color: #c2ea9b
height: 26px
width: 0%
&.active
span
font-weight: bold
.result
h3
font-size: 17px
line-height: 17px
margin-bottom: 5px
>a
color: #333
font-size: 12px
line-height: 12px
display: block
margin: 0 0 5px 0
&:hover
color: #000
>span
font-weight: bold
ul
list-style: none
margin: 0
padding: 0
li
position: relative
border-width: 1px
border-style: solid
border-color: #dfdfdf #c4c4c4 #a8a8a8 #c4c4c4
background-color: #fafafa
border-radius: 5px
padding: 6px 7px 5px
margin: 0
overflow: hidden
span
margin: 0
position: relative
&.ok
background: url("../images/poll-results-ok-icon.png") no-repeat
display: block
width: 16px
height: 15px
position: absolute
top: 5px
right: 6px
div
position: absolute
left: 0
top: 0
background-color: #c2ea9b
height: 26px
width: 0%
&.active
span
font-weight: bold
.call-back
+background-gradient: (#ffffff, #f3f4e9)
border-radius: 5px
border: 1px solid #c7c1c1
box-shadow: none
padding: 10px 10px
text-align: center
h3
color: #333
font-size: 17px
line-height: 21px
font-weight: bold
img
margin: 10px 0 20px
p.number-block
margin: 0 !important
span
display: block
float: left
margin: 3px 3px 0 0
input
box-shadow: 0 1px 1px #888888 inset
border: 1px solid #e9e9e9
color: #777
font-size: 14px
border-radius: 2px
padding: 2px 1px 1px
text-align: center
&.code
width: 30px
&.number
width: 75px
p.btn
margin-top: 25px
a
padding: 5px 25px !important
.basket
padding: 10px 10px 15px !important
h3
font-weight: normal
background: url("../images/widget-line-bottom.png") no-repeat scroll center bottom transparent
margin: 0 -10px !important
padding: 0 10px 10px
ul
background: url("../images/widget-line-bottom.png") no-repeat scroll center bottom transparent
margin: 0 -10px
padding: 0 13px 10px 10px
list-style: none
li
padding-top: 11px
position: relative
.delete-button
cursor: pointer
display: block
background: url("../images/basket-delete-button.png") no-repeat
height: 8px
width: 7px
position: absolute
top: 13px
right: -9px
span
font-size: 11px
color: #333
display: block
&.price
position: absolute
right: 0
text-align: right
width: 40px
&.package-name
font-weight: bold
padding-right: 40px
&.description
color: #777
margin-top: 5px
div.per-month
margin: 10px -5px
padding: 7px 5px
background-color: #dbebb3
span
color: #333
font-size: 13px
line-height: 13px
font-weight: bold
display: block
&.price
float: right
width: 50px
text-align: right
&.title
margin-right: 50px
div.connection
margin: 0 0 10px
span
display: block
font-size: 13px
line-height: 13px
color: #333
&.price
float: right
width: 40px
text-align: right
&.title
margin-right: 40px
span.price-info
color: #777
font-size: 11px
line-height: 11px
p.btn
text-align: right
margin: 20px 0 10px !important
a
padding: 6px 27px !important
.news-archive
ul
list-style: none
margin: 10px 0 0 0
padding: 0
li
a
color: #333
font-size: 14px
line-height: 20px
text-decoration: none
&:hover
color: #000
text-decoration: underline
>ul
padding: 0 0 0 20px
margin: 0
.popular-answers
margin-top: 40px
h3
color: #74961f
ul
list-style: none
margin: 15px 0 0 0
padding: 0
li
margin-bottom: 5px
display: inline-block
a
color: #444
font-size: 14px
line-height: 18px
text-decoration: none
span
&.num
background: url("../images/list-style-num-circle.png") no-repeat
display: block
float: left
padding-top: 5px
text-align: center
height: 16px
width: 21px
font-size: 12px
line-height: 12px
color: #9ab82e
font-weight: bold
margin-right: 3px
margin-top: -1px
&.text
border-bottom: 1px solid transparent
&:hover
span.text
border-bottom: 1px solid #444
span.info
color: #777
font-size: 12px
line-height: 18px
margin: 10px 0 15px
display: block
.menu
margin-bottom: 20px
h3
font-size: 18px
line-height: 18px
color: #9ab82e
font-weight: bold
border-bottom: 1px solid #8e8e8e
padding: 0 0 5px 0
margin: 0
>ul
list-style: none
margin: 0
padding: 0
>li
padding: 8px 0
border-bottom: 1px solid #e6e6e6
>a
color: #333
font-size: 14px
line-height: 16px
text-decoration: none
&:hover
color: #000
&.active
>a
color: #9ab82e
ul
list-style: none
margin: 5px 0 0 0
padding: 0 0 0 20px
li
line-height: 16px
margin-bottom: 6px
a
color: #777
text-decoration: none
font-size: 14px
&:hover
color: #222
&.active
a
color: #9ab82e
&.index
#content
#aside
.widgets
margin-top: 10px
padding: 18px 0
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2)
background-color: #eff2eb
border-radius: 5px
.widget
padding: 0 10px
box-shadow: none
.tutorial
background: url("../images/widget-line-bottom.png") no-repeat center bottom
padding-bottom: 15px
a.selector
margin-top: 7px
text-decoration: none
border-radius: 5px
display: block
+background-gradient: (#e7eae2, #f9f9f9)
border-width: 1px
border-style: solid
border-color: #dfdfdf #c4c4c4 #a8a8a8 #c4c4c4
padding: 7px 10px 5px
span
color: #333
font-size: 12px
line-height: 12px
text-shadow: 0px 1px 0px #fff
display: block
background: url("../images/tutorial-arrow-bottom.png") no-repeat right center
&:hover
border-color: #BBBBBB
span
color: #000
.poll, .widget_polls-widget
margin-top: 15px
.last
margin-bottom: 0
#article
margin: 0
width: 762px
.advert
margin: 0 0 0 -3px
height: 299px
width: 762px
border-radius: 5px
border: 3px solid #f6f6f6
background-color: #f6f6f6
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4)
position: relative
overflow: hidden
>a
display: none
&.active
display: inline
>ul.advert-swither
white-space: nowrap
list-style: none
margin: 0
padding: 0
position: absolute
right: 9px
bottom: 8px
>li
border-radius: 100px
border-width: 3px
border-color: #ffffff
border-style: solid
background: #ffffff
width: 13px
height: 13px
float: left
margin-left: 6px
&.active
background: #ff9933
ul.promo
margin-top: 20px
li
margin-right: 20px
line-height: 20px
>a
border-radius: 3px 3px 3px 3px;
height: 126px;
width: 238px;
span
left: 12px
&.title
top: 7px
width: 120px
&.description
bottom: auto
color: #3C4A09
font-size: 12px
line-height: 16px
top: 70px
width: 105px
img
height: 126px
left: auto
margin: 0
position: absolute
right: 0
top: 0
.news
clear: both
padding: 20px 0 15px
>h2
display: inline
margin: 0
>span
padding-left: 10px
a
color: #f05a21
text-decoration: none
&:hover
text-decoration: underline
>ul
font-size: 12px
padding: 10px 0
height: 75px
margin: 0
list-style: none
>li
float: left
border-right: 1px solid #e1dbdb
padding: 0 10px
width: 239px
height: 75px
&.first
padding-left: 0
&.last
padding-right: 0
border: 0 none
a
color: #f05a21
text-decoration: none
font-size: 14px
&:hover
text-decoration: underline
span.date
padding-top: 7px
display: block
#footer
border-top: 1px solid #eaeaea
padding-bottom: 20px
.social
height: 13px
padding: 11px 0
.likebox
float: left
height: 25px
margin-top: -5px
>div
float: left
.network
float: right
width: 240px
text-align: right
a
float: right
margin-left: 3px
margin-top: -2px
background-image: url('../images/social-icons.png')
background-repeat: no-repeat
background-position: 0 0
width: 16px
height: 16px
span
display: none
&.vk
background-position: 0 0
&.fb
background-position: -16px 0
&.tw
background-position: -32px 0
&.yt
background-position: -48px 0
ul.navigation
clear: both
padding: 0
margin: 0
list-style: none
+background-gradient: (#ffffff, #f5f5f5)
padding: 20px 0
height: 80px
border-width: 1px 0
border-style: solid
border-color: #eaeaea
font-size: 12px
>li
width: 95px
float: left
padding: 0 23px
margin: 0
&.first
padding-left: 20px
&.last
width: 70px
text-align: right
padding-right: 0
>a
font-weight: bold
text-decoration: none
color: #555
&:hover
text-decoration: underline
>ul
padding: 10px 0 0
margin: 0
list-style: none
font-size: 12px
>li
display: block
margin: 0 0 5px 0
>a
text-decoration: none
color: #aaa
&:hover
color: #999
text-decoration: underline
.disclaimer
clear: both
p
font-size: 10px
line-height: 14px
color: #999
text-indent: 0
.support, .additional-footer
text-align: right
float: right
.copyright
a
color: #555
text-decoration: none
&:hover
color: #333
text-decoration: underline
#feedback
position: absolute
right: 0
bottom: 0
span
display: block
img
float: right
&:hover
cursor: pointer
#popup-container
position: absolute
width: 960px
top: 0
left: 50%
margin-left: -480px
&.modal
background: url("../images/modal-bg.png") repeat
height: 100%
left: 0
margin: 0
position: absolute
top: 0
width: 100%
z-index: 9999
>div
display: none
button
padding: 7px 20px
color: #000
text-shadow: 0 1px 1px #fff
font-weight: bold
font-size: 16px
line-height: 16px
text-decoration: none
border-radius: 3px
border-width: 1px
border-style: solid
border-color: #b1d44f #9fc33f #8caf2c
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2)
+background-gradient: (#c0dd66, #a7ce40)
&:hover
+background-gradient: (#bbd662, #9dc13d)
&.light-grey
+background-gradient: (#cfd4d6, #bac1c4)
border-color: #b4bbbe #9ba2a4 #757a7c
&:hover
+background-gradient: (#cacfd1, #aab0b3)
form
&#login-form
position: absolute
display: none
z-index: 9999
right: 0
top: 26px
width: 215px
height: 248px
border-radius: 5px
border: 1px solid #ababab
background-color: #f9faf7
&.active
display: block
fieldset
padding: 10px 20px 0
h3
margin: 0 0 7px 0
color: #333
p
margin: 0 0 3px
a
font-size: 14px
line-height: 14px
text-decoration: none
&:hover
text-decoration: underline
label
color: #333
font-size: 11px
line-height: 11px
&.error
color: #e11919
input[type="text"], input[type="password"]
color: #777
font-size: 14px
line-height: 14px
box-shadow: 0 1px 1px #888888 inset
border: 1px solid #e9e9e9
border-radius: 3px
padding: 1px 9px 0
height: 24px
width: 153px
&.error
border: 3px solid #ff7474
margin: -3px
button
padding: 7px 20px
&.checkbox
margin: 10px 0 7px
&.btn
margin-bottom: 8px
&.close
margin: 0
position: absolute
bottom: 0
left: 0
border-radius: 0 0 5px 5px
padding: 9px 20px
background-color: #e7eaeb
width: 175px
a
background: url("../images/login-close-icon.png") no-repeat right center
height: 12px
padding-right: 15px
text-decoration: none
color: #333
&:hover
text-decoration: underline
&#feedback-form
position: fixed
left: 50%
top: 50%
margin-top: -200px
margin-left: -212px
display: block
border-radius: 10px
padding: 25px 14px
width: 395px
border: 1px solid #c7c1c1
+background-gradient: (#fefeff, #e3eaed)
h3
font-size: 16px
line-height: 16px
color: #000
font-weight: normal
.header
height: 44px
margin-bottom: 14px
a.logo
margin: 0 13px 0 7px
display: block
float: left
h2
margin: 0
color: #333
float: left
margin-top: 12px
>p
margin: 18px 0 0 0
text-align: right
button
margin-left: 10px
.impression
display: inline-block
width: 377px
padding: 0 9px
h3
float: left
margin: 5px 0 0 0
ul
float: right
margin: 0
padding: 0
list-style: none
li
float: left
margin-left: 4px
a
border: 2px solid transparent
padding: 3px
display: block
span.icon
display: block
height: 16px
width: 16px
background: url("../images/impression-icons.png") repeat
&:hover
background-color: #eee
border-color: #e5e5e5
&.active
a
border-color: #999
&:hover
background-color: transparent
&.condition-1
a
span.icon
background-position: 0 0
&.condition-2
a
span.icon
background-position: -16px 0
&.condition-3
a
span.icon
background-position: -32px 0
&.condition-4
a
span.icon
background-position: -48px 0
&.condition-5
a
span.icon
background-position: -64px 0
fieldset
padding: 10px 9px
margin-top: 10px
clear: both
background: url("../images/feedback-bg.jpg") repeat
border-radius: 3px
border-bottom: 1px solid #f9fbfb
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5) inset
>h3
margin: 5px 0 15px 0
>ul
list-style: none
margin: 0
padding: 0
height: 32px
&.top
margin-bottom: 7px
>li
float: left
margin-right: 16px
a.button
width: 108px
display: block
height: 25px
padding: 3px 0 3px 5px
color: #fff
font-weight: bold
font-size: 12px
line-height: 12px
text-decoration: none
border-radius: 3px
border-width: 1px
border-style: solid
border-color: #868b8d #757b7e #5b6265
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2)
+background-gradient: (#a7abac, #878b8d)
&:hover
+background-gradient: (#a1a5a6, #7b7e80)
img
float: left
span.title
margin: 6px 0 0 6px
display: block
float: left
&.last
margin-right: 0
&.active
a.button
+background-gradient: (#ffffff, #ffffff)
border-radius: 0px
border-top: 0 none
border-right-color: #cdd0cf
border-left-color: #cdd0cf
border-bottom: 0 none
box-shadow: none
padding-top: 4px
padding-bottom: 10px
span.title
color: #000
.container
display: block
&.bottom
margin-top: 7px
>li
&.active
a.button
padding-top: 11px
padding-bottom: 4px
margin-top: -7px
.container
display: none
background-color: #fff
padding: 5px 10px
border-left: 1px solid #cdd0cf
border-right: 1px solid #cdd0cf
width: 355px
margin: 0
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2)
h4
margin: 0 0 5px 0
font-size: 14px
line-height: 14px
ul
list-style: none
margin: 0 0 8px
padding: 0
li
margin-bottom: 3px
a
font-size: 12px
line-height: 12px
.item-1, .item-2
display: none
.item-2
a
display: block
height: 13px
padding-left: 15px
font-size: 12px
line-height: 13px
color: #ed1c24
float: right
background: url("../images/discard-icon.png") no-repeat left center
&:hover
color: #cb181f
textarea
resize: vertical
margin: 0 0 15px 0
width: 347px
height: 88px
border-width: 1px
border-style: solid
border-color: #404040 #d4d0c7 #d4d0c7 #404040
padding: 3px
#location-block
display: block
position: absolute
top: 50px
right: 98px
z-index: 9998
border: 1px solid #ababab
background-color: #f9faf7
height: 468px
width: 575px
border-radius: 5px 0 5px 5px
padding: 25px 15px
>ul
list-style: none
margin: 0
padding: 0
height: 110px
>li
padding: 0 10px 9px
width: 122px
float: left
border-right: 1px dotted #d4d5d2
a
font-size: 14px
line-height: 14px
&:hover
color: #333
&.active
a
color: #333
font-weight: bold
text-decoration: none
&.border-none
border-right: 1px dotted transparent
.map
height: 337px
width: 498px
background: url("../images/location-map.png") no-repeat
display: block
position: relative
margin: 25px auto 0
ul
margin: 0
padding: 0
list-style: none
li
position: absolute
height: 1px
width: 1px
span
&.marker
background: url("../images/location-marker.png") no-repeat
display: block
height: 11px
width: 11px
cursor: pointer
&.title
display: none
font-weight: bold
color: #333
font-size: 14px
line-height: 14px
width: 130px
position: absolute
top: -20px
margin-left: -60px
text-align: center
&.hover
.title
display: block
.marker
background-position: -11px -10px
&.active
.marker
background-position: -22px -21px
height: 15px
width: 15px
.title
display: block
font-size: 17px
line-height: 17px
&.kiev
top: 24%
left: 46%
&.dnepropetrovsk
left: 70.5%
top: 47.7%
&.krivoy-rog
top: 53.3%
left: 63.2%
&.lviv
left: 10.8%
top: 28.7%
&.rovno
left: 23%
top: 20%
&.chernivtsi
top: 48.8%
left: 20.3%
&.khmelnitsky
left: 26.6%
top: 35.7%
&.vinnitsa
top: 39%
left: 35%
&.cherkasy
top: 36.6%
left: 54%
&.kirovograd
top: 47.5%
left: 55.5%
&.kherson
top: 70.5%
left: 57.8%
&.simferopol
top: 91.4%
left: 67.1%
&.sevastopol
top: 96.3%
left: 64.6%
&.zaporozhye
top: 55%
left: 72%
&.sumi
top: 17.4%
left: 68.4%
&.poltava
top: 34%
left: 68%
&.kharkov
top: 27.5%
left: 76.8%
&.alchevsk
top: 45%
left: 91.5%
&.donetsk
top: 51.4%
left: 87%
&.kramatorsk
top: 43%
left: 84.7%
/**
* Layout by Se7enSky web studio
* @web www.se7ensky.com
* @email info@se7ensky.com
*/
Верстка страниц
- index.haml
- index-2.haml
- styles.sass