/* --------------------------------------------------------------------------------------
+
+   DANIEL VAMOS - Web Designer
+
+   = ALARMSZR.RS
+
-------------------------------------------------------------------------------------- */

/*
= IMPORTING STUFF AND SETTING DEFAULT STYLES
-------------------------------------------------------------------------------------- */
@import url("reset.css");

/*
= COMMON ---------------- */

	body {
		background:url(../images/layout/main-bgr.png) left top repeat-x #000000;
		}

	/*
	+ Header */

		#headerHolder {
			position:relative; z-index:4;
			width:100%; height:106px;
			padding-top:14px;
			background:url(../images/layout/header-bgr.jpg) center top no-repeat;
			}
			#header {
				position:relative;
				width:960px; height:106px;
				margin:0px auto;
				}
				h1 {
					float:left;
					padding-top:5px; margin-left:-8px;
					}
					h1 a {
						display:block;
						width:190px; height:80px;
						text-indent:-9999px;
						background:url(../images/layout/logo.png) left top no-repeat;
						outline:none;
						}
				#header h2 {
					position:absolute; left:0px; bottom:10px;
					font-size:13px; color:#7d7d7d; font-weight:normal;
					}
					#header h2 span {
						color:#c1c7d4;
						}
				#myslidemenu {
					float:right;
					}
					#header ul {
						float:left;
						border-left:1px solid #000000; border-right:1px solid #2c2c2c;
						}
						#header ul li {
							float:left; position:relative;
							height:106px;
							border-left:1px solid #2c2c2c; border-right:1px solid #000000;
							}
							#header ul li a {
								display:block; float:left;
								height:68px;
								padding:38px 10px 0;
								text-indent:-9999px;
								outline:none;
								}
								#header ul li a.active {
									background:url(../images/layout/main-nav-hover-bgr.png) left top repeat-x;
									}
								#header ul li a span {
									display:block;
									height:34px;
									background-position:left top;
									background-repeat:no-repeat;
									}
								#header ul li a:hover span, #header ul li a.active span {
									background-position:left -34px;
									}
								#header ul li a span.pocetna {
									width:72px;
									background-image:url(../images/layout/pocetna-btn.png);
									}
								#header ul li a span.oNama {
									width:68px;
									background-image:url(../images/layout/o-nama-btn.png);
									}
								#header ul li a span.proizvodi {
									width:96px;
									background-image:url(../images/layout/proizvodi-btn.png);
									}
								#header ul li a span.reference {
									width:84px;
									background-image:url(../images/layout/reference-btn.png);
									}
								#header ul li a span.podrska {
									width:73px;
									background-image:url(../images/layout/podrska-btn.png);
									}
								#header ul li a span.kontakt {
									width:73px;
									background-image:url(../images/layout/kontakt-btn.png);
									}
								
	/*
	+ Main content */
	
		#contentHolder {
			width:100%; 
			background:url(../images/layout/content-bgr.png) left top repeat-x #fefefe;
			}
			#content {
				width:960px;
				margin:0px auto; padding:25px 0 35px;
				}
			
	/*
	+ Footer */
	
		#footerHolder {
			width:100%;
			padding:20px 0;
			background:#000000;
			}
			#footer {
				overflow:hidden;
				width:960px; 
				margin:0px auto;
				}
				#footer ul {
					float:left; clear:left;
					padding-bottom:5px;
					}
					#footer ul li {
						float:left;
						padding:0 10px;
						border-right:1px solid #1e1e1e;
						}
						#footer ul li.last {
							border:none;
							}
						#footer ul li a {
							font-size:11px; color:#7d7d7d;
							}
							#footer ul li a.active {
								color:#ffffff;
								}
							#footer ul li a:hover {
								text-decoration:underline;
								}
				#footer p {
					float:right;
					font-size:11px; color:#7d7d7d;
					}
					#footer p a {
						color:#ffffff;
						}
						#footer p a:hover {
							text-decoration:underline;
							}
			
/*
= HOME ---------------- */
	
	/*
	+ Tabs */
	
		#tabsWrapper {
			width:100%; height:315px;
			background:url(../images/layout/tabs-holder-bgr.png) left top repeat-x;
			}
			#tabsHolder {
				width:100%; height:315px;
				background:url(../images/layout/tabs-bgr.jpg) center top no-repeat;
				}
				#tabs {
					position:relative;
					width:880px; height:285px;
					padding:30px 0 0; margin:0px auto;
					}
					#tabsNav {
						position:absolute; left:50%; z-index:3; bottom:45px;
						height:19px;
						margin-left:-44px;
						}
						#tabsNav li {
							float:left;
							width:19px; height:19px;
							padding:0 5px;
							}
							#tabsNav li a {
								display:block; 
								width:19px; height:19px;
								text-indent:-9999px;
								background:url(../images/layout/tabs-bullet.png) left top no-repeat;
								outline:none;
								}
								#tabsNav li.ui-tabs-selected a {
									background-position:0 -19px;
									}
					#tabs div {
						position:relative;
						}
					.ui-tabs .ui-tabs-hide {
						display: none;
						}
						#tabs div h2 {
							margin-bottom:22px;
							font-size:40px; color:#333333;
							}
						#tabs div h3 {
							margin-bottom:22px; 
							font-size:20px; color:#005983;
							}
						#tabs div img {
							position:absolute; top:-30px; right:-40px;
							}
						#tabs div ul {
							margin-bottom:30px;
							}
							#tabs div ul li {
								padding-left:15px;
								font-size:15px; color:#333333; line-height:21px;
								background:url(../images/layout/orange-bullet.png) left 8px no-repeat;
								}
						#tabs div a {
							display:inline-block;
							height:42px;
							padding-right:44px;
							background:url(../images/layout/tabs-btn-bgr-right.png) right top no-repeat;
							}
							#tabs div a:hover {
								background-position:right -42px;
								}
							#tabs div a span {
								display:inline-block;
								height:42px;
								padding:0 20px 0 15px;
								font-size:15px; color:#ffffff; line-height:38px; text-shadow:0 1px 0 #000000;
								background:url(../images/layout/tabs-btn-bgr-left.png) left top no-repeat;
								}
								#tabs div a:hover span {
									background-position:0 -42px;
									}
					
	/*
	+ Main content */
	
		#boxesHolder {
			overflow:hidden;
			width:1000px;
			margin:0 -20px;
			}
			.box {
				float:left; position:relative;
				width:279px; height:163px;
				padding:5px 34px 26px 19px;
				background:url(../images/layout/box-bgr.png) left top no-repeat;
				}
				.box img {
					float:left;
					margin-right:15px;
					}
				.box h3 {
					padding-top:8px; margin-bottom:15px;
					font-size:26px; color:#ffffff; font-weight:normal; line-height:20px; text-transform:uppercase;
					}
				.box p {
					font-size:12px; line-height:17px;
					}
				.box a {
					display:block; position:absolute; right:15px; bottom:0px;
					width:73px; height:26px;
					padding-left:33px;
					font-size:12px; color:#ffffff; line-height:19px;
					background:url(../images/layout/more-btn.png) left top no-repeat;
					}
					.box a:hover {
						background-position:0 -26px;
						}

/*
= INNER PAGES ---------------- */

	/*
	+ Main content */
	
		#titleWrapper {
				width:100%; height:84px;
				background:url(../images/layout/tabs-holder-bgr.png) left top repeat-x;
				}			
			#titleHolder {
				width:100%;
				background:url(../images/layout/title-bgr.jpg) center top no-repeat;
				}
				#titleHolder h2 {
					width:940px; height:84px;
					margin:0px auto; padding-left:20px;
					font-size:30px; color:#333333; line-height:82px;
					}
		#innerContentHolder {
			width:100%;
			background:url(../images/layout/inner-content-bgr.png) center top repeat-y;
			}
			#innerContent {
				overflow:hidden;
				width:960px;
				padding:0 20px; margin:0px auto;
				}
				#mainContent {
					float:left;
					width:660px;
					padding:20px 0 30px;
					}
					#mainContent h3 {
						margin-bottom:25px;
						font-size:24px; color:#032b45;
						}
					#mainContent p {
						margin-bottom:25px;
						color:#333333; font-size:13px; line-height:18px;
						}
						#mainContent p a {
							color:#960000;
							}
							#mainContent p a:hover {
								text-decoration:underline;
								}
					.imgHolderLeft {
						float:left; 
						width:145px; height:145px;
						padding:14px 28px 18px 30px; margin:0 10px 10px -20px;
						background:url(../images/layout/image-holder.png) left top no-repeat;
						}
					.imgHolderRight {
						float:right;
						width:145px; height:145px;
						padding:14px 28px 18px 30px; margin:0 -20px 10px 10px;
						background:url(../images/layout/image-holder.png) left top no-repeat;
						}
				#sidebar {
					float:right;
					width:273px;
					padding:10px 0 30px;
					}
					#sidebar h3 {
						width:233px; height:52px;
						padding:0 20px; margin-bottom:10px;
						font-size:18px; font-weight:normal; color:#ffffff; line-height:40px; text-transform:uppercase;
						background:url(../images/layout/sidebar-title-bgr.png) left top no-repeat;
						}
					#sidebarProductsList {
						width:271px;
						margin:0px auto 20px;
						border-top:1px solid #dadada;
						}
						#sidebarProductsList li {
							border-top:1px solid #ffffff; border-bottom:1px solid #dadada;
							}
							#sidebarProductsList li.last {
								border-bottom:none;
								}
							#sidebarProductsList li a {
								display:block;
								width:271px; height:28px;
								}
								#sidebarProductsList li a.active, #sidebarProductsList li a:hover {
									background:url(../images/layout/sidebar-links-bgr.png) left top repeat-x;
									}
									#sidebarProductsList li a span {
										display:block;
										width:221px; height:28px;
										padding:0 20px 0 30px;
										line-height:28px; font-size:13px; color:#7d7d7d;
										background:url(../images/layout/red-bullet.png) 20px 12px no-repeat;
										}
									#sidebarProductsList li a.active span, #sidebarProductsList li a:hover span {
										color:#333333;
										}
					#sidebarContact {
						width:231px;
						padding:0 21px; margin-bottom:15px;
						}
						#sidebarContact li {
							position:relative;
							width:141px;
							padding-left:90px; padding-bottom:15px;
							font-size:13px; color:#7d7d7d; line-height:18px;
							}
							#sidebarContact li span {
								position:absolute; left:0px; top:0px;
								color:#032b45;
								}
							#sidebarContact li a {
								color:#960000;
								}
								#sidebarContact li a:hover {
									text-decoration:underline;
									}
					#sidebarMap {
						overflow:hidden;
						width:231px;
						padding:0 21px;
						}
						#sidebarMap a {
							float:left;
							margin:0 10px 0 -7px;
							outline:none;
							}
						#sidebarMap p {
							padding-top:12px;
							font-size:12px; color:#919191; line-height:17px;
							}
							
/*
= ABOUT ---------------- */

	/*
	+ Main content */
	
		#pdfList {
			margin-left:-4px;
			}
			#pdfList li {
				height:30px;
				padding-left:35px; margin-bottom:10px;
				background:url(../images/layout/pdf.png) left top no-repeat;
				}
				#pdfList li a {
					color:#960000; font-size:13px; line-height:30px;
					}
					#pdfList li a:hover {
						text-decoration:underline;
						}
					
/*
= PRODUCTS ---------------- */

	/*
	+ Main content */
	
		.productsList {
			float:left;
			margin-top:-14px;
			}
			.productsList li {
				float:left; position:relative;
				width:660px;
				padding:24px 0 14px;
				background:url(../images/layout/product-list-item-bgr.png) center top no-repeat;
				border-bottom:1px dotted #cccccc;
				}
				.productsList li.first {
					padding-top:14px;
					background:none;
					}
				.productsList li.last {
					border:none;
					}
				.productsList li div {
					float:left; position:relative;
					width:203px; height:177px;
					}
					.productsList li div a {
						display:block; position:absolute; right:40px; bottom:-17px;
						width:80px; height:23px;
						padding:3px 0 0 26px;
						background:url(../images/layout/more-btn.png) left top no-repeat;
						outline:none;
						}
						.productsList li div a span {
							display:block;
							height:13px; 
							padding-left:16px;
							font-size:12px; color:#ffffff; line-height:14px;
							background:url(../images/layout/zoom.png) left top no-repeat;
							}
						.productsList li div a:hover {
							background-position:0 -26px;
							}
				.productsList li ul {
					float:left;
					width:440px;
					}
					.productsList li ul li {
						width:440px;
						padding:0 0 0 15px; margin-bottom:10px;
						font-size:13px; color:#333333; line-height:18px;
						background:url(../images/layout/orange-bullet.png) left 6px no-repeat;
						border:none;
						}
				.cdvi {
					display:block; position:absolute; right:0px; top:24px;
					width:83px; height:25px;
					text-indent:-9999px;
					background:url(../images/layout/cdvi-logo.png) left top no-repeat;
					}
				.samsung {
					display:block; position:absolute; right:0px; top:24px;
					width:70px; height:25px;
					text-indent:-9999px;
					background:url(../images/layout/samsung-logo.png) left top no-repeat;
					}
				.suprema {
					display:block; position:absolute; right:0px; top:24px;
					width:71px; height:33px;
					text-indent:-9999px;
					background:url(../images/layout/suprema-logo.png) left top no-repeat;
					}
				.paradox {
					display:block; position:absolute; right:0px; top:24px;
					width:129px; height:8px;
					text-indent:-9999px;
					background:url(../images/layout/paradox-logo.png) left top no-repeat;
					}
				.sony {
					display:block; position:absolute; right:0px; top:24px;
					width:61px; height:11px;
					text-indent:-9999px;
					background:url(../images/layout/sony-logo.png) left top no-repeat;
					}
				.urmet {
					display:block; position:absolute; right:0px; top:24px;
					width:41px; height:19px;
					text-indent:-9999px;
					background:url(../images/layout/urmet-logo.png) left top no-repeat;
					}
				.productsList li.first span {
					top:14px !important;
					}

/*
= REFERENCE ---------------- */
	
	/*
	+ Reference list */
	
		.referenceList {
			}
			.referenceList li {
				padding:0 0 0 15px; margin-bottom:10px;
				font-size:13px; color:#333333; line-height:18px;
				background:url(../images/layout/orange-bullet.png) left 6px no-repeat;
				border:none;
				}


/*
= CONTACT ---------------- */
	
	/*
	+ Form */
	
		form {
			float:left;
			width:670px;
			padding-top:15px;
			}
			fieldset {
				float:left;
				width:315px;
				margin-right:30px;
				}
				fieldset label {
					display:block;
					margin-bottom:10px;
					font-size:13px; color:#333333;
					}
					fieldset label b {
						color:#960000;
						}
				fieldset span {
					display:block;
					width:285px; height:55px;
					margin:0 0 8px -8px; padding:0 15px;
					background:url(../images/layout/fld.png) left top no-repeat;
					}
					fieldset span input {
						width:285px; height:40px;
						line-height:40px; font-size:13px;
						background:none;
						border:none;
						outline:none;
						}
					fieldset span.active {
						background-position:0 -55px;
						}
				fieldset.last {
					margin:0px;
					}
					fieldset.last span {
						height:224px;
						padding:5px 15px;
						background-image:url(../images/layout/text-area.png);
						}
						fieldset span textarea {
							overflow-y:auto;
							width:285px; height:210px;
							line-height:18px; font-size:13px;
							background:none;
							border:none;
							outline:none; resize:none;
							}
						fieldset.last span.active {
							background-position:0 -234px;
							}
					#info {
						float:left;
						line-height:44px; color:#960000; font-size:12px;
						}
					#sendBtn {
						float:right;
						width:103px; height:42px;
						margin-right:15px;
						font-size:15px; color:#ffffff; line-height:38px; text-shadow:0 1px 0 #000000;
						background:url(../images/layout/send-btn.png) left top no-repeat;
						cursor:pointer;
						}
						#sendBtn:hover {
							background-position:0 -42px;
							}
				
						
.jqueryslidemenu ul li ul {
	position: absolute; left: 0; display: block; 
	width:200px;
	margin-top:0px;
	visibility: hidden;
	border:none !important;
	}
	.jqueryslidemenu ul li ul li {
		display: list-item;
		width:200px !important; height:36px !important;
		background:url(../images/layout/submenu-item-second.png) left top no-repeat;
		border:none !important;
		}
		.jqueryslidemenu ul li ul li.second {
			background-image:url(../images/layout/submenu-item-first.png);
			}
		.jqueryslidemenu ul li ul li ul {
			top: 0;
			}
		.jqueryslidemenu ul li ul li a {
			display:block;
			width:180px !important; height:26px !important;
			padding:10px 0 0 20px !important;
			}
			.jqueryslidemenu ul li ul li a span {
				display:block;
				height:16px !important;
				background-position:left top;
				background-repeat:no-repeat;
				}
				.jqueryslidemenu ul li ul li a:hover span, .jqueryslidemenu ul li ul li a.activeSub span  {
					background-position:0 -16px !important;
					}
				.jqueryslidemenu ul li ul li a span.protivprovalniSistemi {
					width:119px !important;
					background-image:url(../images/layout/protivprovalni-sistemi-btn.png);
					}
				.jqueryslidemenu ul li ul li a span.protivpozarniSistemi {
					width:115px !important;
					background-image:url(../images/layout/protivpozarni-sistemi-btn.png);
					}
				.jqueryslidemenu ul li ul li a span.videoNadzor {
					width:111px !important;
					background-image:url(../images/layout/video-nadzor-btn.png);
					}
				.jqueryslidemenu ul li ul li a span.karticnaKontrola {
					width:93px !important;
					background-image:url(../images/layout/karticna-kontrola-btn.png);
					}
				.jqueryslidemenu ul li ul li a span.interfonskiSistemi {
					width:101px !important;
					background-image:url(../images/layout/interfonski-sistemi-btn.png);
					}
					
/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{}
    #cboxContent{margin-top:20px;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../images/layout/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../images/layout/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext.hover{background-position:bottom right;}
        #cboxLoadingOverlay{background:#000;}
        #cboxLoadingGraphic{background:url(../images/layout/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../images/layout/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose.hover{background-position:bottom center;}