/***************************************************
    MASTER CSS file for Nova Galerija
    Author: WEB Marketing (www.wem.hr)
    Media: Screen
    
    STRUCTURE:
    01/ BASIC SETTINGS 
    02/ LAYOUT & GRID
    03/ NAVIGATION
    04/ CONTENT
    05/ MISC
	
***************************************************/

/*
01/ BASIC SETTINGS
==================================================*/
*    { margin: 0; padding: 0; list-style: none; outline: none; }
body { font: normal 12px/1em Arial, Helvetica, sans-serif; color: #333; background: #444 url(../images/layout/body.gif) repeat-x 0 0; }

/**** RESET ***/
a img                                      { border: none; }
a,a img,a:link,a:visited, a:hover,a:active { outline: none; }
input:focus,textarea:focus,select:focus    { outline: none; } /* Safari Fix. */
#printLogo, #printContacts                 { display: none; }

/*** headings ***/
h1, h2, h3, h4, h5, h6                     { clear: both; line-height: 1.5em; }

/*
02/ LAYOUT & GRID
==================================================*/
#wrapper              { width: 960px; height: 100%; margin: 0 auto; }

#mainNavWrapper       { width: 960px; height: 77px; position: relative; }
	#logo         { display: inline; float: left; clear: none; width: 250px; height: 37px; overflow: hidden; margin-top: 25px; }
	#mainNav      { display: inline; float: right; width: 700px; padding-top: 35px; }
	
	#header       { width: 960px; height: 290px; overflow: hidden; margin-bottom: 15px; }
	#flash { width: 960px; height: 230px; overflow: hidden; }
	#flash a { color: #333; text-decoration: underline; }
	

#nav                       { height: 100%; overflow: hidden; margin-bottom: 12px; }
	
#container                 { height: 100%; overflow: hidden; margin-bottom: 15px; background: transparent url(../images/layout/container-top.gif) no-repeat 0 0; padding-top: 10px; }
	#mainContentHolder { background: transparent url(../images/layout/container-bottom.gif) no-repeat left bottom; padding-bottom: 10px; }
	#mainContent       { background: transparent url(../images/layout/container-bg.gif) repeat-y 0 0; height: 100%; overflow: hidden; padding: 5px 15px; }

#topLink                   { text-align: right; margin-bottom: 15px; }

#development               { text-align: center; margin-bottom: 40px; }

/*
03/ NAVIGATION
==================================================*/

/*** MAIN MENU ***/
#mainMenu          { float: right; font-size: 11px; line-height: normal; }
#mainMenu li       { position: relative; float: left; width: auto; height: 22px; padding: 0; margin: 0 0 0 2px; z-index: 1500; cursor: pointer; }
#mainMenu a        { display: block; padding: 4px 6px; text-decoration: none; color: #333; border: none; }

/*** MAIN MENU - FIRST LEVEL - ACTIVE ***/	
#mainMenu li:hover   { background: #444; }
#mainMenu li:hover a { background: #444; color: #fff; }
#mainMenu .on        { background: #444; }
#mainMenu .on a      { background: #444; color: #fff; }

/*** MAIN MENU LEVELS ***/
#mainMenu ul              { position: absolute; left: 0; top: 18px; background: #444; width: 170px; font-weight: normal; line-height: 14px; font-size: 11px; z-index: 2000; padding-top: 5px; }
#mainMenu ul ul           { top: 0; left: 170px; z-index: 3000; padding-top: 0; }
#mainMenu ul li           { display: block; background: none; margin: 0; padding: 0; width: 170px; height: auto; z-index: 4000; cursor: pointer; }

#mainMenu ul a            { margin: 0; padding: 4px 17px 4px 7px; background: none; border-bottom: 1px solid #666; color: #fff; }

#mainMenu li:hover ul li  { background: none; }
#mainMenu li:hover ul a   { background: none; }
#mainMenu li.on ul li     { background: none; }
#mainMenu li.on ul a      { background: none; }

#mainMenu ul .sub            { background: transparent url(../images/layout/mainmenu-sub-arrow.gif) no-repeat 155px 8px; }
#mainMenu li:hover ul li.sub { background: transparent url(../images/layout/mainmenu-sub-arrow.gif) no-repeat 155px 8px; }

#mainMenu ul li:hover a                            { color: #ccc; }
#mainMenu ul li:hover ul a                         { color: #fff; }
#mainMenu ul li:hover ul li:hover a                { color: #ccc; }
#mainMenu ul li:hover ul li:hover ul a             { color: #fff; }
#mainMenu ul li:hover ul li:hover ul li:hover a    { color: #ccc; }
#mainMenu ul li:hover ul li:hover ul li:hover ul a { color: #fff; }

#mainMenu ul a.on,
#mainMenu li.on:hover ul a.on,
#mainMenu ul li ul li a.on,
#mainMenu ul li ul li:hover ul li a.on,
#mainMenu ul li ul li:hover ul li a.on:hover { color: #fff; font-weight: bold; text-decoration: underline; }

#mainMenu ul                                       { visibility: hidden; }
#mainMenu li:hover ul                              { visibility: visible; }
#mainMenu li:hover ul li ul                        { visibility: hidden; }
#mainMenu li:hover ul li:hover ul                  { visibility: visible; }
#mainMenu li:hover ul li:hover ul li ul            { visibility: hidden; }
#mainMenu li:hover ul li:hover ul li:hover ul      { visibility: visible; }

/*** LANGUAGE ***/
#language { position: absolute; top: 10px; right: 4px; font-size: 11px; line-height: 1.1em; }
#language li { float: left; margin-left: 10px; }
#language a { display: block; width: 16px; height: 11px; text-indent: -9999px; }
#language #hr a { background: transparent url(../images/layout/hr.gif) no-repeat 0 -11px; }
#language #hr a:hover,
#language #hr.on a { background: transparent url(../images/layout/hr.gif) no-repeat 0 0; }
#language #en a { background: transparent url(../images/layout/en.gif) no-repeat 0 -11px; }
#language #en a:hover,
#language #en.on a { background: transparent url(../images/layout/en.gif) no-repeat 0 0; }
#language #cz a { background: transparent url(../images/layout/cz.gif) no-repeat 0 -11px; }
#language #cz a:hover,
#language #cz.on a { background: transparent url(../images/layout/cz.gif) no-repeat 0 0; }

/*
04/ CONTENT
==================================================*/

/*** LOGO ***/
#logo a       { display: block; width: 250px; height: 37px; overflow: hidden; text-indent: -9999px; background: transparent url(../images/layout/logo.gif) no-repeat 0 0; }

/*** PATH ***/
#path         { display: inline; float: left; width: 700px; font-size: .9em; }
#path li      { float: left; margin-right: 5px; padding-right: 10px; background: transparent url(../images/layout/path-arrow.gif) no-repeat right center; }
#path .on     { padding: 0; margin: 0; background: none; }
#path a       { color: #ccc; text-decoration: underline; }
#path .on a   { text-decoration: none; }

/*** OPTIONS ***/
#options     { display: inline; float: right; height: 100%; overflow: hidden; }
#printIcon   { display: inline; float: left; width: 11px; height: 10px; overflow: hidden; background: transparent url(../images/layout/print.gif) no-repeat 0 0; text-indent: -9999px; margin: 0 20px 0 0; }
#fontSize    { display: inline; float: left; height: 100%; overflow: hidden; letter-spacing: 2px; padding-bottom: 2px; }
#fontSize a  { color: #ccc; text-decoration: none; }
#fontSize a:hover { color: #ccc; text-decoration: underline; }

#small  { font-size: 10px; }
#normal { font-size: 12px; }
#large  { font-size: 15px; }

/*** HOME CONTENT ***/
#container.home { background: none; padding: 0; width: 968px; }
#container.home p { margin: 5px 0; }

#topBoxesWrapper { background: transparent url(../images/layout/top-box-bg.gif) repeat-y 0 0; height: 100%; overflow: hidden; margin-bottom: 7px; }
#topBoxesHolder { background: transparent url(../images/layout/top-box-bottom.gif) no-repeat left bottom; height: 100%; overflow: hidden; padding-bottom: 10px; }
#topBoxesContent { background: transparent url(../images/layout/top-box-top.gif) no-repeat 0 0; height: 100%; overflow: hidden; }

#topBoxesContent .box { display: inline; float: left; width: 205px; padding: 10px 15px 5px 15px; margin-right: 7px; height: 100%; overflow: hidden; }
#topBoxesContent .box img { display: block; padding: 1px; background: #fff; margin: 0 -15px 10px -15px; }
#topBoxesContent .box h3 { margin-top: 0; }

#bottomBoxesWrapper { background: transparent url(../images/layout/bottom-box-bg.gif) repeat-y 0 0; height: 100%; overflow: hidden; }
#bottomBoxesHolder { background: transparent url(../images/layout/bottom-box-bottom.gif) no-repeat left bottom; height: 100%; overflow: hidden; padding-bottom: 0; }
#bottomBoxesContent { background: transparent url(../images/layout/bottom-box-top.gif) no-repeat 0 0; height: 100%; overflow: hidden; }

#bottomBoxesContent .box { display: inline; float: left; width: 477px; padding: 10px 0; margin-right: 7px; line-height: 1.35em; }
#bottomBoxesContent .box img { display: inline; padding: 1px; background: #fff; margin: 0; }
#bottomBoxesContent .box h2, 
#bottomBoxesContent .box h3, 
#bottomBoxesContent .box h4,
#bottomBoxesContent .box h5,
#bottomBoxesContent .box h6 { clear: none; }

#bottomBoxesContent div#leftBox img { margin: 0; }

#videoBox { text-align: center; background: #ccc; }

/*
05/ MISC
==================================================*/
#topLink         { font-size: .9em; }
#topLink a       { color: #ccc; text-decoration: underline; }
#topLink a:hover { color: #ccc; text-decoration: none; }

#development     { font-size: .9em; color: #999; }
#development a   { color: #999; text-decoration: underline; }
#development a:hover { color: #666; text-decoration: underline; }