/*
 *   Tripoli is a generic CSS standard for HTML rendering. 
 *   Copyright (C) 2007 David Hellsing
 *   
 *   http://devkick.com/lab/tripoli/
 *
 *   You should have received a copy of the GNU General Public License
 *   along with this program.  If not, see <http://www.gnu.org/licenses/>.
**/

/*
_______________________________
BASE */

@import url(styles.base.css);
@import url(mobilbox.forms.css);

/*
_______________________________
PLUGINS */

@import url(plugins/styles.visual.css);
@import url(plugins/styles.type.css);


/*
_______________________________
CUSTOM MOBILBOX STYLES START */

html, body { height: 100%; }

html { color: #525458; }

body { background: url(../images/bg_site.jpg) left top repeat-x white; }

h1, h2, h3 {
	font-family: "Tahoma", Arial, sans-serif;
}

h1, h2 {
	color: #081209;
	font-size: 1.5em;
}

h1 {
	text-indent: 1em;
	padding-bottom: .5em;
	border-bottom: 1px solid #ced0ce;
	position: relative;
}

.clear { clear: both; }

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* stop commented backslash hack */


a:link {
	color: #ac462f;
}

a:visited {
	color: #d2876e;
}


#wrapper {
	width: 905px;
	position: relative;
	margin: 0 auto;
	background: url(../images/bg_content.gif) left top no-repeat white;
}

	/**************************************/
	/*          COMMON ELEMENTS           */
	/**************************************/
	
	#logo {
		position: absolute;
		top: 1.1em;
		left: 4.5em;
	}
	
	#slogan {
		text-align: right;
		position: absolute;
		top: 4.7em;
		right: 4.4em;
		border-bottom: .1em solid #c0c3bf;
	}
	
	#slogan h1 {
		margin-right: .3em;
		padding: 0;
		border: 0;
	}
	
	#slogan-aux {
		position: absolute;
		top: 18.9em;
		right: 3.9em;
	}
	
	#wrapper #slogan p {
		font-size: 1.1em;
		color: #777c77;
		padding: .1em .2em .4em .5em;
	}
	
	/**************************************/
	/*              MENUS                 */
	/**************************************/
	
	/**********   MAIN MENU   *************/
	
	#main-menu {
		position: absolute;
		top: 13.2em;
		left: 3.8em;
	}	
	
		#main-menu li {
			float: left;
			margin-right: 12px;
			position: relative;
		}
		
		#main-menu li a span, #secondary-menu li a span {
			font-size: 1.4em;
			cursor: pointer;
		}
		
		#main-menu li a:link,  #main-menu li a:visited{
			display: block;
			height: 32px;
			line-height: 32px;
			background: url(../images/bg_menu_left.gif) left top no-repeat transparent;
			padding-left: 10px;
			color: #35383b;
			text-decoration: none;
		}
		
		#main-menu li a span {
			display: block;
			height: 32px;
			line-height: 32px;
			font-weight: bold;
			background: url(../images/bg_menu_right.gif) right top no-repeat transparent;
			padding-right: 10px;
		}
		
		#main-menu li a:hover {
			background: url(../images/bg_menu_left_roll.gif) left top no-repeat transparent;
			color: white;
		}
		
		#main-menu li a:hover span {
			background: url(../images/bg_menu_right_roll.gif) right top no-repeat transparent;
		}
		
		#main-menu li a.active-submenu {
			background: url(../images/bg_menu_left_roll.gif) left top no-repeat transparent;
			color: white;
		}
		
		#main-menu li a.active-submenu span {
			background: url(../images/bg_menu_right_roll.gif) right top no-repeat transparent;
		}
		
			#main-menu li ul {
				position: absolute;
				width: 100%;
				left: -999em;
				padding: 11px 10px 10px 8px;
				background: #ed1b23;
				min-width: 132px; /* 150px - 18px; */
			}
			
			#main-menu li:hover ul {
				left: auto;
			}
			
			#main-menu li ul li {
				background: url(../images/bg_submenu_dot.gif) left bottom repeat-x transparent;
				width: 132px;
			}
			
			#main-menu li ul li.last {
				background: none;
			}
			
			#main-menu li ul a:link,  #main-menu li ul a:visited{
				font-size: 1.1em;
				display: block;
				width: 122px;
				height: 100%;
				line-height: 130%;
				background: url(../images/arrow_submenu.gif) 2px 50% no-repeat transparent;
				padding: 5px 0 5px 10px;
				color: white;
				text-decoration: none;
			}
			
			#main-menu li ul a:hover {
				background: url(../images/arrow_red.gif) 2px 50% no-repeat white;
				color: #ed1b23;
			}
	
	/**********   SECONDARY MENU   *************/
	
	#secondary-menu {
		position: absolute;
		top: 13.5em;
		right: 4.2em;
		/*right: 42px;*/
	}
	
		#secondary-menu li {
			float: left;
			margin-right: 2px;
		}
		
		#secondary-menu li a {
			display: block;
			height: 22px;
			line-height: 22px;
			background: url(../images/bg_left_cerere.gif) left top no-repeat transparent;
			padding-left: 23px;
			color: white;
			text-decoration: none;
		}
		
		#secondary-menu li a span {
			display: block;
			height: 22px;
			line-height: 22px;
			background: url(../images/bg_right_cerere.gif) right top no-repeat transparent;
			padding-right: 8px;
			color: white;
		}
		
		#secondary-menu li:first-child a {
			padding-left: 21px;
			background: url(../images/bg_left_contact.gif) left top no-repeat transparent;
		}
		
		#secondary-menu li:first-child a span {
			background: url(../images/bg_right_contact.gif) right top no-repeat transparent;
		}
	
	/**********   PRODUCT NAVIGATION MENU   *************/
	
	#products-nav-wrapper {
		float: left;
		margin: 17.1em 0 2.5em 2em;
		padding: 0 1.4em;
		width: 311px; /* 339px - 28px */
		border: .1em solid #e1e1e1;
		background: url(../images/bg_prod_nav.gif) left bottom repeat-y white;
		min-height: 22.5em;
		position: relative;
	}
	
	#products-nav-wrapper h1 {
		position: relative;
		padding-bottom: 23px;
		margin: 11px 0 0 0;
	}
	
	#products-nav-wrapper h1 span {
		position: absolute;
		left: 0;
		margin-top: 18px;
		color: #6d7072;
		font-size: 0.7em;
		font-family: Arial, sans-serif;
	}
	
		.prod-list {
			width: 100%;
			margin: 7px 0 0 0;
		}
		
		.prod-list li {
			height: 2.1em;
			line-height: 2.1em;
			padding-left: .7em;
			background: url(../images/border_prod_list.gif) left bottom repeat-x transparent;
		}
		
		.prod-list .last {
			background: none;
		}
		
		.prod-list li a:link, .prod-list li a:visited {
			font-size: 1.1em;
			color: #6d7072;
			text-decoration: none;
			display: block;
			width: 100%;
			height: 21px;
			line-height: 21px;
			text-indent: .8em;
			background: url(../images/arrow_red.gif) left 50% no-repeat transparent;
		}
		
		.prod-list li a:hover {
			color: #ed1b23;
		}
		
		/**********   ROUNDED CORNERS   *************/
		.tl { position: absolute; top: -1px; left: -1px; width: 4px; height: 4px; background: url(../images/corner_tl.gif) left top no-repeat; }
		.tr { position: absolute; top: -1px; right: -1px; width: 4px; height: 4px; background: url(../images/corner_tr.gif) left top no-repeat; }
		.bl { position: absolute; bottom: -1px; left: -1px; width: 4px; height: 4px; background: url(../images/corner_bl.gif) left top no-repeat; }
		.br { position: absolute; bottom: -1px; right: -1px; width: 4px; height: 4px; background: url(../images/corner_br.gif) left top no-repeat; }
	
	
	/**************************************/
	/*        PRODUCTS CATEGORIES         */
	/**************************************/
	#products-cat {
		clear: both;
		margin: 0 3.5em 2.8em 3em;
	}
	
	#products-cat ul {
		margin: 0 auto;
	}
	
	#products-cat ul li {
		float: left;
		width: 160px;
		text-align: center;
		margin-right: 8px;
	}
	
	#products-cat ul li a {
		font-size: 1.1em;
		display: block;
		width: 160px;
		height: 21px;
		line-height: 21px;
		background: url(../images/bg_prod_cat_link.gif) left top no-repeat transparent;
		color: #515151;
		text-align: center;
		text-decoration: none;
	}
	
	#products-cat ul li a:hover {
		color: white;
		background: url(../images/bg_prod_cat_link.gif) left -21px no-repeat transparent;
	}
	
	/**************************************/
	/*             SERVICES              */
	/**************************************/
	#services {
		float: right;
		width: 512px;
		height: 92px;
		background: url(../images/bg_services.jpg) left top no-repeat white;
		margin-right: 10px;
		display: inline;
		padding-left: 10px;
	}
	
	#services h2 {
		margin: 13px 0 20px -2px;
	}
	
	#services ul {
		float: left;
		padding-right: 25px;
	}
	
	#services ul li {
		margin-bottom: 10px;
	}
	
	#services ul li a:link,  #services ul li a:visited{
		font-size: 1.1em;
		font-weight: bold;
		background: url(../images/arrow_services.gif) left 50% no-repeat transparent;
		color: #515151;
		padding-left: 7px;
		text-decoration: none;
	}
	
	#services ul li a:hover {
		background: url(../images/arrow_services_roll.gif) left 50% no-repeat transparent;
		color: #ed1b23;
	}
	
	/**************************************/
	/*           CONTACT INFO             */
	/**************************************/
	#contact-info {
		width: 261px; /* 370px - 109px */
		min-height: 92px;
		padding-left: 109px;
		background: url(../images/bg_contact.jpg) 35px top no-repeat transparent;
	}
	
	#contact-info h2 {
		padding-top: 13px;
		margin-bottom: 10px;
	}
	
	#contact-info address {
		font-size: 1.1em;
		line-height: 1.5em;
	}
	
	
	/**************************************/
	/*              SITEMAP               */
	/**************************************/
	
	#sitemap-list {
		/*margin-left: 40px;*/
	}
	
	/**************************************/
	/*             CONTENT                */
	/**************************************/
	
	.content {
		float: right;
		width: 500px;
		margin: 267px 35px 2.5em 0;
		display: inline;
		font-size:1.1em;
		line-height:1.4em;
	}
	
		.content p {
			text-align: justify;
			padding-left: 3px;
		}
		
		.content h1 {
			font-weight: normal;
			text-indent: .3em;
			margin: .1em 0 .6em 0;
		}
		
		
		.content h2, .content h3, .content h4 {
			clear: both;
		}
		
		.content h2 {
			background: #939597;
			color: white;
			font-size: 1.3em;
			padding: 4px;
		}
		
		.content h3 {
			font-size: 1.1em;
			border-bottom: 1px solid #cbcbcc;
			padding-bottom: 2px;
		}
		
		.content h4 {
			font-size: 1.1em;
		}
		
		.content #errorMsg h3, .content #successMsg h3 {
			font-size: 1.4em;
		}
		
		.content h3 + p {
			background: #ededed;
			padding: 1px 3px;
		}
		
		.adjacentp {
			background: #ededed;
			padding: 1px 3px;
		}
		
		.content a:hover {
			text-decoration: none;
			border-bottom: 1px dotted;
		}
		
		.content img {
			float: left;
			margin: 0 .7em .7em 0;
			border: 2px solid #e6e8e5;
		}
	
	/**************************************/
	/*              FOOTER                */
	/**************************************/
	
	#footer {
		position: relative;
		width: 833px;
		border-top: 1px solid #ced0ce;
		margin: 28px auto 0 auto;
		
	}
	
		#footer-content {
			float: left;
			border-top: 3px solid #ced0ce;
			padding: 10px 8px 0 8px;
		}
		
		#footer-content p {
			float: left;
			font-size: 1.1em;
			color: #6d6d6d;
			margin-bottom: 10px;
		}
		
		#footer-content p strong {
			font-weight: normal;
			color: #cf0504;
		}
		
		#footer-content ul {
			margin-left: 12px;
			float: left;
		}
		
		#footer-content li {
			float: left;
			margin-right: 4px;
		}
		
			#footer-content li a:link, #footer-content li a:visited {
				color: #525458;
				text-decoration: none;
				font-size: 1.1em;
			}
			
			#footer-content li a:hover {
				text-decoration: underline;
			}
		

/*
_______________________________
END */