0 Пользователей и 1 Гость просматривают эту тему.
  • 12 Ответов
  • 6197 Просмотров

Добрый день, столкнулся с проблемой  :(  скачал шаблон, поставил, при разрешений 1024*768 отображается все нормально, но если увеличить разрешение, то шапка и все остальное остается по середине экрана, то есть не разширяется на все окно браузера, подскажите пожалуйста что изменить в коде что бы сделать его резиновым?

сам копался, но так и не смог найти где это меняется  :(

вот temlate.css

Код
/* begin Page */

/* Generated with Artisteer version 2.2.0.16836, file checksum is 9DB6F363. */

body
{
margin: 0 auto;
padding: 0;
background-color: #D6DBDC;
background-image: url('../images/Page-BgTexture.jpg');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top left;
}

#art-main
{
position: relative;
width: 100%;
left: 0;
top: 0;
}

#art-page-background-glare
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

#art-page-background-glare-image
{
background-image: url('../images/Page-BgGlare.png');
background-repeat: no-repeat;
width: 100%;
height: 100%;
margin: 0;
}

html:first-child #art-page-background-glare
{
border: 1px solid transparent; /* Opera fix */
}


#art-page-background-gradient
{
position: absolute;
background-image: url('../images/Page-BgGradient.jpg');
background-repeat: repeat-x;
top:0;
width:100%;
height: 100%;

}

#art-page-background-gradient
{
background-position: top left;
}


.cleared
{
float: none;
clear: both;
margin: 0;
padding: 0;
border: none;
font-size:1px;
}


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

table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}
/* end Page */

/* begin Box, Sheet */
.art-Sheet
{
position:relative;
z-index:0;
margin:0 auto;
width: 1000px;
min-width:37px;
min-height:37px;
}

.art-Sheet-body
{
position: relative;
z-index:1;
padding: 5px;
}

.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl, .art-Sheet-tc, .art-Sheet-bc,.art-Sheet-cr, .art-Sheet-cl
{
position:absolute;
z-index:-1;
}

.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
{
width: 36px;
height: 36px;
background-image: url('../images/Sheet-s.png');
}

.art-Sheet-tl
{
top:0;
left:0;
clip: rect(auto, 18px, 18px, auto);
}

.art-Sheet-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 18px, 18px);
}

.art-Sheet-bl
{
bottom: 0;
left: 0;
clip: rect(18px, 18px, auto, auto);
}

.art-Sheet-br
{
bottom: 0;
right: 0;
clip: rect(18px, auto, auto, 18px);
}

.art-Sheet-tc, .art-Sheet-bc
{
left: 18px;
right: 18px;
height: 36px;
background-image: url('../images/Sheet-h.png');
}

.art-Sheet-tc
{
top: 0;
clip: rect(auto, auto, 18px, auto);
}

.art-Sheet-bc
{
bottom: 0;
clip: rect(18px, auto, auto, auto);
}

.art-Sheet-cr, .art-Sheet-cl
{
top: 18px;
bottom: 18px;
width: 36px;
background-image: url('../images/Sheet-v.png');
}

.art-Sheet-cr
{
right:0;
clip: rect(auto, auto, auto, 18px);
}

.art-Sheet-cl
{
left:0;
clip: rect(auto, 18px, auto, auto);
}

.art-Sheet-cc
{
position:absolute;
z-index:-1;
top: 18px;
left: 18px;
right: 18px;
bottom: 18px;
background-image: url('../images/Sheet-c.png');
}


.art-Sheet
{
margin-top: -5px !important;
}

#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
min-width:1000px;
}

/* end Box, Sheet */

/* begin Header */
div.art-Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 990px;
height: 250px;
}


div.art-Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('../images/Header.jpg');
background-repeat: no-repeat;
background-position: center center;
}
/* end Header */

/* begin Logo */
.art-Logo
{
display : block;
position: absolute;
left: 10px;
top: 94px;
width: 970px;
}

h1.art-Logo-name
{
display: block;
text-align: left;
}

h1.art-Logo-name, h1.art-Logo-name a, h1.art-Logo-name a:link, h1.art-Logo-name a:visited, h1.art-Logo-name a:hover
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 37px;
font-style: normal;
font-weight: bold;
text-decoration: none;
letter-spacing: 2px;
text-transform: uppercase;
padding:0;
margin:0;
color: #172931 !important;
}

.art-Logo-text
{
display: block;
text-align: left;
}

.art-Logo-text, .art-Logo-text a
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
padding:0;
margin:0;
color: #172931 !important;
}

/* end Logo */

/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
text-align:left;
text-decoration:none;
outline:none;
letter-spacing:normal;
word-spacing:normal;
}

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

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

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

.art-menu li li
{
float: none;
}

.art-menu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background:none;
}

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

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

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

.art-menu ul
{
background-image: url(../images/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}


ul.art-menu
{
float:right;
}



/* menu structure */

.art-menu
{
padding: 0px 0px 0px 0px;
}

.art-nav
{
position: relative;
height: 25px;
z-index: 100;
}

.art-nav .l, .art-nav .r
{
position: absolute;
z-index: -1;
top: 0;
height: 25px;
background-image: url('../images/nav.png');
}

.art-nav .l
{
left: 0;
right:0px;
}

.art-nav .r
{
right: 0;
width: 990px;
clip: rect(auto, auto, auto, 990px);
}


/* end Menu */

/* begin MenuItem */
.art-menu ul li
{
clear: both;
}

.art-menu a
{
position:relative;
display: block;
overflow:hidden;
height: 25px;
cursor: pointer;
text-decoration: none;
margin-right: 0px;
margin-left: 0px;
}


.art-menu a .r, .art-menu a .l
{
position:absolute;
display: block;
top:0;
z-index:-1;
height: 75px;
background-image: url('../images/MenuItem.png');
}

.art-menu a .l
{
left:0;
right:0px;
}

.art-menu a .r
{
width:400px;
right:0;
clip: rect(auto, auto, auto, 400px);
}

.art-menu a .t
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
color: #171B1C;
padding: 0 22px;
margin: 0 0px;
line-height: 25px;
text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
top:-25px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
top:-25px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
top:-25px;
}
.art-menu a:hover .t
{
color: #22343A;
}

.art-menu li:hover a .t
{
color: #22343A;
}

.art-menu li:hover>a .t
{
color: #22343A;
}


.art-menu a.active .l, .art-menu a.active .r
{
top: -50px;
}

.art-menu a.active .t
{
color: #D2E3EA;
}


/* end MenuItem */

/* begin MenuSeparator */
.art-nav .art-menu-separator
{
display: block;
width: 1px;
height: 25px;
background-image: url('../images/MenuSeparator.png');
}

/* end MenuSeparator */

/* begin MenuSubItem */
.art-menu ul a
{
display:block;
text-align: center;
white-space: nowrap;
height: 20px;
width: 180px;
overflow:hidden;
line-height: 20px;
margin-right: auto;


background-image: url('../images/subitem-bg.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: #9CA9AB;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 20px;
color: #384142;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 11px;
letter-spacing: 1px;
}

.art-menu ul ul a
{
margin-left: auto;
}

.art-menu ul li a:hover
{
color: #22343A;
border-color: #839495;
background-position: 0 -20px;
}

.art-menu ul li:hover>a
{
color: #22343A;
border-color: #839495;
background-position: 0 -20px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
color: #22343A;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
color: #22343A;
}


/* end MenuSubItem */

/* begin ContentLayout */
.art-contentLayout
{
position: relative;
margin-bottom: 2px;
width: 990px;
}
/* end ContentLayout */

/* begin Box, Block */
.art-Block
{
position:relative;
z-index:0;
margin:0 auto;
min-width:1px;
min-height:1px;
}

.art-Block-body
{
position: relative;
z-index:1;
padding: 0px;
}



.art-Block
{
margin: 5px;
}

/* end Box, Block */

/* begin BlockHeader */
.art-BlockHeader
{
position:relative;
z-index:0;
height: 30px;
padding: 0 7px;
margin-bottom: 0px;
}

.art-BlockHeader .t
{
height: 30px;
color: #EEF1F1;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
white-space : nowrap;
padding: 0 7px;
line-height: 30px;
}

.art-BlockHeader .l, .art-BlockHeader .r
{
display:block;
position:absolute;
z-index:-1;
height: 30px;
background-image: url('../images/BlockHeader.png');
}

.art-BlockHeader .l
{
left:0;
right:10px;
}

.art-BlockHeader .r
{
width:990px;
right:0;
clip: rect(auto, auto, auto, 980px);
}





.art-header-tag-icon
{
display:inline-block;
background-position:left top;
background-image: url('../images/BlockHeaderIcon.png');
padding:0 0 0 22px;
background-repeat: no-repeat;
min-height: 15px;
margin: 0 0 0 5px;
}


/* end BlockHeader */

/* begin Box, BlockContent */
.art-BlockContent
{
position:relative;
z-index:0;
margin:0 auto;
min-width:23px;
min-height:23px;
}

.art-BlockContent-body
{
position: relative;
z-index:1;
padding: 8px;
}

.art-BlockContent-tr, .art-BlockContent-tl, .art-BlockContent-br, .art-BlockContent-bl, .art-BlockContent-tc, .art-BlockContent-bc,.art-BlockContent-cr, .art-BlockContent-cl
{
position:absolute;
z-index:-1;
}

.art-BlockContent-tr, .art-BlockContent-tl, .art-BlockContent-br, .art-BlockContent-bl
{
width: 22px;
height: 22px;
background-image: url('../images/BlockContent-s.png');
}

.art-BlockContent-tl
{
top:0;
left:0;
clip: rect(auto, 11px, 11px, auto);
}

.art-BlockContent-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 11px, 11px);
}

.art-BlockContent-bl
{
bottom: 0;
left: 0;
clip: rect(11px, 11px, auto, auto);
}

.art-BlockContent-br
{
bottom: 0;
right: 0;
clip: rect(11px, auto, auto, 11px);
}

.art-BlockContent-tc, .art-BlockContent-bc
{
left: 11px;
right: 11px;
height: 22px;
background-image: url('../images/BlockContent-h.png');
}

.art-BlockContent-tc
{
top: 0;
clip: rect(auto, auto, 11px, auto);
}

.art-BlockContent-bc
{
bottom: 0;
clip: rect(11px, auto, auto, auto);
}

.art-BlockContent-cr, .art-BlockContent-cl
{
top: 11px;
bottom: 11px;
width: 22px;
background-image: url('../images/BlockContent-v.png');
}

.art-BlockContent-cr
{
right:0;
clip: rect(auto, auto, auto, 11px);
}

.art-BlockContent-cl
{
left:0;
clip: rect(auto, 11px, auto, auto);
}

.art-BlockContent-cc
{
position:absolute;
z-index:-1;
top: 11px;
left: 11px;
right: 11px;
bottom: 11px;
background-color: #CFDEE3;
}


.art-BlockContent-body
{
color:#000000;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 11px;
}

.art-BlockContent-body a:link
{
color: #315868;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}

.art-BlockContent-body a:visited, .art-BlockContent-body a.visited
{
color: #75888A;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
text-decoration: none;
}

.art-BlockContent-body a:hover, .art-BlockContent-body a.hover
{
color: #41768B;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
text-decoration: none;
}

.art-BlockContent-body ul
{
list-style-type: none;
color: #14232A;
margin:0;
padding:0;
}

.art-BlockContent-body li
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 11px;
margin-left: 12px;
}

.art-BlockContent-body ul li
{
padding:0px 0 0px 14px;
background-image: url('../images/BlockContentBullets.png');
background-repeat:no-repeat;
margin:0.5em 0 0.5em 0;
line-height:1.2em;
}

/* end Box, BlockContent */

/* begin Box, Post */
.art-Post
{
position:relative;
z-index:0;
margin:0 auto;
min-width:1px;
min-height:1px;
}

.art-Post-body
{
position: relative;
z-index:1;
padding: 12px;
}



.art-Post
{
margin: 10px;
}

/* Start images */
a img
{
border: 0;
}

.art-article img, img.art-article
{
margin: 1em;
}

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

/* Start tables */

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

.art-article table, table.art-article .art-article tr, .art-article th, .art-article td
{
background-color:Transparent;
}

.art-article th, .art-article td
{
padding: 2px;
border: solid 1px #4A707D;
vertical-align: top;
text-align:left;
}

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

/* Finish tables */
/* end Box, Post */

/* begin PostHeaderIcon */
.art-PostHeaderIcon-wrapper
{
text-decoration:none;
margin: 0.2em 0;
padding: 0;
font-weight:normal;
font-style:normal;
letter-spacing:normal;
word-spacing:normal;
font-variant:normal;
text-decoration:none;
font-variant:normal;
text-transform:none;
text-align:left;
text-indent:0;
line-height:inherit;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
letter-spacing: 2px;
text-align: left;
margin-top: 12px;
margin-bottom: 8px;
color: #213B45;
}

.art-PostHeaderIcon-wrapper, .art-PostHeaderIcon-wrapper a, .art-PostHeaderIcon-wrapper a:link, .art-PostHeaderIcon-wrapper a:visited, .art-PostHeaderIcon-wrapper a:hover
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
letter-spacing: 2px;
text-align: left;
margin-top: 12px;
margin-bottom: 8px;
color: #213B45;
}

/* end PostHeaderIcon */

/* begin PostHeader */
.art-PostHeader a:link
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #2A4D5A;
}

.art-PostHeader a:visited, .art-PostHeader a.visited
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #3E5F6A;
}

.art-PostHeader a:hover, .art-PostHeader a.hovered
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
  text-align: left;
  color: #5293AD;
}
/* end PostHeader */

/* begin PostMetadata */
.art-PostMetadataHeader
{
padding:1px;
background-color: #C4DAE3;
border-color: #B6D2DD;
border-style: dashed;
border-width: 1px;
}
/* end PostMetadata */

/* begin PostIcons */
.art-PostHeaderIcons
{
padding:1px;
}

.art-PostHeaderIcons, .art-PostHeaderIcons a, .art-PostHeaderIcons a:link, .art-PostHeaderIcons a:visited, .art-PostHeaderIcons a:hover
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 10px;
letter-spacing: 1px;
color: #384142;
}

.art-PostHeaderIcons a, .art-PostHeaderIcons a:link, .art-PostHeaderIcons a:visited, .art-PostHeaderIcons a:hover
{
margin:0;
}

.art-PostHeaderIcons a:link
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: bold;
text-decoration: none;
color: #315868;
}

.art-PostHeaderIcons a:visited, .art-PostHeaderIcons a.visited
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
text-decoration: none;
letter-spacing: 1px;
color: #315868;
}

.art-PostHeaderIcons a:hover, .art-PostHeaderIcons a.hover
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
text-decoration: underline;
color: #101D23;
}
/* end PostIcons */

/* begin PostContent */
/* Content Text Font & Color (Default) */
body
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 1px;
  color: #000000;
}

.art-PostContent
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  letter-spacing: 1px;
  color: #000000;
}

/* Start Content link style */
/*
The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
*/
a
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
  letter-spacing: 1px;
  color: #41768B;
}

/* Adds special style to an unvisited link. */
a:link
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
  letter-spacing: 1px;
  color: #41768B;
}

/* Adds special style to a visited link. */
a:visited, a.visited
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
  color: #395660;
}

/* :hover - adds special style to an element when you mouse over it. */
a:hover, a.hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  color: #5293AD;
}

/* Finish Content link style */

/* Resert some headings default style & links default style for links in headings*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}


/* Start Content headings Fonts & Colors  */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 20px;
  letter-spacing: 3px;
  text-align: left;
  color: #315868;
}

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 18px;
  letter-spacing: 2px;
  text-align: left;
  color: #315868;
}

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-align: left;
  color: #41768B;
}

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-align: left;
  color: #000000;
}

h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-align: left;
  color: #000000;
}

h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-align: left;
  color: #000000;
}
/* Finish Content headings Fonts & Colors  */


/* end PostContent */

/* begin PostBullets */
/* Start Content list */
ol, ul
{
color: #0C0E0E;
margin:1em 0 1em 2em;
padding:0;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 11px;
text-align: left;
}

li ol, li ul
{
margin:0.5em 0 0.5em 2em;
padding:0;
}

li
{
margin:0.2em 0;
padding:0;
}

ul
{
list-style-type: none;
}

ol
{
list-style-position:inside;

}



.art-Post li
{
padding:1px 0 1px 14px;
line-height:1.2em;
}

.art-Post ol li, .art-Post ul ol li
{
background: none;
padding-left:0;
}

.art-Post ul li, .art-Post ol ul li
{
background-image: url('../images/PostBullets.png');
background-repeat:no-repeat;
padding-left:14px;
}


/* Finish Content list */
/* end PostBullets */

/* begin PostQuote */
/* Start blockquote */
blockquote p
{
color:#0B1518;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-style: italic;
font-weight: normal;
text-align: left;
}

blockquote
{
margin:10px 10px 10px 50px;
padding:5px 5px 5px 32px;
background-color:#EAF2F5;
background-image:url('../images/PostQuote.png');
background-position:left top;
background-repeat:no-repeat;
}


/* Finish blockuote */
/* end PostQuote */

/* begin Button */
.art-button-wrapper .art-button
{
display:inline-block;
width: auto;
outline:none;
border:none;
background:none;
line-height:25px;
margin:0 !important;
padding:0 !important;
overflow: visible;
cursor: default;
text-decoration: none !important;
z-index:0;
}

.art-button-wrapper
{
display:inline-block;
position:relative;
height: 25px;
overflow:hidden;
white-space: nowrap;
width: auto;
z-index:0;
}

.art-button-wrapper .art-button
{
display:block;
height: 25px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
letter-spacing: 1px;
white-space: nowrap;
text-align: left;
padding: 0 10px !important;
line-height: 25px;
text-decoration: none !important;
color: #E9ECEC !important;
}

input, select
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
letter-spacing: 1px;
}

.art-button-wrapper.hover .art-button, .art-button:hover
{
color: #EAF2F5 !important;
text-decoration: none !important;
}

.art-button-wrapper.active .art-button
{
color: #E5EDF0 !important;
}

.art-button-wrapper .l, .art-button-wrapper .r
{
display:block;
position:absolute;
z-index:-1;
height: 75px;
background-image: url('../images/Button.png');
}

.art-button-wrapper .l
{
left:0;
right:4px;
}

.art-button-wrapper .r
{
width:409px;
right:0;
clip: rect(auto, auto, auto, 405px);
}

.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
top: -25px;
}

.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
top: -50px;
}


/* end Button */

/* begin Footer */
.art-Footer
{
position:relative;
z-index:0;
overflow:hidden;
width: 990px;
margin: 5px auto 0px auto;
}

.art-Footer .art-Footer-inner
{
height:1%;
position: relative;
z-index: 0;
padding: 8px;
text-align: center;
}

.art-Footer .art-Footer-background
{
position:absolute;
z-index:-1;
background-repeat:no-repeat;
background-image: url('../images/Footer.png');
width: 990px;
height: 150px;
bottom:0;
left:0;
}


.art-rss-tag-icon
{
position: relative;
display:block;
float:left;
background-image: url('../images/livemarks.png');
background-position: center right;
background-repeat: no-repeat;
margin: 0 5px 0 0;
height: 16px;
width: 16px;
}




.art-Footer .art-Footer-text p
{
margin: 0;
}

.art-Footer .art-Footer-text
{
display:inline-block;
color:#151819;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-size: 10px;
letter-spacing: 1px;
}

.art-Footer .art-Footer-text a:link
{
text-decoration: none;
color: #1F3842;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: bold;
text-decoration: none;
}

.art-Footer .art-Footer-text a:visited
{
text-decoration: none;
color: #444F50;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
text-decoration: none;
}

.art-Footer .art-Footer-text a:hover
{
text-decoration: none;
color: #2F5565;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
/* end Footer */

/* begin PageFooter */
.art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover
{
font-family:Arial;
font-size:10px;
letter-spacing:normal;
word-spacing:normal;
font-style:normal;
font-weight:normal;
text-decoration:underline;
color:#41768B;
}

.art-page-footer
{
margin:1em;
text-align:center;
text-decoration:none;
color:#5E6D6E;
}
/* end PageFooter */

/* begin LayoutCell */
.art-contentLayout .art-content
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 495px;
}
.art-contentLayout .art-content-sidebar1
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 742px;
}
.art-contentLayout .art-content-sidebar2
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 742px;
}
.art-contentLayout .art-content-wide
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 989px;
}
/* end LayoutCell */

/* begin LayoutCell */
.art-contentLayout .art-sidebar1
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 247px;
}
/* end LayoutCell */

/* begin LayoutCell */
.art-contentLayout .art-sidebar2
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 247px;
}
/* end LayoutCell */



.art-contentLayout li
{
float: none;
}

table.moduletable th
{
font-size: 140%;
padding: .5em 0em;
}

#footer
{
text-align: center;
}

.breadcrumbs
{
display: block;
padding: .7em 0em;
}

.contentpaneopen span.small, .contentpaneopen td.createdate, .contentpaneopen td.modifydate
{
font-size: 75%;
padding-bottom: 1em;
}

.column_separator
{
padding-left: .4em;
}

.pagination span
{
padding: 2px;
}

.pagination a
{
padding: 2px;
}

div.offline
{
background: #fffebb;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 1.2em;
padding: 5px;
}

span.pathway
{
display: block;
margin: 0 20px;
height: 16px;
line-height: 16px;
overflow: hidden;
}

/* headers */
table.moduletable th, legend
{
margin: 0;
font-weight: bold;
font-family: Helvetica,Arial,sans-serif;
font-size: 1.5em;
padding-left: 0px;
margin-bottom: 10px;
text-align: left;
}

/* form validation */
.invalid
{
border-color: #ff0000;
}

label.invalid
{
color: #ff0000;
}


/** overlib **/

.ol-foreground
{
background-color: #f6f6f6;
}

.ol-background
{
background-color: #666;
}

.ol-textfont
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

.ol-captionfont
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #f6f6f6;
font-weight: bold;
}

.ol-captionfont a
{
color: #0B55C4;
text-decoration: none;
font-size: 12px;
}

/* spacers */
span.article_separator
{
display: none;
}

.column_separator
{
padding-left: 10px;
}

td.buttonheading img
{
border: none;
}

.clr
{
clear: both;
}

div#maindivider
{
border-top: 1px solid #ddd;
margin-bottom: 10px;
overflow: hidden;
height: 1px;
}

table.blog span.article_separator
{
display: none;
}

/* edit button */
.contentpaneopen_edit
{
float: left;
}

/* table of contents */
table.contenttoc
{
margin: 5px;
border: 1px solid #ccc;
padding: 5px;
float: right;
}

table.contenttoc td
{
padding: 0 5px;
}


/* content tables */
td.sectiontableheader
{
background: #efefef;
color: #333;
font-weight: bold;
padding: 4px;
border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td
{
padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2
{
padding: 3px;
}


/* content styles */
table.contentpaneopen, table.contentpane
{
margin: 0;
padding: 0;
width: auto;
}

table.contentpaneopen li
{
margin-bottom: 5px;
}

table.contentpaneopen fieldset
{
border: 0;
border-top: 1px solid #ddd;
}

table.contentpaneopen h3
{
margin-top: 25px;
}

table.contentpaneopen h4
{
font-family: Arial, Helvetica, sans-serif;
color: #333;
}

.highlight
{
background-color: #fffebb;
}

/* module control elements */
table.user1user2 div.moduletable
{
margin-bottom: 0px;
}

div.moduletable, div.module
{
margin-bottom: 25px;
}

div.module_menu h3
{
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #eee;
margin: -23px -4px 5px -5px;
padding-left: 10px;
padding-bottom: 2px;
}

div.module_menu
{
margin: 0;
padding: 0;
margin-bottom: 15px;
}

div.module_menu div div div
{
padding: 10px;
padding-top: 30px;
padding-bottom: 15px;
width: auto;
}

div.module_menu div div div div
{
background: none;
padding: 0;
}

div.module_menu ul
{
margin: 10px 0;
padding-left: 20px;
}

div.module_menu ul li a:link, div.module_menu ul li a:visited
{
font-weight: bold;
}

#leftcolumn div.module
{
padding: 0 10px;
}

#leftcolumn div.module table
{
width: auto;
}

/* forms */
table.adminform textarea
{
width: 540px;
height: 400px;
font-size: 1em;
color: #000099;
}

div.search input
{
width: 145px;
border: 1px solid #ccc;
margin: 15px 0 10px 0;
}

form#form-login
{
text-align: left;
}

form#form-login fieldset
{
border: 0 none;
margin: 0;
padding: 0.2em;
}

form#form-login ul
{
list-style-type: none;
margin: 0;
padding: 0;
}

form#form-login ul li
{
background-image: none;
padding: 0;
}

#modlgn_username, #modlgn_passwd
{
width: 90%;
}

#form-login-username, #form-login-password, #form-login-remember
{
display: block;
margin: 0;
}

form#com-form-login
{
text-align: left;
}

form#com-form-login fieldset
{
border: 0 none;
margin: 0;
padding: 0.2em;
}

form#com-form-login ul
{
list-style-type: none;
margin: 0;
padding: 0;
}

form#com-form-login ul li
{
background-image: none;
padding: 0;
}

/* thumbnails */
div.mosimage
{
margin: 5px;
}

div.mosimage_caption {
font-size: .90em;
color: #666;
}

div.caption
{
padding: 0 10px 0 10px;
}

div.caption img
{
border: 1px solid #CCC;
}

div.caption p
{
font-size: .90em;
color: #666;
text-align: center;
}

/* Parameter Table */
table.paramlist
{
margin-top: 5px;
}

table.paramlist td.paramlist_key
{
width: 128px;
text-align: left;
height: 30px;
}

div.message
{
font-weight: bold;
font-size: 14px;
color: #c30;
text-align: center;
width: auto;
background-color: #f9f9f9;
border: solid 1px #d5d5d5;
margin: 3px 0px 10px;
padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.banneritem img
{
display: block;
margin-left: auto;
margin-right: auto;
}

/* Text advert style */

.banneritem_text
{
padding: 4px;
font-size: 11px;
}

.bannerfooter_text
{
padding: 4px;
font-size: 11px;
background-color: #f7f7f7;
text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span
{
padding: 2px;
}

.pagination a
{
padding: 2px;
}

/* Polls */
.pollstableborder
{
margin-top: 8px;
}


.pollstableborder td
{
text-align: left;

}

/* WebLinks */
span.description
{
display: block;
padding-left: 30px;
}

/* Frontend Editing*/
fieldset
{
border: 1px solid #ccc;
margin-top: 15px;
padding: 15px;
}

legend
{
margin: 0;
padding: 0 10px;
}

td.key
{
border-bottom: 1px solid #eee;
color: #666;
}

/* Tooltips */

.tool-tip
{
float: left;
background: #ffc;
border: 1px solid #d4d5aa;
padding: 5px;
max-width: 200px;
}

.tool-title
{
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text
{
font-size: 100%;
margin: 0;
}

/* System Standard Messages */
#system-message
{
margin-bottom: 20px;
}

#system-message dd.message ul
{
background: #c3d2e5 url(../../system/images/notice-info.png) 4px center no-repeat;
border-top: 3px solid #de7a7b;
border-bottom: 3px solid #de7a7b;
margin:0px;
padding-left: 40px;
text-indent:0px;
}

/* System Error Messages */
#system-message dd.error ul
{
color: #c00;
background: #e6c0c0 url(../../system/images/notice-alert.png) 4px center no-repeat;
border-top: 3px solid #DE7A7B;
border-bottom: 3px solid #DE7A7B;
margin: 0px;
padding-left: 40px;
text-indent: 0px;
}

/* System Notice Messages */
#system-message dd.notice ul
{
color: #c00;
background: #efe7b8 url(../../system/images/notice-note.png) 4px center no-repeat;
border-top: 3px solid #f0dc7e;
border-bottom: 3px solid #f0dc7e;
margin: 0px;
padding-left: 40px;
text-indent: 0px;
 }

#syndicate
{
float: left;
padding-left: 25px;
}

/* Component Specific Fixes */

#component-contact table td
{
padding: 2px 0;
}

.breadcrumbs img
{
margin: 0px;
padding: 0px;
border: 0px;
}

.mceToolbarTop {
white-space: normal;
}

.mceEditor
{
background: none;
}

#archive-list
{
list-style-type: none;
margin: 0px;
padding: 0px;
}

#archive-list li
{
list-style-type: none;
background-image: none;
margin-left: 0px;
padding-left: 0px;
}

#navigation
{
text-align: center;
}

.article h3 img
{
border: none;
display: inline;
margin: 0;
padding: 0;
}

.art-Footer-text .moduletable
{
border: none;
margin: 0;
padding: 0;
}

.pollstableborder td {
vertical-align: middle;
}

.img_caption.left
{
float: left;
margin-right: 1em;
}

.img_caption.right
{
float: right;
margin-left: 1em;
}

.img_caption.left p
{
clear: left;
text-align: center;
}

.img_caption.right p
{
clear: right;
text-align: center;
}

.img_caption img
{
margin: 0em;
}

.contentheading
{
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-align: left;
  color: #41768B;
}
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: Как сделать шаблон "резиновым" ?
« Ответ #1 : 10.05.2011, 22:26:09 »
Как сделать шаблон "резиновым" ? сверстать его руками, а не Артистером
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: Как сделать шаблон "резиновым" ?
« Ответ #2 : 10.05.2011, 22:27:39 »
Код
.art-Sheet
{
position:relative;
z-index:0;
margin:0 auto;
width: 1000px;
min-width:37px;
min-height:37px;
}
Смотрите прочие элементы фиксированной ширины, заменяйте на 100%
*

Taatshi

  • Глобальный модератор
  • 5238
  • 478 / 1
  • Верстаем и кодим. Обращайтесь ;)
Re: Как сделать шаблон "резиновым" ?
« Ответ #3 : 10.05.2011, 23:08:57 »
Смотрите прочие элементы фиксированной ширины, заменяйте на 100%

Эт Вы зря, он сейчас и все менюшки на 100% поставит, и контент... что получится - одному богу известно)))
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

Oxlamon

  • Давно я тут
  • 746
  • 95 / 4
Re: Как сделать шаблон "резиновым" ?
« Ответ #4 : 10.05.2011, 23:12:44 »
Как сделать шаблон "резиновым" ? сверстать его руками, а не Артистером

Воистину так!

Кстати, в связи с избыточностью кода артистера "зарезинить" его может оказаться не так-то просто. Правок будет - кошмар как много!
В отличии от, скажем, приведения к той же валидности, про которую мы говорили в другом топике.
Тем более, что ТС, похоже, затрудняется с подобными вопросами.

Иначе скоммуниздил бы себе третью версию (сужу по 2.2.0.16836) продукта, да и сделал бы там свою резину.
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: Как сделать шаблон "резиновым" ?
« Ответ #5 : 10.05.2011, 23:26:10 »
Эт Вы зря, он сейчас и все менюшки на 100% поставит, и контент... что получится - одному богу известно)))
Это будет проще чем выбирать и угадывать фиксированные элементы. Хотя ТС надеюсь не глупее паровоза и сообразит, что нужно резинить только самые широкие элементы
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: Как сделать шаблон "резиновым" ?
« Ответ #6 : 10.05.2011, 23:27:00 »
Воистину так!

Кстати, в связи с избыточностью кода артистера "зарезинить" его может оказаться не так-то просто. Правок будет - кошмар как много!
В отличии от, скажем, приведения к той же валидности, про которую мы говорили в другом топике.
Тем более, что ТС, похоже, затрудняется с подобными вопросами.

Иначе скоммуниздил бы себе третью версию (сужу по 2.2.0.16836) продукта, да и сделал бы там свою резину.
Тогда уж проще макродрим взять, есть же для него что то для Joomla
*

Oxlamon

  • Давно я тут
  • 746
  • 95 / 4
Re: Как сделать шаблон "резиновым" ?
« Ответ #7 : 10.05.2011, 23:50:17 »
Тогда уж проще макродрим взять, есть же для него что то для Joomla

Да, есть для него. Это обсуждалось недавно: http://joomlaforum.ru/index.php/topic,159545.msg881758.html#msg881758
Я там ссылку привёл на сайт разработчиков расширения для DW.

"макродрим" - это же про него?

Очень удобная штуковина для вставки типовых участков кода в шаблон: вызов модулей, условия отображения и т.п.
Это в случае, если из готовой вёрстки делать шаблон.

Я не переделывал никогда вёрстку артистера. Глядя на неё, мне кажется, что игра не стоит свеч.

Но, кому что проще...
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: Как сделать шаблон "резиновым" ?
« Ответ #8 : 10.05.2011, 23:56:31 »
Оно самое. Хоть и заполняет страницу тупым табличным кодом, и избытка в нем не меньше, но все ж в сравнении с артистером смотрится более выгодно  в плане разборчивости
*

Oxlamon

  • Давно я тут
  • 746
  • 95 / 4
Re: Как сделать шаблон "резиновым" ?
« Ответ #9 : 11.05.2011, 01:02:32 »
Оно самое. Хоть и заполняет страницу тупым табличным кодом, и избытка в нем не меньше, но все ж в сравнении с артистером смотрится более выгодно  в плане разборчивости

Упс... А почему табличным?
Всё divной красоты! ))))))))))

Тут вопрос в задаче ТС-а. Если он делает шаблон в первый и последний раз в жизни, то мой ответ выше. Артистер 3 ему в помощь.
Если с прицелом на перспективу, то может открыть его сохранённую копию в DW и самостоятельно заверстать его как душе угодно. В этом случае простого ответа на вопрос "как" - нет.
Разве что - CSS... )))
*

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: Как сделать шаблон "резиновым" ?
« Ответ #10 : 11.05.2011, 01:35:44 »
Упс... А почему табличным?
Всё divной красоты! ))))))))))

Тут вопрос в задаче ТС-а. Если он делает шаблон в первый и последний раз в жизни, то мой ответ выше. Артистер 3 ему в помощь.
Если с прицелом на перспективу, то может открыть его сохранённую копию в DW и самостоятельно заверстать его как душе угодно. В этом случае простого ответа на вопрос "как" - нет.
Разве что - CSS... )))
Ты давно встречал случай, чтобы шаблон изготавливался в конечном варианте? Даже если изначально так и рассчитывается, то впоследствии он все равно будет изменяться. Хотя бы по причине появления все новых и более лучших технологий.

А макродрим сколько видел, везде отличается табличной версткой. Есть примеры с блочной?
*

Oxlamon

  • Давно я тут
  • 746
  • 95 / 4
Re: Как сделать шаблон "резиновым" ?
« Ответ #11 : 11.05.2011, 01:48:25 »
Шаб может эволюционировать вместе с движком, конечно.

А макродрим сколько видел, везде отличается табличной версткой. Есть примеры с блочной?

Хм... В дриме если создавать новый файл, то он по умолчанию идёт уже с блочной разметкой и lorem ipsum-ом, а также набором стилей по умолчанию.
Хотя это и не к чему. Лучше использовать свои "болванки". Всё остальное - также, от себя. Не знаю, откуда в дриме таблицы если только их специально не вставлять.
Но это, правда, другая тема )))
*

Vitalson

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: Как сделать шаблон "резиновым" ?
« Ответ #12 : 26.02.2013, 01:55:22 »
Подскажите, как зарезинить?
Код
/******************************************
***          YT Framework: CSS          ***
*******************************************/
body{color:#666;font-size:14px;}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  outline: 0 \9;
  /* IE6-9 */
}
a:focus,
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
.btn:focus  {
outline: 0;
}

body.contentpane{
padding:20px;
}
body.contentpane .pull-left{
float:none;
}
body.contentpane .mailto-close{
float:right;
}
textarea,
input[type="text"],
input[type="email"],
input[type="password"]{line-height: 16px;}
body{color:#333;font:14px;}

.yt-main{margin:0 auto;}
#system-message{margin: 0;}
a {color: #0095fe;}
body.sj_joomla3 a:hover{color: #f02624;}
#yt-totop {
    background: url(../images/up-arrow.png) no-repeat center center rgba(0, 0, 0, 0.5);
    border-radius: 5px 5px 5px 5px;
    bottom: 10px;
    height: 45px;
    overflow: hidden;
    position: fixed;
    right: 10px;
    width: 45px;
    z-index: 40;
text-indent:-999em;
}
#yt-totop:hover{background-color:rgba(0, 0, 0, 0.8);}
#yt_wrapper{overflow:hidden;}
#system-message{margin:0 ;}

/* Tooltip voor de editor button */
.item-title .badge {
    padding: 2px 9px;
vertical-align:middle
}
.tip-wrap .tip {background: #ffc;border: 2px solid #ccc;padding: 5px;font-size: 12px;max-width: 250px;z-index: 80;position: relative;}
.tip-title{font-weight: bold;}

div.yt-main{/*background-color:#FFF;*/ margin:0 auto;}

/****** Pattern *****/
.pattern{background-repeat:repeat;background-position:left top;}
.pattern_h1{background-image:url(../images/pattern/pattern6.png);}
.pattern_h2{background-image:url(../images/pattern/pattern8.png);}
.pattern_h3{background-image:url(../images/pattern/pattern3.png);}
.pattern_h4{background-image:url(../images/pattern/pattern5.png);}
.pattern_h5{background-image:url(../images/pattern/pattern7.png);}

.pattern_1{background-image:url(../images/pattern/pattern1.png);}
.pattern_2{background-image:url(../images/pattern/pattern2.png);}
.pattern_3{background-image:url(../images/pattern/pattern3.png);}
.pattern_4{background-image:url(../images/pattern/pattern4.png);}
.pattern_5{background-image:url(../images/pattern/pattern5.png);}


/****** Layout *****/
/* left-main-right */
.layout-left-main-right #content_right{float:right;}

/* left-right-main */

/* main-left-right */




/****** Module *****/
div.module_menu,
div.module{margin:0 0 15px;}
div.module div.module-inner{}

.module_menu h3.title,
.module h3.title{
background:#174577 url(../images/h3-title.png) repeat top left;
line-height:35px;
font-size:18px;
font-family:'Open Sans', serif;
color:#FFF;
border-radius:3px;
font-weight:normal;
margin:0 ;
padding: 0 10px;
}
div.module div.module-content{padding: 10px 10px 0;background:#f6f6f6;}
div.module.blank div.module-content{padding: 0;background: none;}
/* icon Style */

div.style-icon h3.title .icon{background:url(../images/icons/style-icon.png) no-repeat right top;margin:0 -5px;display:block;height:35px;width:42px;float: right;}
div.style-icon .module-content{background:#fff;border:1px solid #ccc;border-radius:3px;padding:10px 10px 0;}
div.joomla h3.title > span.icon{background-position: 0 0;}
div.help h3.title > span.icon{background-position: 0 -36px;}
div.mouse h3.title > span.icon{background-position: 0 -70px;}
div.photo h3.title > span.icon{background-position: 0 -105px;}
div.application h3.title > span.icon{background-position: 0 -140px;}
div.email h3.title > span.icon{background-position: 0 -175px;}

div.module_menu .module-bottom,
div.module .module-bottom{margin:0 10px;height:5px;background:#e5e5e5;}

/* Suffix statistics */
.module.statistics .module-content{
background:none;
padding:0 0;
}
/* Suffix wonline */
.module.wonline h3 span{
background-position:right -70px;
}
/* Suffix gallery */
.module.gallery h3 span{
background-position:right -105px;
}
/* Suffix clear */
.module.clear{
clear:none;
}
.module.clear h3{
background:none;
}
.module.clear h3 span{
background:none;
}
.module.clear .module-content{
background:none;
padding:0 0;
}
.module.clear .module-bottom{
background:none;
height:0px;
}

/* Bg Style */
div.module.bg1{}
div.module.bg1 h3.title{background:#0486e4;border-radius: 3px 3px 0 0;}
div.module.bg1 div.module-content{background:#cccccc;border-radius:0 0 3px 3px;padding: 10px;}
div.module.bg1 div.custom {background: #fafafa;border-radius: 4px;padding: 10px 10px 0;box-shadow: 0 1px 2px #999,0 0 0 1px #fff inset;overflow: hidden;}

/* Suffix _menu */
div.module_menu .module-content{background: none;border: none;padding: 0;}
.module_menu h3 span{background-position:right -140px;}
.module_menu .module-content{padding:0 0;border-radius:3px;}
.module_menu ul.menu.nav{margin:0 0;}
.module_menu ul.menu li{margin-top:1px;}
.module_menu ul.menu li > a,
.module_menu ul.menu li > .separator{
padding:3px 10px 3px 15px;
background:url("../images/icons/list-menu.png" ) no-repeat 7px 10px #f6f6f6;
border:1px solid #f6f6f6;
color:inherit;
border-radius:2px;
display:block;
}
.module_menu ul.menu li.active > a,
.module_menu ul.menu li.active > .separator{
background:url("../images/icons/list-menu.png" ) no-repeat 7px -19px #fff;
}

.module_menu ul.menu li > a:hover,
.module_menu ul.menu li > .separator:hover{
background-color:#FFF;
background-position: 7px -19px;
color:#0095fe;
}
.module_menu ul.nav-child {margin: 0 10px;}
.module_menu ul.nav-child  li > a,
.module_menu ul.nav-child  li > .separator{
border: none;
background-color: transparent;
background-position: 3px -75px;
}
.module_menu ul.nav-child  li > a:hover,
.module_menu ul.nav-child  li > .separator:hover,
.module_menu ul.nav-child  li.active > a,
.module_menu ul.nav-child  li.active > .separator{
background-position: 3px -51px;
background-color: transparent;
}
/* Badge  Style*/
div.style-badge{border: 1px solid #ccc;border-radius: 3px;}
div.style-badge h3.title{background: none;color: inherit;line-height: 50px;margin: 5px 0;}
div.style-badge div.module-content{background: none;}
div.style-badge div.module-bottom{display: none;}
div.style-badge h3.title span.badge{
width:50px;height:50px;margin: 0 5px 0 0;border-radius: 50px;background: #666;display: block;float: left;
position: relative;box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) inset ; padding: 0;
}
div.style-badge h3.title span.badge:before{
content: "";
width:32px;height: 20px;
display: block;
position: absolute;left: 12px;top: 16px;
background: url(../images/icons/badge.png) no-repeat 0 0 ;

}
div.hot h3.title span.badge{background: #ff7f03;}
div.top h3.title span.badge{background: #006401;}
div.new h3.title span.badge{background: #f02624;}
div.cool h3.title span.badge{background: #c71585;}
div.hot h3.title span.badge:before{background-position: 0 -100px;}
div.top h3.title span.badge:before{background-position: 0 -50px;}
div.new h3.title span.badge:before{background-position: 0 0;left: 10px;}
div.cool h3.title span.badge:before{background-position: 0 -150px;left: 10px;}

/* Border Style*/
div.module.border1{}
div.module.border1 h3.title{background:none;text-align:center;color:inherit;}
div.module.border1 h3.title span{background:none;margin:auto;}
div.module.border1 div.module-content{background:none;border:1px solid #CCC;border-radius:3px;}

div.module.border2{}
div.module.border2 h3.title{background:none;text-align:center;border-radius: 3px;border:1px solid #ccc;box-shadow: inset 0 0 5px #ddd; color: inherit;margin-bottom: -1px;}
div.module.border2 h3.title span{background:none;margin:auto;}
div.module.border2 div.module-content{background:none;border:1px dotted #CCC;border-radius:3px;}

div.module.border3{}
div.module.border3 h3.title{background:#174577;text-align:center;border-radius: 3px;box-shadow: inset 0 0 3px rgba(0,0,0,0.5); color: #fff;}
div.module.border3 h3.title span{background:none;margin:auto;}
div.module.border3 div.module-content{background:none;border:3px solid #CCC;border-radius:3px;}

/****** Component *****/
#yt_component{margin-bottom: 20px;}
#yt_component .component-inner{border:1px solid #CCC;padding:10px 25px;border-radius: 3px;}
#yt_component .component-inner2:after,
#yt_component .component-inner2:before{clear: both;display: block;content: "";}

/*Featured Articles*/
.items-leading{padding:0 0 10px;}
.items-row .item ,
.items-leading > div.item{border-top: 1px dashed #ddd;padding-bottom: 20px}
.items-leading > div.item:first-child{border-top:none}
.items-row:first-child .item{border-top: none;}

h2.item-title{font-size:20px;line-height:24px;font-family:'Open Sans', serif;font-weight:normal;}
.blog .item-image, .blog-featured .item-image{background:url(../images/loading.gif) no-repeat center center;text-align:center;}
.pagenavcounter{
margin:0 0 10px;
font-weight:bold;
}
.article-index{
margin:0 0 0 10px;
}
div.blog-featured div.article-text, div.blog div.article-text{display: block; position:relative}
div.article-info{font-size:85%;padding-bottom:15px;padding: 4px}
div.blog-featured div.article-text div.article-info,
div.blog div.article-text div.article-info{position: absolute;top:20px;background: rgba(255,255,255,0.9);box-shadow: 0 1px 0 #fff;z-index: 3;}
div.blog-featured div.article-text div.article-info:after,
div.blog div.article-text div.article-info:after{
content: "";
border-width: 16px ;border-style: solid;
border-color: transparent transparent rgba(255,255,255,0.9) rgba(255,255,255,0.9) ;
position: absolute;right: -32px;top:0;
box-shadow: 0 1px 0 #fff;
}
div.img-intro-left{margin-bottom: 15px;}
.com_content .page-header{
margin:10px 0 0;
border:none;
}
.page-header h2{
margin-bottom:0px;
}
div.article-info > div,dl.article-info > dd{padding: 0 10px 0 0;display:inline-block; float:left; line-height: 24px;margin: 0;}
div.article-info > div:last-child{padding: 0;}
div.item-page .page-header{padding:0px;border: none; margin-bottom:15px; font-size:85%; color:#999;}
.article-info-term{
font-size:125%;
}
div.item-page div.article-info{
border-bottom:1px dashed #ddd;
margin:0 0 15px 0;
padding:0 0;
}
.element-invisible{
line-height:30px;
vertical-align:middle;
margin:0 8px;
}
div.item-page .pagenav{
padding-top:20px;
border-top:1px dashed #CCC;
}
.item-page .pull-left.item-image{
float:none;
margin:0 0 10px 0;
}
.com_content .items-row .pull-right{margin:20px 0 0;}
.com_content .items-row.row-0 .pull-right{margin:10px 0 0;}
.item-image,.img-intro-left{margin: 0 15px 20px 0;position: relative;}
.item-image:after,.img-intro-left:after{
content: "";
position: absolute;width:100%;height: 100%;z-index: 1;left: 0;top:0;
box-shadow: 1px 1px 3px #a1a1a1 inset;
background-image: -moz-repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(255,255,255,.1) 2px, rgba(255,255,255,.05) 4px);
background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(255,255,255,.1) 1px, rgba(255,255,255,.05) 2px);
}
.icon-calendar{
background: url(../images/icons/ico-sprites.png) no-repeat 0 0;
float: left;margin: 0 5px 0 0;width:18px;height: 21px;
}
/*Pagination*/
.pagination{margin:20px 0 10px;height:auto}
.pager a, .pager span{border-radius: 5px;padding: 3px 10px;background: #eee;}

/*Category Blog*/
div.blog{}
dl.article-info{margin: 0;}

/*Items Blog*/
div.item-page{}
div.item-page h2.item-title{font-size: 25px;line-height: 30px;}
div.item-page .pull-left{margin-right: 15px;}
div.item-page + p:first-child{color: #154575;}

/*Pagination*/
.pagination ul{border-radius: 0;box-shadow: none;display: table;margin: 0 auto;}
.pagination ul li{display: inline-block;margin: 0 2px;}
.pagination ul > li > a, .pagination ul > li > span{line-height: 25px;padding: 0 10px;border: 1px solid #ddd;}
.pagination ul > li:first-child > a, .pagination ul > li:first-child > span{border-radius: 0;}
.pagination ul > li:last-child > a, .pagination ul > li:last-child > span{border-radius: 0;}
.pagination ul > li > a:hover, .pagination ul > .active > a, .pagination ul > .active > span{border: 1px solid #6bb1e3;}

/****** Block #yt_header *****/
.no-slideshow #yt_header{
border-bottom:1px solid #CCC;
margin:0 0 20px 0;
}
#yt_header{margin:0 0;}
#yt_logoposition{height:85px;position:relative;}
#yt_logoposition h1{margin:0 0;}
#yt_logoposition h1.logo a{position:absolute;height:98px;width:268px;top:30px;left:25px;}

#position-0 .search{margin:35px 0 0;position:relative;text-align:right;}
#position-0 .search button{
background:url(../images/search-btn.png) no-repeat center center;position:absolute;top:0px;
right:5px;text-indent:-999em;border:none;box-shadow:none;
}
input.search-query{border-radius:3px;border-color:#fbfbfb;box-shadow: none;color:#999;
border-color: #ccc;box-shadow: 1px 1px 2px #ddd inset;
}
#position-0 input.search-query{padding:4px 6px;position: absolute;right: 0;top: 0;}
#yt_menuposition{margin-bottom:15px;}
#yt-mobilemenu{display:none;}

/****** Block Breadcrumb  *****/
ul.breadcrumb {background: none;padding: 0;margin-bottom: 15px;}
ul.breadcrumb .divider{}
/****** Block #yt_spotlight *****/


/****** Block #content *****/
#content{margin:0 0 10px 0;}
dl.stats-module{margin:0 ;}
dl.stats-module dt{
background:#f6f6f6 url(../images/statistics-dt.gif) no-repeat right center;
float:left;
width:110px;
height:28px;
line-height:28px;
font-weight:normal;
padding:0 10px 0 15px;
margin:1px 0 0;
border-radius:3px;
}
dl.stats-module dd{
background:#f6f6f6;
height:29px;
line-height:29px;
margin:0 0;
padding:0 10px;
margin:1px 0 0;
border-radius:3px;
text-indent: 5px;
}
form#login-form{margin:10px 0;}
form#login-form .input-small{width:115px;}

/****** Block #yt_spotlight *****/
#yt_spotlight{margin:0 0 10px 0;}
#yt_spotlight .custom p.img-wrap{margin-top:5px;min-height:135px;}
#yt_spotlight div.module:hover .module-bottom{background-color: #ccc;}
#yt_spotlight div.module:hover a.readmore{background-color: #195392;border-color: #174577;color: #fff;}

#yt_spotlight2{border-top:5px solid #002c5c;color:#CCC;}
#yt_spotlight2 .yt-main{border-top: 1px solid #595959;}
#yt_spotlight2 a{color:#b8b8b8;}
#yt_spotlight2 a:hover{color:#FFF;text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);}
#yt_spotlight2 .module{margin-bottom:0px;padding:15px 0 0;}
#yt_spotlight2 .row > div{background:url(../images/spotlight2-module-bg.png) repeat-y right top;}
#yt_spotlight2 .row > div.position-last{background:none;}
#yt_spotlight2 .module h3{background:none;padding: 0;}
#yt_spotlight2 .module .module-content{background:none;padding:10px 0;}
#yt_spotlight2 .module .module-content ul.menu{margin: 0 ;}
#yt_spotlight2 .module .module-content ul.menu li a,
#yt_spotlight2 .module .module-content ul.menu li .separator{
background:url(../images/ico-tick.png) no-repeat left 4px;
padding:3px 15px;
margin:0 20px 0 0;
/*border-top:1px dashed;
border-bottom:1px dashed;
border-color:transparent;*/
}
#yt_spotlight2 .module .module-content ul.menu li a:hover,
#yt_spotlight2 .module .module-content ul.menu li .separator:hover{border-color:#6a6a6a;background-position:left -14px;text-shadow: 0 0 6px rgba(255,255,255,0.6);}

/*Mod Slideshow*/
#yt_slideshow{position: relative; margin:0 0 10px 0;}
#yt_slideshow:after{
content: "";
width:100%;height: 220px;
position: absolute;bottom:0px;
border-top: 1px solid #CCCCCC;
}
#yt_slideshow .row{
z-index:1;
position:relative;
}
#slide_show div.module .module-bottom{margin-top:-3px;height: 8px;}
div.carousel{margin: 0;overflow: hidden;}
div.carousel-inner{border-radius: 4px;}
div.carousel-caption{width:60%;height: 150px;top:100px;left: 100px;right: auto;background: none;padding: 0 10px 0 0;}
div.carousel-caption h4{font-size: 300%;font-family: "Impact";line-height: 100%;margin-bottom: 20px;text-shadow: 1px 1px 1px #666;}
div.carousel-caption p{font-size: 120%;font-family: 'Open Sans' ;line-height: 25px;}
a.carousel-control{
top:49%;width:44px;height: 44px;opacity: 1;border: none;border-radius: 0;left: -50px;
background: url("../images/icons/slide-arrow.png") no-repeat 0 0;
-webkit-transition: left 0.35s ease-in-out  0s,right 0.35s ease-in-out  0s;
-moz-transition: left 0.35s ease-in-out  0s,right 0.35s ease-in-out  0s;
-o-transition: left 0.35s ease-in-out  0s,right 0.35s ease-in-out  0s;
-ms-transition: left 0.35s ease-in-out  0s,right 0.35s ease-in-out  0s;
transition: left 0.35s ease-in-out  0s,right 0.35s ease-in-out  0s;
}
a.carousel-control:hover{opacity: 1;}
a.carousel-control.right{background-position: 100% 0;right: -50px;}
a.carousel-control.left:hover{background-position: 0 -49px;}
a.carousel-control.right:hover{background-position: 100% -49px;}
div.carousel:hover a.left{left: 30px;}
div.carousel:hover a.right{right: 30px;}

div.slide-2 div.carousel-caption{width:1000px;text-align: center;}
div.slide-2 div.carousel-caption h4{font-size: 400%;}

ul.blog {margin: 0;}
ul.blog li{list-style:none;margin:10px 0 0;}
ul.blog li:first-child{margin: 0;}
ul.blog li a:hover{text-decoration:none;}

ul.social{margin:0;}
ul.social li{list-style:none;display:inline;margin:0 0 0 1px;}
ul.social li:first-child{margin:0 ;}
ul.social li a{
background:url(../images/social-bg.png) no-repeat left top;
height:40px;
width:40px;
display:inline-block;
}
ul.social li a span{
background:url(../images/social-ico.png) no-repeat left top;
display:inline-block;
text-indent:-999em;
height:31px;
width:31px;
margin:3px 0 0 4px;
-moz-transition: background-position 0.2s linear 0s;
-webkit-transition: background-position 0.2s linear 0s;
-o-transition: background-position 0.2s linear 0s;
transition: background-position 0.2s linear 0s;
}
ul.social li a.twit span:hover{background-position:left -31px;}
ul.social li a.face span{background-position:left -61px;}
ul.social li a.face:hover span{background-position:left -92px;}
ul.social li a.fk span{background-position:left -123px;}
ul.social li a.fk:hover span{background-position:left -154px;}
ul.social li a.rss span{background-position:left -185px;}
ul.social li a.rss:hover span{background-position:left -216px;}
ul.social li a.gplus span{background-position:left -247px;}
ul.social li a.gplus:hover span{background-position:left -278px;}

form.newsletter{position:relative;}
form.newsletter input{
background:#ededec;
color:#999;
border-radius: 4px;
padding:5px ;
height: 21px;
border: none;
width:100%;
}
form.newsletter button.btn{
position:absolute;
right:3px;
top:0px;
background:url(../images/bt-mail.png) no-repeat right center;
border:none;
box-shadow:none;
text-indent:-999em;
height:31px;
width:42px;
border-radius:0px;
}
.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child{max-width: 27px;}
.add-on [class^="icon-"], .add-on  [class*=" icon-"]{
margin:auto;
}

/****** Block #yt_footer *****/
#yt_footer{border-top:1px dashed #666666;color:#CCC;border-color: rgba(255,255,255,0.25);}
#yt_copyrightposition{text-align:center;padding: 20px 0;}
#yt_copyrightposition a:hover{text-decoration:underline;}

/* SJ BasicNews */
div.latestnews.bg1 div.custom{background: none;box-shadow: none;border-radius: 0;padding: 0;}
div.latestnews .bsn-wrap .post{border-radius: 4px;box-shadow: 0 1px 2px #999999, 0 0 0 1px #FFFFFF inset;background: #fbfbfb;padding: 8px;position: relative;overflow: hidden;}
div.bsn-wrap.theme1 div.item a.more{
width:20px;height: 20px;line-height: 18px;background: #f02624;display: block;
border-radius: 20px;

position: absolute;right: -15px;bottom: 10px;
}
div.bsn-wrap.theme1 div.item a.more:after{
font-family: 'fontello';content: '\E75E';text-align: center;color: #fff;
left: 9px;position: absolute;
}
div.bsn-wrap.theme1 div.item:hover{box-shadow: 0 2px 0 #999999,0 0 0 1px #FFFFFF inset;background: #fff;}
div.bsn-wrap.theme1 div.item:hover a.more{right: 10px;}

div.bsn-wrap.default{margin: 0 -10px;}
div.bsn-wrap.default h2 > a{color: #666;}
div.bsn-wrap.default h2 > a:hover{color: #0095FE;}
div.bsn-wrap.default div.post {
background: url(../images/most_views.png) repeat-x left bottom;
padding: 0 10px 5px;margin: 10px 0 0; overflow: hidden;
}
div.bsn-wrap.default div.post:first-child{margin-top: 0;}
div.bsn-wrap a.more-view{clear: both;float: right;font-size: 88%;position: relative;z-index: 10;}
div.bsn-wrap.default div.post  a.more-view:before{
content: "+ View";text-align: center;line-height: 25px;color: #fff;
width:50px;height: 25px;display: block;z-index: 1;padding: 0;
background: #f02624;position: absolute;right: -72px;top:0;
}
div.bsn-wrap.default div.post:hover  a.more-view:before{right: -13px;}
span.wraphover{
content: "";right:0%;top:0;position: absolute;margin: 7%;opacity: 0;
width:84%;height: 84%; font-family: 'fontello';
background:rgba(0,0,0,0.5);color: #eee;text-align: center;
}
span.wraphover:after{content: "+";line-height: 50px;font-size: 24px;}

/*Hover*/
div.bsn-wrap.default div.post:hover h2 > a{color: #0095FE;}
div.bsn-wrap.default div.post:hover .bsn-image .wraphover{opacity: 1;}

/*Custom Class*/
.btn-group > .btn{padding: 4px 10px;}
.img-wrap.center{text-align:center;}
.icon-cog{margin:0 5px 0 0;}
ul.list-imageitem{margin:0 0 10px ;overflow: hidden;}
ul.list-imageitem li{list-style:none;float:left;margin:4px;overflow: hidden;}
ul.list-imageitem li > a{display: block;position: relative;}
ul.list-imageitem li > a:after{
content: "";right:0%;top:0;position: absolute;margin: 10%;opacity: 0;
width:80%;height: 80%;content: "\E802"; font-family: 'fontello';font-size: 24px;
background:rgba(0,0,0,0.5);color: #eee;text-align: center;line-height: 70px;
}
ul.list-imageitem li > a:hover:after{opacity: 1;}
ul.list-imageitem li > a img{
height:90px;
width:90px;
}

.modal-body{text-align:center;}
a.readmore{
display: inline-block;box-shadow: 1px 1px 2px #DDDDDD;
padding: 3px 5px 3px 12px;border-radius: 4px;border: 1px solid #dfdfdf;border-bottom-color: #c9c9c9;
background: url(../images/readmore.png) repeat-x left bottom;
}
body.sj_joomla3 a.readmore:hover{background-color: #195392;border-color: #174577;color: #fff;}
body.sj_joomla3 a.readmore:focus{box-shadow: 0 1px 1px #e7e7e7,inset 1px 2px 3px #333;background-color: #195392;border-color: #174577; }
.font-fontello {font-family: 'fontello';}

/* Text Alignment */
.clear{clear: both;}
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }

[class^="more-"]:before,
[class*=" more-"]:before {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  line-height: 1em;
}
.more-open:before { content: '\E75E'; } /* '' */

/****** Joomla Pages *****/
/*Contact us*/
div.contact{margin-bottom: 1em;overflow: hidden;}
#contact-form{margin: 0;}
#contact-form dl dd{margin:0; }
#contact-form dl dt{font-weight: normal;margin: 0;}
#contact-form legend{font-size: 13px;font-weight: normal;}
#contact-form dd input[type="text"],
#contact-form dd input[type="email"]{width:280px;}
#contact-form dd textarea{width:280px;height: 100px;}
.jicons-text{font-size:100%;font-weight:bold;display: inline-block;}
#jform_contact_email_copy-lbl{float: left;margin: 5px 5px 0 0;}
div.panel-infor,
div.panel-form {
width: 65%;float: left;
font-size: 13px;
padding: 0 20px;
}
div.panel-form {width:35%;}
div.contact > div.panel-infor{padding: 0 15px 0 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.contact > div.panel-form{padding: 0 0 0 15px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.contact > h3{
margin: 0 0 15px;
font-size: 130%;font-weight: normal;
text-transform: uppercase;
border-bottom: 1px solid #C4C4C4;
box-shadow: 0 1px 0 #FFFFFF;
}
div.panel-form > h3{display: none;}
div.contact-image{margin: 0 0 15px 0;width:100%;position: relative;}
div.contact-image:after{
content: "";
position: absolute;width:100%;height: 100%;z-index: 1;left: 0;top:0;
box-shadow: 1px 1px 3px #a1a1a1 inset;
background-image: -moz-repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(255,255,255,.1) 2px, rgba(255,255,255,.05) 4px);
background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(255,255,255,.1) 1px, rgba(255,255,255,.05) 2px);
}
.contact-address address {display: inline;}
div.contact-address{margin-top: 1em;}
div.contact-contactinfo >p {margin: 5px 0;}
div.contact-map{
overflow: hidden;padding: 1px;height: 260px;display: block;
border: 4px solid #ccc;background: #ddd;border-radius: 5px;
box-shadow: 0 0 0 1px #fff inset;
}
     

А то открывая этот шаблон сайта на Mac Book он все правые колонки сваливает вниз и получается не очень эстетично. Ну даже сделать окно не на всю страницу в любом браузере, получается такая петрушка.

Пробовал писать буржуям создателям, но они наверное русской речи не распознали :(

Помогите добрым советом.  !
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать кнопку формы аккаунта?

Автор Evgen Kulibin

Ответов: 0
Просмотров: 45
Последний ответ 22.04.2021, 22:15:06
от Evgen Kulibin
Как сделать плавающий модуль?

Автор THeCMeX

Ответов: 2
Просмотров: 187
Последний ответ 08.03.2021, 22:21:01
от Flexderection
Как сделать?

Автор Twins

Ответов: 1
Просмотров: 84
Последний ответ 12.02.2021, 10:13:54
от AlexB
[Решено] Как сделать чтобы фотография открылась в отдельном окне?

Автор a-two

Ответов: 11
Просмотров: 506
Последний ответ 03.11.2020, 16:57:40
от Nikolay89
Как сделать плавающий блок/модуль. Пример есть!

Автор Good_user

Ответов: 8
Просмотров: 10724
Последний ответ 04.04.2020, 13:49:11
от jan_dax