/***************************************************
    CSS file for Stipic Constructa
    Author: WEB Marketing (www.wem.hr)
    Media: Screen
***************************************************/


*               { margin: 0; padding: 0; }
html            { overflow-y: scroll; }
body	        { font: 12px/18px Arial, Verdana, sans-serif; color: #484428; background: #4e6c8b; }
:root           { overflow-y: scroll; }
h1, h2, h3      { font-weight: bold; color: #7b7c7e; }

a               { color: #467491; text-decoration: none; }

a:hover,
a:active,
a:focus         { text-decoration: underline; }

fieldset,
a img       { border: 0; }

table       { text-align: left; border-collapse: collapse; border-spacing: 0; }

td,
th          { vertical-align: top; text-align: left; }

legend                  { white-space: normal; }
select, input, textarea { outline: 0; font: 12em/18px Arial, sans-serif; }

/* LAYOUT */
#layout			    { width: 875px; padding: 0 40px 0 45px; margin: 0 auto; position: relative; background: #fff url(../images/css/body-bkg.gif) no-repeat 50% 0; }
#content                    { clear: both; position: relative; padding-top: 35px; z-index: 10; }
#main-content               { clear: both; min-height: 200px; height: auto !important; height: 200px; padding-bottom: 20px !important; text-align: justify; }

#main-content div.news-intro        { float: right; width: 417px; padding-top: 2px; }
#main-content div.odd               { float: left; clear: both; margin-left: 0; display: inline; }

#content #article-container .grid          { float: right; width: 417px; }
#content #article-container .first-child   { float: left; clear: both; display: inline; }


/* HEADER */
#header                     { position: relative; height: 89px; z-index: 20; }

#logo                       { float: left; width: 178px; height: 47px; background: url(../images/interface/logo.gif) no-repeat 0 0; margin: 42px 0 0 0; display: inline; }
#logo a                     { display: block; width: 178px; height: 47px; overflow: hidden; text-indent: -9999px; }

#languages-container                { position: absolute; top: 4px; left: 266px; }
#languages-container ul             { float: left; list-style: none; }
#languages-container li             { float: left; font-size: 10px; margin-left: 22px; display: inline; }
#languages-container .first-child   { margin-left: 0; }
#languages-container li a           { color: #fff; }

#languages-container li a:hover,
#languages-container li a:active,
#languages-container li a:focus     { }

#languages-container li.active a    { color: #accfe5; }

/* MAIN NAVIGATION */
#navigation                 { float: left; clear: both; margin: -51px 0 0 267px; display: inline; width: 608px; }
#navigation ul              { float: left; width: 100%; list-style: none; }
#navigation li              { float: left; margin: 0 0 0 49px; display: inline; font-size: 19px; line-height: 21px; position: relative; }
#navigation li.first-child  { margin-left: 0; }
#navigation a               { display: block; text-align: center; padding: 0; color: #467491; text-decoration: none; outline: none; text-transform: uppercase; text-indent: -9999px; overflow: hidden; background-repeat: no-repeat; background-position: 0 0; height: 18px; cursor: pointer; }

#navigation li.over a,
#navigation li:hover a      { background-position: 0 -18px; }
#navigation li.active a     { background-position: 0 -36px; }

#navigation .nav-stipic-constructa a   { background-image: url(../images/css/nav-stipic-constructa.gif); width: 169px; }
#navigation .nav-djelatnosti a         { background-image: url(../images/css/nav-djelatnosti.gif); width: 111px; }
#navigation .nav-reference a           { background-image: url(../images/css/nav-reference.gif); width: 99px; }
#navigation .nav-kontakt a             { background-image: url(../images/css/nav-kontakt.gif); width: 80px; }
#navigation .nav-vijesti a             { background-image: url(../images/css/nav-vijesti.gif); width: 61px; }
#navigation .nav-services a            { background-image: url(../images/css/nav-services.gif); width: 81px; }
#navigation .nav-references a          { background-image: url(../images/css/nav-references.gif); width: 111px; }
#navigation .nav-news a                { background-image: url(../images/css/nav-news.gif); width: 48px; }
#navigation .nav-contact a             { background-image: url(../images/css/nav-contact.gif); width: 80px; }

#navigation li.active a,
#navigation li.active a:hover,
#navigation li.active a:active,
#navigation li.active a:focus,
#navigation li a:hover,
#navigation li a:active,
#navigation li a:focus      { color: #000; }

#navigation .nav-services,
#navigation .nav-references,
#navigation .nav-contact { margin: 0 0 0 55px; }
#navigation .nav-news { margin-left: 67px; }


#navigation li ul           { width: 170px; position: absolute; top: -9999px; left: -9999px; padding: 6px 10px; background: #fff; float: none; }

#navigation li.over ul,
#navigation li:hover ul     { top: 18px; left: -10px; }

#navigation li li.over ul   { top: 0; left: 0; }

#navigation li li           { font-size: 11px; line-height: 13px; margin: 0 0 3px; float: none; display: block; }

#navigation li.active li a,
#navigation li li a         { text-align: left; color: #696547; text-indent: 0; height: auto; width: auto !important; background: 0 !important; text-transform: none; }

#navigation li li a.active  { font-weight: bold; color: #484636; }



/* PHOTO SLIDESHOW   */
#photo-slideshow                { clear: both; position: relative; z-index: 10; width: 875px; height: 435px; overflow: hidden; }
#photo-slideshow img            { position: absolute; top: 0; left: 0; width: 875px; height: 435px; display: block; }

#main-content #photo-slideshow  { width: 875px; height: 780px; position: relative; top: -26px; }

#photo-slideshow ul { width: 900px; margin: 0; padding: 0; }
#photo-slideshow ul li { float: left; width: 330px; margin: 0 120px 0 0; padding: 0; background: 0;  }


/* ARTICLE */
#article-container              { padding: 26px 0 20px 0; }

.article                        { font-size: 12px; line-height: 18px; overflow: hidden; }

h1                              { color: #467491; font-size: 35px; line-height: 35px; font-weight: normal; margin-bottom: 9px; }

.article h2                     { font-size: 16px; line-height: 18px; font-weight: bold; margin-bottom: 18px; color: #467491; }

.article h3,
.article h4,
.article h5,
.article h6                     { font-size: 12px; line-height: 18px; font-weight: bold; margin-bottom: 18px; color: #467491; }

.article h3 a,
.article h4 a,
.article h5 a,
.article h6 a,
.article h2 a                   { color: #467491; text-decoration: none; }

.article a                      { text-decoration: underline; }

.article p,
.article ul,
.article ol,
.article dl                     { margin-bottom: 18px; }

.article dt                     { font-weight: bold; }


.article li ul,
.article li ol               { margin-top: 18px; }

.article li ul li,
.article ul li             { margin-left: 0; list-style-type: none; padding-left: 10px; background: url(../images/css/li-dot.gif) no-repeat 0 9px; list-style: none; }

.article li ol li,
.article ol li             { margin-left: 25px; list-style-type: decimal; background: 0; padding-left: 0; }



.article table                  { margin-bottom: 18px; border-bottom: 1px solid #ededed; }

.article table td,
.article table th a             { padding: 5px 10px; border-top: 1px solid #ededed; font-weight: normal; }

.article table th               { color: #467491; font-weight: bold; }

.article table caption          { color: #467491; padding: 0 10px 5px; font-weight: bold; text-align: center; }

.article table.blank            { margin-left: 0; margin-right: 0; border: none; width: auto; }

.article table.blank tr         { background: 0; }

.article table.blank caption    { padding: 0 0 10px; text-align: center; }

.article table.blank th,
.article table.blank td         { border: 0; background: none; font-weight: normal; padding: 0; }

.article .left         { float: left; margin: 5px 10px 0 0; clear: left; }
.article .right        { float: right; margin: 5px 0 0 10px; clear: right; }

.article a:hover,
.article a:active,
.article a:focus      { text-decoration: none; }

.article h3 a:hover,
.article h4 a:hover,
.article h5 a:hover,
.article h6 a:hover,
.article h2 a:hover                   { color: #467491; text-decoration: underline; }


/* HOME CONTENT */
#page-home #article-container         { padding: 24px 0 0; }
#page-home #article-container h1      { color: #7B7C7E; font-size: 32px; line-height: 38px; margin-bottom: 25px; text-align: left; }


/* REFERENCE LIST */
#references-list                { padding-top: 26px; }
#references-list ul             { list-style: none; }
#references-list li             { font-size: 12px; margin-bottom: 2px; margin-left: 0; padding: 0; background: 0; }
#references-list li a           { color: #484428; text-decoration: none; }

#references-list li.active a    { color: #467491; font-weight: bold; text-decoration: none !important; }

#references-list li a:hover,
#references-list li a:active,
#references-list li a:focus     { text-decoration: underline; }

/* NEWS LISTING */
#page-news-listing #main-content         { padding-top: 25px; }
#page-news-listing .news-intro h2        { margin-bottom: 18px; }

#page-news-listing .news-intro h2 a:hover,
#page-news-listing .news-intro h2 a:active,
#page-news-listing .news-intro h2 a:focus     { text-decoration: underline; }

#page-news-listing .news-intro a:hover,
#page-news-listing .news-intro a:active,
#page-news-listing .news-intro a:focus     { }

#page-news-listing .news-intro .photo      { float: left; margin: 5px 10px 0 0; }

#page-news-listing .news-intro .more a   { color: #467491; }

#page-news-listing .news-intro .more a:hover,
#page-news-listing .news-intro .more a:active,
#page-news-listing .news-intro .more a:focus     { }


/* PAGINATION */
.paginator                  { clear: both; padding-top: 20px; }
.paginator ul               { list-style: none; }
.paginator ul li            { float: left; padding: 0; margin-right: 3px; }
.paginator a                { float: left; padding: 2px 8px; color: #3e3d40; text-align: center; }

.paginator .on              { color: #c6c7c8; }

.paginator a:hover,
.paginator a:active,
.paginator a:focus           { }

.paginator .firstPage a,
.paginator .lastPage a,                
.paginator .prevPage a,
.paginator .nextPage a       { text-indent: -9999px; width: 20px; height: 20px; padding: 0; background-color: transparent !important; }

.paginator .firstPage a      { background: url(../images/css/pagination-first.gif) no-repeat 50% 50%; }
.paginator .firstPage a.off  { background: url(../images/css/pagination-first-off.gif) no-repeat 50% 50%; }

.paginator .prevPage a          { background: url(../images/css/pagination-prev.gif) no-repeat 50% 50%; }
.paginator .prevPage a.off      { background: url(../images/css/pagination-prev-off.gif) no-repeat 50% 50%; margin-right: 5px; }
.paginator .nextPage a          { background: url(../images/css/pagination-next.gif) no-repeat 50% 50%; margin-left: 5px; }
.paginator .nextPage a.off      { background: url(../images/css/pagination-next-off.gif) no-repeat 50% 50%; margin-left: 5px; }
.paginator .lastPage a          { background: url(../images/css/pagination-last.gif) no-repeat 50% 50%; }
.paginator .lastPage a.off      { background: url(../images/css/pagination-last-off.gif) no-repeat 50% 50%; }

#basic-controls         { clear: both; width: 100%; padding: 25px 0 0; list-style: none; text-align: center; }
#basic-controls li      { display: inline; padding: 0 10px; }
#basic-controls li a    { color: #333; }

#basic-controls li a:hover,
#basic-controls li a:active,
#basic-controls li a:focus  { }

/* TOOLS */
#tools              { position: absolute; height: 15px; top: 5px; left: 675px; width: 61px; z-index: 100; }
#tools ul           { list-style: none; float: right; height: 16px; }
#tools li           { float: left; text-transform: uppercase; margin-left: 4px; line-height: 1; display: inline; position: relative; }
#tools li.small     { font-size: 9px; top: 5px; }
#tools li.medium    { font-size: 11px; top: 3px; }
#tools li.large     { font-size: 14px; top: 1px; }
#tools li a         { color: #fff; }

#tools li a:hover,
#tools li a:active,
#tools li a:focus   { }

#print-link         { position: static !important; float: left; display: inline; width: 15px; height: 15px; text-indent: -9999px; overflow: hidden; background: url(../images/css/icon-print.gif) no-repeat 0 0; }
#print-link a       { display: block; width: 15px; height: 15px; }

#to-top                 { position: absolute; bottom: -19px; left: 353px; font-size: 9px; padding-left: 25px; background: url(../images/css/to-top.gif) no-repeat 0 50%; }
#to-top a               { color: #467491; display: block; background: url(../images/css/to-top.gif) no-repeat 100% 50%; padding-right: 25px; }

#to-top a:hover,
#to-top a:active,
#to-top a:focus         { }


/* FOOTER */
#footer                 { clear: both; text-align: right; padding: 0 0 2px; }
#footer p               { display: inline; margin-left: 5px; font-size: 9px; }
#footer p.first-child   { margin: 0; position: absolute; left: 45px; }

#footer p,
#footer p a             { color: #467491; }

#footer a:hover,
#footer a:active,
#footer a:focus         { }


/* SECONDARY NAVIGATION */
#supplementary-navigation       { position: absolute; top: 4px; right: 2px; float: left; }
#supplementary-navigation ul    { float: left; list-style: none; }
#supplementary-navigation li    { float: left; margin-left: 37px; display: inline; text-transform: lowercase; font-size: 11px; }
#supplementary-navigation a     { color: #fff; }

#supplementary-navigation li.active a   { font-weight: bold; text-decoration: underline; }


/* MISC */
#footer:after,
.article:after,
.paginator ul:after,
#main-content:after,
#header:after,
#layout:after,
#content:after         { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0px; line-height: 0; overflow: hidden; }

#supplementary-navigation h2,
#logo img,
#tools p,
.paginator p,
#logo img,
#navigation h2         { position: absolute; top: -9999px; left: -9999px; }

.map { width: 530px; height: 300px; display: inline; float: right; }

#admin-pages                { position: absolute; top: 5px; right: 5px; width: 100px; padding: 10px; background: #fff; }
#admin-pages ul             { list-style: none; }
#admin-pages li             { padding: 5px 0; text-transform: uppercase; font-size: 10px; line-height: 1; border-top: 1px solid #eee; }
#admin-pages li.elements    { display: none; }
#admin-pages li a           { color: #225992; }
#admin-pages li:first-child { border-top: 0; }
#admin-pages li.active a    { color: #f00; }
