Jump to content
  • 0

Резиновость шаблона

explo1d

Asked by explo1d,

 Share

Question

explo1d Explorer

explo1d

Posted
Posted (edited)

Здравствуйте. Нужна ваша помощь, либо советы как сделать резиновый шаблон. пробовал width px переводить в %, но что то нечего не выходит. Воспользовался поиском здесь на форуме - но там проблемы чучуть другого плана. "Резиной впервые занимаюсь", не когда не приходилось ещё. Когда увеличиваю масштаб, то верхнее меню соскакивает со своего места и лезит в сторону. Joomla 2.5

Вот собственно сайт http://borzak.com.ua/

У меня размер монитора 1920х1080, скрин сделанный сейчас - http://images.bcm.ne...67206923570.png

Буду очень признателен. Я здесь у вас новичёк, буду адаптироватся и помогать остальным. Вот с резиной не приходилось просто работать. Заранее благодарю. Кто сможет помочь, моя аська 402611793


#art-main
{
background: #323A31;
background: linear-gradient(top, #020302 0, #5F6E5E 500px) no-repeat;
background: -webkit-linear-gradient(top, #020302 0, #5F6E5E 500px) no-repeat;
background: -moz-linear-gradient(top, #020302 0, #5F6E5E 500px) no-repeat;
background: -o-linear-gradient(top, #020302 0, #5F6E5E 500px) no-repeat;
background: -ms-linear-gradient(top, #020302 0, #5F6E5E 500px) no-repeat;
background: linear-gradient(top, #020302 0, #5F6E5E 500px) no-repeat;
-svg-background: linear-gradient(top, #020302 0, #5F6E5E 500px) no-repeat;
background-attachment: fixed !important;
margin: 0 auto;
font-size: 13px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
position: relative;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
cursor: default;
overflow: hidden;
}

.midcontain {
width: 100%;
max-width: 1600px;
min-width: 640px;
}

table, ul.art-hmenu
{
font-size: 13px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
margin: 0;
padding: 0;
}

.art-button
{
border-collapse: separate;
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
background: #FBB337;
background: transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #312D21;
padding: 0 10px;
margin: 0 auto;
height: 25px;
}

.art-postcontent, .art-postheadericons, .art-postfootericons, .art-blockcontent, ul.art-vmenu a
{
text-align: left;
}

.art-postcontent, .art-postcontent li, .art-postcontent table, .art-postcontent a, .art-postcontent a:link, .art-postcontent a:visited, .art-postcontent a.visited, .art-postcontent a:hover, .art-postcontent a.hovered
{
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-postcontent p
{
margin: 13px 0px;
}

.art-postcontent h1, .art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:visited, .art-postcontent h1 a:hover, .art-postcontent h2, .art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:visited, .art-postcontent h2 a:hover, .art-postcontent h3, .art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:visited, .art-postcontent h3 a:hover, .art-postcontent h4, .art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:visited, .art-postcontent h4 a:hover, .art-postcontent h5, .art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:visited, .art-postcontent h5 a:hover, .art-postcontent h6, .art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:visited, .art-postcontent h6 a:hover, .art-blockheader .t, .art-blockheader .t a, .art-blockheader .t a:link, .art-blockheader .t a:visited, .art-blockheader .t a:hover, .art-vmenublockheader .t, .art-vmenublockheader .t a, .art-vmenublockheader .t a:link, .art-vmenublockheader .t a:visited, .art-vmenublockheader .t a:hover, .art-headline, .art-headline a, .art-headline a:link, .art-headline a:visited, .art-headline a:hover, .art-slogan, .art-slogan a, .art-slogan a:link, .art-slogan a:visited, .art-slogan a:hover, .art-postheader, .art-postheader a, .art-postheader a:link, .art-postheader a:visited, .art-postheader a:hover
{
font-size: 30px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
line-height: 120%;
}

.art-postcontent a, .art-postcontent a:link
{
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
color: #E2CA6A;
}

.art-postcontent a:visited, .art-postcontent a.visited
{
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
color: #A59978;
}

.art-postcontent a:hover, .art-postcontent a.hover
{
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: underline;
color: #B79A24;
}

.art-postcontent h1
{
color: #B79A24;
margin: 10px 0 0;
font-size: 30px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-blockcontent h1
{
margin: 10px 0 0;
font-size: 30px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:hover, .art-postcontent h1 a:visited, .art-blockcontent h1 a, .art-blockcontent h1 a:link, .art-blockcontent h1 a:hover, .art-blockcontent h1 a:visited
{
font-size: 30px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-postcontent h2
{
color: #D78A04;
margin: 10px 0 0;
font-size: 28px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-blockcontent h2
{
margin: 10px 0 0;
font-size: 28px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:hover, .art-postcontent h2 a:visited, .art-blockcontent h2 a, .art-blockcontent h2 a:link, .art-blockcontent h2 a:hover, .art-blockcontent h2 a:visited
{
font-size: 28px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-postcontent h3
{
color: #CCC5B2;
margin: 10px 0 0;
font-size: 24px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-blockcontent h3
{
margin: 10px 0 0;
font-size: 24px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:hover, .art-postcontent h3 a:visited, .art-blockcontent h3 a, .art-blockcontent h3 a:link, .art-blockcontent h3 a:hover, .art-blockcontent h3 a:visited
{
font-size: 24px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-postcontent h4
{
color: #FEE6BE;
margin: 10px 0 0;
font-size: 20px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-blockcontent h4
{
margin: 10px 0 0;
font-size: 20px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:hover, .art-postcontent h4 a:visited, .art-blockcontent h4 a, .art-blockcontent h4 a:link, .art-blockcontent h4 a:hover, .art-blockcontent h4 a:visited
{
font-size: 20px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-postcontent h5
{
color: #FEE6BE;
margin: 10px 0 0;
font-size: 16px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-blockcontent h5
{
margin: 10px 0 0;
font-size: 16px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:hover, .art-postcontent h5 a:visited, .art-blockcontent h5 a, .art-blockcontent h5 a:link, .art-blockcontent h5 a:hover, .art-blockcontent h5 a:visited
{
font-size: 16px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-postcontent h6
{
color: #FBBD50;
margin: 10px 0 0;
font-size: 14px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-blockcontent h6
{
margin: 10px 0 0;
font-size: 14px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:hover, .art-postcontent h6 a:visited, .art-blockcontent h6 a, .art-blockcontent h6 a:link, .art-blockcontent h6 a:hover, .art-blockcontent h6 a:visited
{
font-size: 14px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-hmenu a, .art-vmenu a, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
{
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
}

header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

ul
{
list-style-type: none;
}

ol
{
list-style-position: inside;
}

HTML, body
{
height: 100%;
}

body
{
padding: 0;
margin: 0;
min-width: 1100px;
color: #B1A78B;
}

.clearfix:before, .clearfix:after
{
content: "";
display: table;
}

.clearfix:after
{
clear: both;
}

.cleared
{
font: 0/0 serif;
clear: both;
}

form
{
padding: 0 !important;
margin: 0 !important;
}

table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}

li h1, .art-postcontent li h1, .art-blockcontent li h1
{
margin: 1px;
}

li h2, .art-postcontent li h2, .art-blockcontent li h2
{
margin: 1px;
}

li h3, .art-postcontent li h3, .art-blockcontent li h3
{
margin: 1px;
}

li h4, .art-postcontent li h4, .art-blockcontent li h4
{
margin: 1px;
}

li h5, .art-postcontent li h5, .art-blockcontent li h5
{
margin: 1px;
}

li h6, .art-postcontent li h6, .art-blockcontent li h6
{
margin: 1px;
}

li p, .art-postcontent li p, .art-blockcontent li p
{
margin: 1px;
}

.art-shapes
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 0;
}

.art-slider-inner
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}

.art-slidenavigator > a
{
display: inline-block;
vertical-align: middle;
outline-style: none;
font-size: 1px;
}

.art-slidenavigator > a:last-child
{
margin-right: 0 !important;
}

.art-headline
{
display: inline-block;
position: absolute;
min-width: 50px;
top: 61px;
left: 50%;
line-height: 100%;
margin-left: -62px !important;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
z-index: 99;
}

.art-headline, .art-headline a, .art-headline a:link, .art-headline a:visited, .art-headline a:hover
{
font-size: 24px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
padding: 0;
margin: 0;
color: #221F16 !important;
white-space: nowrap;
}

.art-slogan
{
display: inline-block;
position: absolute;
min-width: 50px;
top: 90px;
left: 57.56%;
line-height: 100%;
margin-left: -138px !important;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
z-index: 99;
white-space: nowrap;
}

.art-slogan, .art-slogan a, .art-slogan a:link, .art-slogan a:visited, .art-slogan a:hover
{
font-size: 15px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
padding: 0;
margin: 0;
color: #372301 !important;
}

.art-header
{
margin: 20px auto 0;
position: relative;
height: 175px;
background-image: url('../images/header.jpg');
background-position: center top;
background-repeat: no-repeat;
}

.responsive .art-header
{
background-image: url('../images/header.jpg');
background-position: center center;
}

.art-header-inner
{
position: relative;
width: 1100px;
z-index: auto !important;
margin: 0 auto;
}

.art-header>div.art-nostyle, .art-header>div.art-block, .art-header>div.art-post
{
position: absolute;
z-index: 101;
}

.art-nav
{
background: #323A31;
background: linear-gradient(top, #242923 0, #394238 40%, #3C453B 50%, #3C453B 100%) no-repeat;
background: -webkit-linear-gradient(top, #242923 0, #394238 40%, #3C453B 50%, #3C453B 100%) no-repeat;
background: -moz-linear-gradient(top, #242923 0, #394238 40%, #3C453B 50%, #3C453B 100%) no-repeat;
background: -o-linear-gradient(top, #242923 0, #394238 40%, #3C453B 50%, #3C453B 100%) no-repeat;
background: -ms-linear-gradient(top, #242923 0, #394238 40%, #3C453B 50%, #3C453B 100%) no-repeat;
background: linear-gradient(top, #242923 0, #394238 40%, #3C453B 50%, #3C453B 100%) no-repeat;
-svg-background: linear-gradient(top, #242923 0, #394238 40%, #3C453B 50%, #3C453B 100%) no-repeat;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 20px auto 0;
position: relative;
z-index: 100;
font-size: 0;
text-align: center;
}

ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
{
outline: none;
position: relative;
z-index: 11;
}

ul.art-hmenu, ul.art-hmenu ul
{
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}

ul.art-hmenu li
{
position: relative;
z-index: 5;
display: block;
float: left;
background: none;
margin: 0;
padding: 0;
border: 0;
}

ul.art-hmenu li:hover
{
z-index: 10000;
white-space: normal;
}

ul.art-hmenu:after, ul.art-hmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}

ul.art-hmenu, ul.art-hmenu ul
{
min-height: 0;
}

ul.art-hmenu
{
display: inline-block;
vertical-align: bottom;
padding-left: 4px;
padding-right: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.art-nav:before
{
content: ' ';
}

.desktop-nav.art-nav
{
width: 1140px;
padding-left: 10px;
padding-right: 10px;
}

.art-hmenu-extra1
{
position: absolute;
left: 0;
top: 0;
width: auto;
height: auto;
background-position: center;
}

.art-hmenu-extra2
{
position: absolute;
right: 0;
top: 0;
width: auto;
height: auto;
background-position: center;
}

.art-menuitemcontainer
{
margin: 0 auto;
}

ul.art-hmenu>li
{
margin-left: 0;
}

ul.art-hmenu>li:first-child
{
margin-left: 0;
}

ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child
{
margin-right: 0;
}

ul.art-hmenu>li>a
{
padding: 0 40px;
margin: 0 auto;
position: relative;
display: block;
height: 46px;
cursor: pointer;
text-decoration: none;
color: #DCD8CB;
line-height: 46px;
text-align: center;
}

.art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a.active, .art-hmenu a:hover
{
font-size: 16px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
}

ul.art-hmenu>li>a.active
{
padding: 0 40px;
margin: 0 auto;
color: #FCC464;
text-decoration: none;
}

ul.art-hmenu>li>a:visited, ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a
{
text-decoration: none;
}

ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
background: #FAA005;
background: linear-gradient(top, #E19005 0, #FAA005 25%, #FAA614 40%, #FAA819 50%, #FAA819 100%) no-repeat;
background: -webkit-linear-gradient(top, #E19005 0, #FAA005 25%, #FAA614 40%, #FAA819 50%, #FAA819 100%) no-repeat;
background: -moz-linear-gradient(top, #E19005 0, #FAA005 25%, #FAA614 40%, #FAA819 50%, #FAA819 100%) no-repeat;
background: -o-linear-gradient(top, #E19005 0, #FAA005 25%, #FAA614 40%, #FAA819 50%, #FAA819 100%) no-repeat;
background: -ms-linear-gradient(top, #E19005 0, #FAA005 25%, #FAA614 40%, #FAA819 50%, #FAA819 100%) no-repeat;
background: linear-gradient(top, #E19005 0, #FAA005 25%, #FAA614 40%, #FAA819 50%, #FAA819 100%) no-repeat;
-svg-background: linear-gradient(top, #E19005 0, #FAA005 25%, #FAA614 40%, #FAA819 50%, #FAA819 100%) no-repeat;
padding: 0 40px;
margin: 0 auto;
}

ul.art-hmenu>li>a:hover, .desktop-nav ul.art-hmenu>li:hover>a
{
color: #312D21;
text-decoration: none;
}

ul.art-hmenu li li a
{
background: #46402F;
background: transparent;
border: 7px solid #342F23;
padding: 0 22px;
margin: 0 auto;
}

ul.art-hmenu li li
{
float: none;
width: auto;
margin-top: 5px;
margin-bottom: 5px;
}

.desktop-nav ul.art-hmenu li li ul>li:first-child
{
margin-top: 0;
}

ul.art-hmenu li li ul>li:last-child
{
margin-bottom: 0;
}

.art-hmenu ul a
{
display: block;
white-space: nowrap;
height: 30px;
min-width: 7em;
border: 7px solid transparent;
text-align: left;
line-height: 30px;
color: #E4E1D7;
font-size: 13px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
margin: 0;
}

.art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul a.active, .art-hmenu ul a:hover
{
text-align: left;
line-height: 30px;
color: #E4E1D7;
font-size: 13px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
margin: 0;
}

ul.art-hmenu li li:after
{
display: block;
position: absolute;
content: ' ';
height: 0;
top: -3px;
left: 0;
right: 0;
z-index: 1;
border-bottom: 1px solid #433D2D;
}

.desktop-nav ul.art-hmenu li li:first-child:before, .desktop-nav ul.art-hmenu li li:first-child:.desktop-nav ul.art-hmenu li li:first-child:before, .desktop-nav ul.art-hmenu li li:first-child:after
{
display: none;
}

ul.art-hmenu ul li a:hover, .desktop ul.art-hmenu ul li:hover>a
{
background: #E2341D;
border: 7px solid #46402F;
margin: 0 auto;
}

.art-hmenu ul a:hover
{
text-decoration: none;
}

.art-hmenu ul li a:hover
{
color: #000000;
}

.desktop-nav .art-hmenu ul li:hover>a
{
color: #000000;
}

ul.art-hmenu ul:before
{
background: #776D50;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
margin: 0 auto;
display: block;
position: absolute;
content: ' ';
z-index: 1;
}

.desktop-nav ul.art-hmenu li:hover>ul
{
visibility: visible;
top: 100%;
}

.desktop-nav ul.art-hmenu li li:hover>ul
{
top: 0;
left: 100%;
}

ul.art-hmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background-image: url('../images/spacer.gif');
}

.desktop-nav ul.art-hmenu>li>ul
{
padding: 18px 35px 35px 35px;
margin: -10px 0 0 -30px;
}

.desktop-nav ul.art-hmenu ul ul
{
padding: 35px 35px 35px 16px;
margin: -35px 0 0 -5px;
}

.desktop-nav ul.art-hmenu ul.art-hmenu-left-to-right
{
right: auto;
left: 0;
margin: -10px 0 0 -30px;
}

.desktop-nav ul.art-hmenu ul.art-hmenu-right-to-left
{
left: auto;
right: 0;
margin: -10px -30px 0 0;
}

.desktop-nav ul.art-hmenu li li:hover>ul.art-hmenu-left-to-right
{
right: auto;
left: 100%;
}

.desktop-nav ul.art-hmenu li li:hover>ul.art-hmenu-right-to-left
{
left: auto;
right: 100%;
}

.desktop-nav ul.art-hmenu ul ul.art-hmenu-left-to-right
{
right: auto;
left: 0;
padding: 35px 35px 35px 16px;
margin: -35px 0 0 -5px;
}

.desktop-nav ul.art-hmenu ul ul.art-hmenu-right-to-left
{
left: auto;
right: 0;
padding: 35px 16px 35px 35px;
margin: -35px -5px 0 0;
}

.desktop-nav ul.art-hmenu li ul>li:first-child
{
margin-top: 0;
}

.desktop-nav ul.art-hmenu li ul>li:last-child
{
margin-bottom: 0;
}

.desktop-nav ul.art-hmenu ul ul:before
{
border-radius: 3px;
top: 30px;
bottom: 30px;
right: 30px;
left: 11px;
}

.desktop-nav ul.art-hmenu>li>ul:before
{
top: 13px;
right: 30px;
bottom: 30px;
left: 30px;
}

.desktop-nav ul.art-hmenu>li>ul.art-hmenu-left-to-right:before
{
right: 30px;
left: 30px;
}

.desktop-nav ul.art-hmenu>li>ul.art-hmenu-right-to-left:before
{
right: 30px;
left: 30px;
}

.desktop-nav ul.art-hmenu ul ul.art-hmenu-left-to-right:before
{
right: 30px;
left: 11px;
}

.desktop-nav ul.art-hmenu ul ul.art-hmenu-right-to-left:before
{
right: 11px;
left: 30px;
}

.art-sheet
{
background: #211E17;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 10px;
margin: 20px auto 0;
position: relative;
cursor: auto;
width: 1100px;
z-index: auto !important;
}

.art-layout-wrapper
{
position: relative;
margin: 0 auto 0 auto;
z-index: auto !important;
}

.art-content-layout
{
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}

.art-content-layout-row
{
display: table-row;
}

.art-layout-cell
{
display: table-cell;
vertical-align: top;
}

.art-vmenublock
{
margin: 7px;
}

div.art-vmenublock img
{
margin: 0;
}

.art-vmenublockheader
{
background: #C8A828;
background: linear-gradient(top, #D8B93B 0, #D5B32A 29%, #AA8F22 100%) no-repeat;
background: -webkit-linear-gradient(top, #D8B93B 0, #D5B32A 29%, #AA8F22 100%) no-repeat;
background: -moz-linear-gradient(top, #D8B93B 0, #D5B32A 29%, #AA8F22 100%) no-repeat;
background: -o-linear-gradient(top, #D8B93B 0, #D5B32A 29%, #AA8F22 100%) no-repeat;
background: -ms-linear-gradient(top, #D8B93B 0, #D5B32A 29%, #AA8F22 100%) no-repeat;
background: linear-gradient(top, #D8B93B 0, #D5B32A 29%, #AA8F22 100%) no-repeat;
-svg-background: linear-gradient(top, #D8B93B 0, #D5B32A 29%, #AA8F22 100%) no-repeat;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 6px 0;
margin: 0 auto 7px;
}

.art-vmenublockheader .t, .art-vmenublockheader .t a, .art-vmenublockheader .t a:link, .art-vmenublockheader .t a:visited, .art-vmenublockheader .t a:hover
{
color: #090806;
font-size: 24px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
margin: 0 10px;
}

.art-vmenublockheader .t:before
{
content: url('../images/vmenublockheadericon.png');
margin-right: 6px;
bottom: 3px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
}

.opera .art-vmenublockheader .t:before
{
bottom: 0;
}

.art-vmenublockcontent
{
background: #46402F;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: 1px solid #776D50;
margin: 0 auto;
}

ul.art-vmenu, ul.art-vmenu ul
{
list-style: none;
display: block;
}

ul.art-vmenu, ul.art-vmenu li
{
display: block;
margin: 0;
padding: 0;
width: auto;
line-height: 0;
}

ul.art-vmenu
{
margin-top: 0;
margin-bottom: 0;
}

ul.art-vmenu ul
{
display: none;
margin: 0;
padding: 0 padding: 0;
position position: relative;
}

ul.art-vmenu ul.active
{
display: block;
}

ul.art-vmenu>li>a
{
background: #131613;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 0 10px;
margin: 0 auto;
color: #9F926F;
min-height: 34px;
line-height: 34px;
}

ul.art-vmenu a
{
display: block;
cursor: pointer;
z-index: 1;
font-size: 13px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
position: relative;
}

ul.art-vmenu li
{
position: relative;
}

ul.art-vmenu>li
{
margin-top: 4px;
}

ul.art-vmenu>li>ul
{
padding: 0;
margin-top: 14px;
margin-bottom: 14px;
}

ul.art-vmenu>li:first-child
{
margin-top: 0;
}

ul.art-vmenu>li>a:hover, ul.art-vmenu>li>a.active:hover
{
background: #C8A828;
padding: 0 10px;
margin: 0 auto;
}

ul.art-vmenu>li>a:hover, ul.art-vmenu>li>a.active:hover
{
text-decoration: none;
}

ul.art-vmenu a:hover, ul.art-vmenu a.active:hover
{
color: #372E0B;
}

ul.art-vmenu>li>a.active:hover>span.border-top, ul.art-vmenu>li>a.active:hover>span.border-bottom
{
background-color: transparent;
}

ul.art-vmenu>li>a.active
{
padding: 0 10px;
margin: 0 auto;
text-decoration: none;
color: #B97704;
}

ul.art-vmenu>li>ul:before
{
margin: 0 auto;
display: block;
position: absolute;
content: ' ';
top: 0;
right: 0;
bottom: 0;
left: 0;
}

ul.art-vmenu li li a
{
margin: 0 auto;
position: relative;
}

ul.art-vmenu ul li
{
margin: 0;
padding: 0;
}

ul.art-vmenu li li
{
position: relative;
margin-top: 6px;
}

ul.art-vmenu ul a
{
display: block;
position: relative;
min-height: 34px;
overflow: visible;
padding: 0;
padding-left: 20px;
padding-right: 20px;
z-index: 0;
line-height: 34px;
color: #ABA082;
font-size: 13px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
margin-left: 0;
margin-right: 0;
}

ul.art-vmenu ul a:visited, ul.art-vmenu ul a.active:hover, ul.art-vmenu ul a:hover, ul.art-vmenu ul a.active
{
line-height: 34px;
color: #ABA082;
font-size: 13px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
margin-left: 0;
margin-right: 0;
}

ul.art-vmenu ul ul a
{
padding-left: 40px;
}

ul.art-vmenu ul ul ul a
{
padding-left: 60px;
}

ul.art-vmenu ul ul ul ul a
{
padding-left: 80px;
}

ul.art-vmenu ul ul ul ul ul a
{
padding-left: 100px;
}

ul.art-vmenu li li a:before
{
content: url('../images/vmenusubitemicon.png');
margin-right: 10px;
bottom: 2px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
}

.opera ul.art-vmenu li li a:before
{
bottom: 0;
}

ul.art-vmenu ul>li>a:hover, ul.art-vmenu ul>li>a.active:hover
{
background: #FBB337;
background: rgba(251, 179, 55, 0.4);
margin: 0 auto;
}

ul.art-vmenu ul li a:hover, ul.art-vmenu ul li a.active:hover
{
text-decoration: none;
color: #F0E4B2;
}

ul.art-vmenu ul a:hover:after
{
background-position: center;
}

ul.art-vmenu ul a.active:hover:after
{
background-position: center;
}

ul.art-vmenu ul a.active:after
{
background-position: bottom;
}

ul.art-vmenu li li a:hover:before
{
content: url('../images/vmenuhoveredsubitemicon.png');
margin-right: 10px;
bottom: 2px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
}

.opera ul.art-vmenu li li a:hover:before
{
bottom: 0;
}

ul.art-vmenu ul>li>a.active
{
background: #FAA005;
background: rgba(250, 160, 5, 0.4);
margin: 0 auto;
}

ul.art-vmenu ul a.active, ul.art-vmenu ul a:hover, ul.art-vmenu ul a.active:hover
{
text-decoration: none;
color: #FBB741;
}

ul.art-vmenu li li a.active:before
{
content: url('../images/vmenuactivesubitemicon.png');
margin-right: 10px;
bottom: 2px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
}

.opera ul.art-vmenu li li a.active:before
{
bottom: 0;
}

.art-block
{
background: #46402F;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.3);
border: 1px solid #776D50;
margin: 7px;
}

div.art-block img
{
border: 1px solid #776D50;
margin: 0;
}

.art-blockheader
{
background: #C8A828;
background: linear-gradient(top, #DBBD48 0, #D5B32A 35%, #9E841F 100%) no-repeat;
background: -webkit-linear-gradient(top, #DBBD48 0, #D5B32A 35%, #9E841F 100%) no-repeat;
background: -moz-linear-gradient(top, #DBBD48 0, #D5B32A 35%, #9E841F 100%) no-repeat;
background: -o-linear-gradient(top, #DBBD48 0, #D5B32A 35%, #9E841F 100%) no-repeat;
background: -ms-linear-gradient(top, #DBBD48 0, #D5B32A 35%, #9E841F 100%) no-repeat;
background: linear-gradient(top, #DBBD48 0, #D5B32A 35%, #9E841F 100%) no-repeat;
-svg-background: linear-gradient(top, #DBBD48 0, #D5B32A 35%, #9E841F 100%) no-repeat;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #312D21;
padding: 12px 3px;
margin: 0 auto 2px;
}

.art-blockheader .t, .art-blockheader .t a, .art-blockheader .t a:link, .art-blockheader .t a:visited, .art-blockheader .t a:hover
{
color: #000000;
font-size: 24px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
margin: 0 10px;
}

.art-blockheader .t:before
{
content: url('../images/blockheadericon.png');
margin-right: 6px;
bottom: 3px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
}

.opera .art-blockheader .t:before
{
bottom: 0;
}

.art-blockcontent
{
padding: 3px;
margin: 0 auto;
color: #C8C1AC;
font-size: 13px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-blockcontent table, .art-blockcontent li, .art-blockcontent a, .art-blockcontent a:link, .art-blockcontent a:visited, .art-blockcontent a:hover
{
color: #C8C1AC;
font-size: 13px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
}

.art-blockcontent p
{
margin: 0 5px;
}

.art-blockcontent a, .art-blockcontent a:link
{
color: #D1AF29;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
}

.art-blockcontent a:visited, .art-blockcontent a.visited
{
color: #CEC8B6;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
}

.art-blockcontent a:hover, .art-blockcontent a.hover
{
color: #FCC05A;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: underline;
}

.art-block ul>li:before
{
content: url('../images/blockbullets.png');
margin-right: 6px;
bottom: 2px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
margin-left: -14px;
}

.opera .art-block ul>li:before
{
bottom: 0;
}

.art-block li
{
font-size: 13px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
line-height: 125%;
color: #D2CCBC;
}

.art-block ul>li, .art-block ol
{
padding: 0;
}

.art-block ul>li
{
padding-left: 14px;
}

.art-breadcrumbs
{
margin: 0 auto;
}

a.art-button, a.art-button:link, a:link.art-button:link, body a.art-button:link, a.art-button:visited, body a.art-button:visited, input.art-button, button.art-button
{
text-decoration: none;
font-size: 14px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
position: relative;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: center;
color: #D4CEBF;
margin: 0 !important;
overflow: visible;
cursor: pointer;
text-indent: 0;
line-height: 25px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

.art-button img
{
margin: 0;
vertical-align: middle;
}

.firefox2 .art-button
{
display: block;
float: left;
}

input, select, textarea
{
vertical-align: middle;
font-size: 14px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
}

.art-block select
{
width: 96%;
}

input.art-button
{
float: none !important;
}

.art-button.active, .art-button.active:hover
{
background: #FBB337;
background: linear-gradient(top, #FCC669 0, #FAA005 95%, #F59D05 100%) no-repeat;
background: -webkit-linear-gradient(top, #FCC669 0, #FAA005 95%, #F59D05 100%) no-repeat;
background: -moz-linear-gradient(top, #FCC669 0, #FAA005 95%, #F59D05 100%) no-repeat;
background: -o-linear-gradient(top, #FCC669 0, #FAA005 95%, #F59D05 100%) no-repeat;
background: -ms-linear-gradient(top, #FCC669 0, #FAA005 95%, #F59D05 100%) no-repeat;
background: linear-gradient(top, #FCC669 0, #FAA005 95%, #F59D05 100%) no-repeat;
-svg-background: linear-gradient(top, #FCC669 0, #FAA005 95%, #F59D05 100%) no-repeat;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #908360;
padding: 0 10px;
margin: 0 auto;
}

.art-button.active, .art-button.active:hover
{
color: #2B2408 !important;
}

.art-button.hover, .art-button:hover
{
background: #FAA005;
background: transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #312D21;
padding: 0 10px;
margin: 0 auto;
}

.art-button.hover, .art-button:hover
{
color: #FDD796 !important;
}

input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea
{
background: #211E17;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #776D50;
margin: 0 auto;
}

input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea
{
width: 100%;
padding: 8px 0;
color: #B8AE94 !important;
font-size: 14px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
}

input.art-error, textarea.art-error
{
background: #211E17;
border: 1px solid #E2341D;
margin: 0 auto;
}

input.art-error, textarea.art-error
{
color: #B8AE94 !important;
font-size: 14px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
}

form.art-search input[type="text"]
{
background: #211E17;
border-radius: 0;
border: 2px solid #776D50;
margin: 0 auto;
width: 100%;
padding: 8px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #B8AE94 !important;
font-size: 13px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
}

form.art-search
{
background-image: none;
border: 0;
display: block;
position: relative;
top: 0;
padding: 0;
margin: 5px;
left: 0;
line-height: 0;
}

form.art-search input
{
top: 0;
right: 0;
}

form.art-search>input
{
bottom: 0;
left: 0;
vertical-align: middle;
}

form.art-search input[type="submit"]
{
margin: 0 auto;
color: #1F1C14 !important;
position: absolute;
display: block;
left: auto;
border: none;
background: url('../images/searchicon.png') center center no-repeat;
width: 24px;
height: 100%;
padding: 0;
}

label.art-checkbox:before
{
background: #211E17;
background: linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
background: -webkit-linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
background: -moz-linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
background: -o-linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
background: -ms-linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
background: linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
-svg-background: linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
border: 1px solid #776D50;
margin: 0 auto;
width: 20px;
height: 20px;
}

label.art-checkbox
{
cursor: pointer;
font-size: 13px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
line-height: 20px;
display: inline-block;
}

.art-checkbox>input[type="checkbox"]
{
margin: 0 5px 0 0;
}

label.art-checkbox.active:before
{
background: #776D50;
background: linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
background: -webkit-linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
background: -moz-linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
background: -o-linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
background: -ms-linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
background: linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
-svg-background: linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
border: 1px solid #776D50;
margin: 0 auto;
width: 20px;
height: 20px;
display: inline-block;
}

label.art-checkbox.hovered:before
{
background: #5C543D;
background: linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
background: -webkit-linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
background: -moz-linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
background: -o-linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
background: -ms-linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
background: linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
-svg-background: linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
border: 1px solid #776D50;
margin: 0 auto;
width: 20px;
height: 20px;
display: inline-block;
}

label.art-radiobutton:before
{
background: #211E17;
background: linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
background: -webkit-linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
background: -moz-linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
background: -o-linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
background: -ms-linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
background: linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
-svg-background: linear-gradient(top, #3C372A 0, #2A271E 50%, #12110D 50%, #211E17 100%) no-repeat;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
border: 1px solid #776D50;
margin: 0 auto;
width: 12px;
height: 12px;
}

label.art-radiobutton
{
cursor: pointer;
font-size: 13px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
line-height: 12px;
display: inline-block;
}

.art-radiobutton>input[type="radio"]
{
vertical-align: baseline;
margin: 0 5px 0 0;
}

label.art-radiobutton.active:before
{
background: #776D50;
background: linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
background: -webkit-linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
background: -moz-linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
background: -o-linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
background: -ms-linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
background: linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
-svg-background: linear-gradient(top, #908360 0, #817556 50%, #6B6247 50%, #776D50 100%) no-repeat;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
border: 1px solid #776D50;
margin: 0 auto;
width: 12px;
height: 12px;
display: inline-block;
}

label.art-radiobutton.hovered:before
{
background: #5C543D;
background: linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
background: -webkit-linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
background: -moz-linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
background: -o-linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
background: -ms-linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
background: linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
-svg-background: linear-gradient(top, #746A4E 0, #625941 50%, #4D4633 50%, #5C543D 100%) no-repeat;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
border: 1px solid #776D50;
margin: 0 auto;
width: 12px;
height: 12px;
display: inline-block;
}

.art-post
{
background: #312D21;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);
padding: 3px;
margin: 7px;
}

a img
{
border: 0;
}

.art-article img, img.art-article, .art-block img, .art-footer img
{
margin: 6px;
}

.art-metadata-icons img
{
border: none;
vertical-align: middle;
margin: 2px;
}

.art-article table, table.art-article
{
border-collapse: collapse;
margin: 1px;
}

.art-post .art-content-layout-br
{
height: 0;
}

.art-article th, .art-article td
{
padding: 1px;
border: dotted 1px #312D21;
vertical-align: top;
text-align: left;
}

.art-article th
{
text-align: center;
vertical-align: middle;
padding: 7px;
}

pre
{
overflow: auto;
padding: 0.1em;
}

.preview-cms-logo
{
border: 0;
margin: 1em 1em 0 0;
float: left;
}

.image-caption-wrapper
{
padding: 5px 5px 5px 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.image-caption-wrapper img
{
margin: 0 !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.image-caption-wrapper div.art-collage
{
margin: 0 !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.image-caption-wrapper p
{
font-size: 80%;
text-align: right;
margin: 0;
}

.art-postmetadataheader
{
background: #FF0000;
background: rgba(255, 0, 0, 0.804);
border-bottom: 1px solid #413B2C;
margin: 0 auto;
position: relative;
z-index: 1;
padding: 1px;
}

.art-postheader
{
color: #F4E5AF;
margin: 6px 0;
font-size: 26px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
text-align: center;
}

.art-postheader a, .art-postheader a:link, .art-postheader a:visited, .art-postheader a.visited, .art-postheader a:hover, .art-postheader a.hovered
{
font-size: 26px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
}

.art-postheader a, .art-postheader a:link
{
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #DABC44;
}

.art-postheader a:visited, .art-postheader a.visited
{
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
color: #ECDC9D;
}

.art-postheader a:hover, .art-postheader a.hovered
{
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
text-decoration: none;
color: #C8A828;
}

.art-postheadericons, .art-postheadericons a, .art-postheadericons a:link, .art-postheadericons a:visited, .art-postheadericons a:hover
{
font-size: 12px;
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
color: #DCD8CB;
}

.art-postheadericons
{
display: inline-block;
padding: 1px;
}

.art-postheadericons a, .art-postheadericons a:link
{
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
color: #C8C1AC;
}

.art-postheadericons a:visited, .art-postheadericons a.visited
{
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
color: #C8C1AC;
}

.art-postheadericons a:hover, .art-postheadericons a.hover
{
font-family: 'Droid Serif', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: underline;
color: #FAAA1E;
}

.art-postdateicon:before
{
content: url('../images/postdateicon.png');
margin-right: 6px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
bottom: auto;
}

.opera .art-postdateicon:before
{
bottom: 0;
}

.art-postauthoricon:before
{
content: url('../images/postauthoricon.png');
margin-right: 6px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
bottom: auto;
}

.opera .art-postauthoricon:before
{
bottom: 0;
}

.art-postpdficon:before
{
content: url('../images/system/pdf_button.png');
margin-right: 6px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
bottom: auto;
}

.opera .art-postpdficon:before
{
bottom: 0;
}

.art-postprinticon:before
{
content: url('../images/system/printButton.png');
margin-right: 6px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
bottom: auto;
}

.opera .art-postprinticon:before
{
bottom: 0;
}

.art-postemailicon:before
{
content: url('../images/system/emailButton.png');
margin-right: 6px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
bottom: auto;
}

.opera .art-postemailicon:before
{
bottom: 0;
}

.art-postediticon:before
{
content: url('../images/system/edit.png');
margin-right: 6px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
bottom: auto;
}

.opera .art-postediticon:before
{
bottom: 0;
}

.art-postcontent ul>li:before, .art-post ul>li:before, .art-textblock ul>li:before
{
content: url('../images/postbullets.png');<

Edited by explo1d
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
explo1d Explorer

explo1d

Posted
  • Author
Posted 


.desktop-nav.art-nav {


	padding-left: 10px;
	padding-right: 10px;
	width: 100%;
}

и


.art-sheet {


	background: none repeat scroll 0 0 #211E17;
	border-radius: 4px 4px 4px 4px;
	cursor: auto;
	margin: 20px auto 0;
	padding: 10px;
	position: relative;
	width: 100%;
	z-index: auto !important;
}

или что вы подразумеваете под резиновостью? что именно растянуть нужно?

Здравствуйте! Нужно что бы сайт растягивался в зависимости от ширины окна браузера. Необходимо сделать так, чтобы картинки и текст вели себя адекватно и оставались читабельными при любом разрешении. Допустим, человек купил дорогой широкий монитор, зашёл на сайт, а тот как был 800 пикселей в ширину, так и остался. Не надо его учить, что растягивать браузер на все 1900 пикселей неправильно. Надо сделать резину и предоставить право выбора человеку..

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted

min-width и max-width - но они не всеми браузерами поддерживаются, при этом, если ширина будет использоваться на мобильных устройствах, то нужно вообще смотреть в сторону адаптивной верстки, да и прежде всего продумывать структуру, дизайн и содержание..., а так - по 100% в местах которые указал.

Link to comment
Share on other sites
  • 0
explo1d Explorer

explo1d

Posted
  • Author
Posted

min-width и max-width - но они не всеми браузерами поддерживаются, при этом, если ширина будет использоваться на мобильных устройствах, то нужно вообще смотреть в сторону адаптивной верстки, да и прежде всего продумывать структуру, дизайн и содержание..., а так - по 100% в местах которые указал.

Нет, для мобильных устройств сайт не нежен. Попробую как Вы сказали и указали что сменить, хотя я смотрю, у меня уже и так там стоит по 100%, я перевёл.

Хотя с другой стороны, сайты не должны быть резиновыми. Сайты должны становиться масштабируемыми. Так, при увеличение ширины колонок и отступов должен увеличиваться размер шрифта и размер картинок.

Таким образом ширина строки остаётся такой же удобной для чтения и к тому же увеличивается шрифт, что тоже повышает удобство чтения. Но когда я масштабирую сайт (ctrl+, ctrl+ колёсико), то у меня верхнее горизонтальное меню, становится вертикальным и уежает в сторону. В чём здесь проблема ?

Link to comment
Share on other sites
  • 0
explo1d Explorer

explo1d

Posted
  • Author
Posted

В чём здесь проблема ?

так я же вам написал - используйте адаптивную разметку.

хотя я смотрю, у меня уже и так там стоит по 100%, я перевёл.

ничего у вас там не стоит

Извеняюсь, я понял. Спасибо, буду пробывать.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept