/******************************************************
*                                                     *
*   CSS file - http://www.vema-prom.hr/       			  *
*   Copyright (c) Dobbin, 2008.               		  	*
*                                                     *
******************************************************/


/* Base
------------------------------------------------------*/

*
{
	margin: 0px;
	padding: 0px;
}

body
{
	background: url("../../images/bg.gif") repeat 0% 0%;
	text-align: center;
	font: normal 0.75em/145% Arial, Tahoma, sans-serif;
	color: #4D4D4D;
}

p
{
	margin: 0px 0px 15px 0px;
	line-height: 140%;
	color: #4D4D4D;
}

.clear
{
	clear: both;
	font-size: 0.1em;
	height: 1%;
}

a
{
	outline: none;
	text-decoration: underline;
}

a:hover
{
	text-decoration: none;
}

.hide
{
	display: none;
}


/* Layout
------------------------------------------------------*/


#page-container
{
	background: url("../../images/bg_page_container.png") no-repeat 50% 0%;
	margin-bottom: 30px;
}

#header-above
{
	width: 820px;
	height: 122px;
	margin: 0px auto;	
	text-align: left;
	background: url("../../images/bg_aboveHead.png") no-repeat 0% 0%;
	_background: transparent;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.vema-prom.hr/images/bg_aboveHead.png', sizingMethod='crop');
}

#wrapper-container
{
	width: 820px;
	margin: 0px auto;	
	text-align: left;
	background: #fff url("../../images/bg_wrapper_container.gif") no-repeat 0% 100%;
}

#wrapper-container .inner
{
	padding: 0px 10px 12px 10px;
}

#header
{
	height: 218px;
	background: #284141 url("../../images/headers/home.jpg") no-repeat 0% 100%;
}

#content-container
{
	padding: 0px 0px 20px 0px;
	background: url("../../images/bg_content_container_bottom.gif") repeat-x 0% 100%;
}

#content-container .inner
{
	padding: 0px 0px 0px 21px;
	background: url("../../images/bg_content_container.jpg") no-repeat 0% 0%;
}



/* Header
------------------------------------------------------*/

#header-above h1
{
	width: 245px;
	padding: 68px 0px 0px 30px;
	float: left;
}

#header-above h1 a
{
	display: block;
	width: 540px;
	height: 23px;
	background: url("../../images/logo.gif") no-repeat 0% 0%;
	text-indent: -9999px;
}

#header-above h2
{
	width: 198px;
	height: 95px;
	float: right;
	background: url("../../images/0800.gif") no-repeat 0% 0%;
	text-indent: -9999px;
	margin: 55px 20px -50px 0px;
}


/* Header
------------------------------------------------------*/

#header ul
{
	margin: 0px;
	padding: 9px 0px 0px 10px;
	list-style: none;
}

#header ul li
{
	margin: 0px;
	float: left;
	background: url("../../images/bg_menu_separator.gif") no-repeat 100% 50%;
}

#header ul li a
{
	display: block;
	padding: 7px 12px 9px 12px;
	font: bold 0.9em Arial, Tahoma, sans-serif;
	color: #7bd0d0;
	text-decoration: none;
	text-transform: uppercase;
}

#header ul li a:hover
{
	color: #fff;
}

#header ul li.active span
{
	display: block;
	background: url("../../images/bg_menu_active_left.gif") no-repeat 0% 0%;
}

#header ul li.active a
{
	background: url("../../images/bg_menu_active_right.gif") no-repeat 100% 0%;
	color: #fff;
	margin-left: 1px;
}

#header .highlight
{
	font: normal 0.8em Arial, Tahoma, sans-serif;
	color: #cfe5e4;
	text-transform: uppercase;
	padding: 75px 30px 0px 356px;
}

#header .highlight a.detail
{
	text-indent: -9999px;
	display: block;
	margin: 15px 0px 5px 0px;
	width: 92px;
	height: 19px;
	background: url("../../images/bullet_detail_highlight.gif") no-repeat 0px 0px;
}

#header.grafiti
{
	background: #284141 url("../../images/headers/grafiti_clean_concept.jpg") no-repeat 0% 100%;
}

#header.grafiti .highlight
{
	padding-top: 100px;
}


/* content-container
------------------------------------------------------*/

#content-nav
{
	width: 230px;
	float: left;
	margin: 0px 30px 0px 0px;
}

#content-text
{
	width: 500px;
	float: left;
	padding: 40px 0px 30px 0px;
}


/* content-nav
------------------------------------------------------*/

#submenu-nav
{
	background: #fff url("../../images/bg_submenu_bottom.gif") no-repeat 0% 100%;
	margin: -34px 0px 0px 0px;
	padding: 0px 0px 20px 0px;
	position: relative;
}

#submenu-nav .inner
{
	background: url("../../images/bg_submenu_top.gif") no-repeat 0% 0%;
	padding: 6px 5px 10px 5px;
	position: relative;
	
}

#submenu-nav h1
{
	font: bold 0.9em Arial, Tahoma, sans-serif;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	background-color: #e11e28;
	border-bottom: 4px solid #d41c26;
	padding: 6px 15px 4px 15px;
}

#submenu-nav ul
{
	margin: 0px;
	padding: 10px 0px 0px 15px;
	list-style: none;
	background-color: #284141;
}

#submenu-nav ul li
{
	padding: 0px;
	border-bottom: 1px solid #365757;
}

#submenu-nav ul li a
{
	font: bold 0.9em Arial, Tahoma, sans-serif;
	color: #78cdcd;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	background: url("../../images/bullet_submenu_nav.gif") no-repeat 0% 50%;
	padding: 5px 0px 6px 25px;
}

#submenu-nav ul li a:hover
{
	color: #fff;
}


/* banners
------------------------------------------------------*/

#banners a
{
	display: block;
	padding: 5px 5px 15px 5px;
	margin: 0px 0px 5px 0px;
	background: url("../../images/bg_banners_bottom.gif") no-repeat 0% 100%;
}

#banners img
{
	display: block;
}


/* content-text
------------------------------------------------------*/

#content-text h1
{
	font: normal 1.8em Arial, Tahoma, sans-serif;
	text-transform: uppercase;
	color: #e11e28;
	text-decoration: none;
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 5px 0px;
	border-bottom: 1px dotted #E9ECEC;
}

#content-text h2
{
	font: normal 1.5em Arial, Tahoma, sans-serif;
	color: #e11e28;
	text-decoration: none;
	margin: 8px 0px 10px 0px;
}

#content-text h3
{
	font: bold 1.1em Arial, Tahoma, sans-serif;
	color: #e11e28;
	text-decoration: none;
	margin: 0px 0px 8px 0px;
}

#content-text h3.shortDescription
{
	font: normal 1.1em/145% Arial, Tahoma, sans-serif;
	color: #e11e28;
	text-decoration: none;
	margin: 10px 0px 10px 0px;
}

#content-text ul
{
	margin: 0px 0px 10px 0px;
	padding: 0px;
	list-style: none;
}

#content-text ul li
{
	margin: 2px 0px 2px 0px;
	padding: 0px 0px 0px 20px;
	background: url("../../images/bullet_1.gif") no-repeat 2px 5px;
}

#content-text .published
{
	color: #58a8a8;
	text-transform: uppercase;
}

#content-text a.detail
{
	float: right;
	text-indent: -9999px;
	display: block;
	margin: 10px 0px 5px 0px;
	width: 92px;
	height: 19px;
	background: url("../../images/bullet_detail.gif") no-repeat 0px 0px;
}

#content-text p a
{
	color: #E11E28;
	text-decoration: underline;
}

#content-text p a:hover
{
	text-decoration: none;
}

#news-list
{
	margin-bottom: 20px;
}

#content-text #news-detail img, #content-text #news-list img
{
	float: left;
	margin: 3px 10px 0px 0px;
}

#content-text #news-list .wrap-text
{
	float: right;
	width: 380px;
}

#content-text #news-list .newsItem
{
	margin-bottom: 10px;
}


#content-text img
{
	margin: 0px 10px 12px 0px;
	border: 4px solid #DBE7E7;
}


/* footer-navigation
------------------------------------------------------*/

#footer-navigation
{
	background-color: #284141;
	padding: 17px 0px 15px 10px;
}

#footer-navigation ul
{
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#footer-navigation ul li
{
	float: left;
	background: url("../../images/bg_menu_separator.gif") no-repeat 100% 50%;
}

#footer-navigation ul li a
{
	display: block;
	padding: 7px 12px 9px 12px;
	font: bold 0.9em Arial, Tahoma, sans-serif;
	color: #7bd0d0;
	text-decoration: none;
	text-transform: uppercase;
}

#footer-navigation ul li a:hover
{
	color: #fff;
}

#footer-navigation ul li.active span
{
	display: block;
	background: url("../../images/bg_menu_active_left.gif") no-repeat 0% 0%;
}

#footer-navigation ul li.active a
{
	background: url("../../images/bg_menu_active_right.gif") no-repeat 100% 0%;
	color: #fff;
	margin-left: 1px;
}



/* footer
------------------------------------------------------*/

#footer
{
	background-color: #1e3131;
	border-top: 1px solid #304f4f;
	padding: 8px 20px 8px 20px;
}

#footer ul
{
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#footer ul li
{
	float: left;
	font: bold 0.8em Arial, Tahoma, sans-serif;
	color: #3d6767;
	text-transform: uppercase;
}

#footer ul li.production
{
	float: right;
}

#footer a
{
	color: #3d6767;
}


/* Forms
------------------------------------------------------*/

#contact_form, #contact_form_message
{
	border: 1px solid #E0E0E0;
	padding: 15px 15px 10px 15px;
	margin: 0px 0px 10px 0px;
}

#contact_form legend, #contact_form_message legend
{
	color: #e11e28;
	padding: 0px 10px 0px 10px;
	font: bold 0.9em Arial, Tahoma, sans-serif;
}

#contact_form label
{
	font: bold 0.9em Arial, Tahoma, sans-serif;
	color: #646464;
	display: block;
	margin: 0px 0px 3px 0px;
}

#contact_form input
{
	font: normal 1.0em Arial, Tahoma, sans-serif;
	color: #333;
	display: block;
	margin: 0px 0px 10px 0px;
	border: 1px solid #e9ecec;
	background-color: #e9ecec;
	width: 300px;
	padding: 3px;
}

#contact_form input.required
{
	background-color: #fff;
	border: 1px solid #e11e28;
	color: #e11e28;
}

#contact_form_message textarea
{
	font: normal 1.0em Arial, Tahoma, sans-serif;
	color: #333;
	display: block;
	margin: 0px 0px 10px 0px;
	border: 1px solid #e9ecec;
	background-color: #e9ecec;
	width: 450px;
	height: 80px;
	padding: 2px;
}

#contact_form_message .sendButton
{
	font: bold 0.9em Arial, Tahoma, sans-serif;
	color: #fff;
	display: block;
	margin: 0px 0px 10px 0px;
	border: 0px;
	background-color: #F10701;
	width: 80px;
	height: 25px;
	padding: 2px;
}

#contact_form_message .sendButton:hover
{
	background-color: #454D52;
}


/* Tables
------------------------------------------------------*/

table
{
	width: 480px;
	background-color: #EBF7F6;
	padding: 5px;
	margin-bottom: 10px;	
	border-collapse: collapse;
	font: normal 0.9em Arial, Tahoma, sans-serif;
}

table .tHeader
{
	color: #fff;
	padding: 3px 0px 7px 8px;;
	background-color: #E11E28;
	font: bold 1em Arial, Tahoma, sans-serif;
	border: none;
}

table td
{
	padding: 4px 0px 4px 8px;;
	border-bottom: 1px solid #fff;
}

table tr.troskovi
{
	background-color: #B9DCD9;
}


/* Paging template
------------------------------------------------------*/

.PagingTemplate
{
    padding: 10px 0px 0px 0px;
}

#content-text .PagingTemplate ul
{
	margin: 0px0px;
	padding: 0px;
	list-style: none;
}

#content-text .PagingTemplate ul li
{
	float: left;
    margin: 0px 5px 0px 0px;
	padding: 0px;
	background: none;
}

#content-text  .PagingTemplate li.info
{
    font: bold 1.0em Arial, Tahoma, sans-serif;
	color: #fff;
	font-style: normal;
	text-decoration: none;
	background-color: #b9dcd9;
	padding: 4px 8px 4px 8px;
}

#content-text .PagingTemplate a
{
    display: block;
    border: 1px solid #b9dcd9;
    font: bold 1.0em Arial, Tahoma, sans-serif;
	color: #284141;
	text-decoration: none;
	padding: 3px 6px 3px 6px;
}

#content-text .PagingTemplate a:hover
{
    color: #e11e28;
    border: 1px solid #e11e28;
}

#content-text .PagingTemplate a.active
{
	color: #444;
	text-decoration: none;
	border: 1px solid #fff;
}

#content-text .PagingTemplate a.inactive
{
	display: none;
}