/***************************************************
    MASTER CSS file for Kozmeticki salon Nada Kovac
    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: #666; padding-bottom: 40px; background: #fff; }

/**** 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
==================================================*/
#header        { width: 100%; height: 235px; overflow: hidden; background: #fff url(../images/layout/header-bg.gif) repeat-y center top; }
#headerContent { position: relative; margin: 0 auto; width: 960px; height: 235px; }
#flash { width: 960px; height: 235px; }
#flash a { color: #666; }

#topMenuHolder { width: 100%; height: 46px; background: #737b86; }

#wrapper       { width: 960px; height: 100%; overflow: hidden; margin: 0 auto; }
	
#container     { height: 100%; overflow: hidden; }
#mainContainer { display: inline; float: right; width: 720px; height: 100%; overflow: hidden; padding-top: 15px; }
#nav           { height: 100%; overflow: hidden; margin-bottom: 15px; }
#mainContent   { height: 100%; overflow: hidden; margin-bottom: 20px; }

#secContainer  { display: inline; float: left; width: 220px; height: 100%; overflow: hidden; background: #ebeced url(../images/layout/mainmenu-bg.gif) no-repeat left bottom; }


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

/*** TOP MENU ***/
#topMenu          { margin: 0 auto; width: 960px; z-index: 1000; background: #737b86; font-size: 12px; color: #fff; padding: 12px 0 0 10px; }
#topMenu li       { position: relative; float: left; width: auto; height: 22px; padding: 0; margin: 0 10px 0 0; z-index: 1500; cursor: pointer; }
#topMenu a        { display: block; padding: 5px 10px; text-decoration: none; color: #fff; border: none; }

/*** TOP MENU - FIRST LEVEL - ACTIVE ***/	
#topMenu li:hover   { background: #8e959e; }
#topMenu li:hover a { background: #8e959e; color: #fff; }
#topMenu .on        { background: #8e959e; }
#topMenu .on a      { background: #8e959e; color: #fff; }

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

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

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

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

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

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

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

/*** MAIN MENU ***/
#mainMenu          { height: 100%; overflow: hidden; padding: 20px 15px 10px 20px; font-size: 11px; color: #40454b; text-transform: uppercase; line-height: 1.3em; }
#mainMenu li       { margin-bottom: 8px; }

#mainMenu ul ul       { margin: 10px 0 0 0; padding: 0 0 5px 15px; font-size: 10px; line-height: 1.5em; height: 1%; }

#mainMenu ul ul ul    { margin-bottom: 10px; }
#mainMenu ul ul li    { margin-bottom: 0; }

#mainMenu .rtIn        { color: #40454b; text-decoration: none; }
#mainMenu .rtIn:hover  { color: #9da2a9; text-decoration: none; cursor: pointer; }

#mainMenu .on,
#mainMenu .on:hover { color: #9da2a9; text-decoration: none; cursor: pointer; }

#mainMenu .on a,
#mainMenu .on a:hover { color: #9da2a9; text-decoration: none; }

#mainMenu .on ul a    { color: #40454b; text-decoration: none; }
#mainMenu .on ul a.on,
#mainMenu .on ul a.on:hover { color: #9da2a9; text-decoration: none; }

#mainMenu .on ul ul a       { color: #40454b; text-decoration: none; }
#mainMenu .on ul ul a.on,
#mainMenu .on ul ul a.on:hover { color: #9da2a9; text-decoration: none; }

#mainMenu .on ul ul ul a       { color: #40454b; text-decoration: none; }
#mainMenu .on ul ul ul a.on,
#mainMenu .on ul ul ul a.on:hover { color: #9da2a9; text-decoration: none; }


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

/*** LOGO, SLOGAN ***/
#logo              { position: absolute; width: 299px; height: 52px; background: transparent url(../images/layout/nada-kovac-logo.gif) no-repeat 0 0; text-indent: -9999px; top: 51px; left: 0; }
#headerSlogan      { position: relative; width: 469px; height: 33px; top: 140px; text-indent: -9999px; }
#headerSlogan span { display: block; position: absolute; top: 0; left: 0; width: 469px; height: 33px; background: transparent url(../images/layout/slogan.gif) no-repeat 0 0; }

/*** PATH ***/
#path         { display: inline; float: left; width: 600px; font-size: .8em; }
#path li      { float: left; margin-right: 5px; padding-right: 9px; background: transparent url(../images/layout/path-arrow.gif) no-repeat right center; }
#path .on     { padding: 0; margin: 0; background: none; }
#path a       { color: #666; 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: 2px 20px 0 0; }
#fontSize    { display: inline; float: left; height: 100%; overflow: hidden; letter-spacing: 2px; padding-bottom: 2px; }
#fontSize a       { color: #666; text-decoration: none; }
#fontSize a:hover { color: #666; text-decoration: underline; }

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

/*** HOME CONTENT ***/

#topBoxesWrapper, 
#bottomBoxesWrapper { width: 735px; height: 100%; overflow: hidden; padding-bottom: 10px; margin-bottom: 30px; background: transparent url(../images/layout/box-bg.gif) repeat-x left bottom; }
#bottomBoxesWrapper { margin-bottom: 0; }

.box                { display: inline; float: left; width: 220px; margin-right: 15px; height: 100%; overflow: hidden; padding: 0 5px; }

.home #mainContent h2  { font-size: 11px; margin-top: 0; font-weight: normal; text-transform: uppercase; clear: none; }
.home #mainContent img { display: block; margin: 0 -5px 10px -5px; width: 224px; }

.home #mainContent h2 a, 
.home #mainContent h3 a,
.home #mainContent h4 a, 
.home #mainContent h5 a,
.home #mainContent h6 a { color: #666; text-decoration: none; }

.home #mainContent h2 a:hover, 
.home #mainContent h3 a:hover,
.home #mainContent h4 a:hover, 
.home #mainContent h5 a:hover,
.home #mainContent h6 a:hover { color: #666; text-decoration: underline; }

/*
05/ MISC
==================================================*/
#topLink            { font-size: 11px; margin-bottom: 20px; text-align: right; }
#topLink a          { color: #666; text-decoration: underline; }
#topLink a:hover    { color: #666; text-decoration: none; }

#copyright          { text-align: center; padding: 20px 0; margin-bottom: 20px; font-size: 11px; color: #999; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
#copyright a        { color: #999; text-decoration: underline; }
#copyright a:hover  { color: #999; text-decoration: none; }

#development        { font-size: 11px; color: #999; text-align: center; }
#development a      { color: #999; text-decoration: underline; }
#development a:hover{ color: #666; text-decoration: none; }