@import ("reset.css"); 
@import url(reset.css); 
* { margin:0; padding:0; } 

body { color: #666; font-size:62.5%; font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, Arial, sans-serif; line-height:150%; background-color: #FFFFFF; /* background-image: url(../images/bg.jpg); background-repeat: repeat-x; */ text-align:center; margin: 0; padding: 0; } 

h1 { font-size: 2em; line-height: 1.3em; font-weight: normal; margin-bottom: 15px; color: #8e8e8e; } 
.cufon-loading h1 { visibility: hidden !important; }
.cufon-ready h1 { font-size: 2.4em; line-height: 1em; }

h2 { font-size: 2em; line-height: 1.2em; font-weight: normal; margin-bottom: 15px; color: #222; }
.cufon-loading h2 { visibility: hidden !important; }
.cufon-ready h2 { font-size: 2.4em; font-weight: normal; line-height: 1em; }

h3 { font-size: 1.5em; line-height: 1.2em; font-weight: bold; margin-bottom: 10px; color: #333; } 
.cufon-loading h3 { visibility: hidden !important; }
.cufon-ready h3 { font-size: 1.8em; line-height: 1em; }

h4 { font-size: 1.3em; font-weight: normal; line-height: 1.5em; margin-bottom: 5px; } 
h5 { font-size: 0em; font-weight: normal; line-height: 1.5em; margin-bottom: 0px; } 
h6 { font-size: 0em; font-weight: bold; line-height: 1.5em; margin-bottom: 0px; } 

p, li { font-size: 1.2em; line-height: 1.5em; } 
p { margin-bottom: 15px; } 

a:link, a:visited, a:active { color: #A5295F; text-decoration: none; } 
a:hover { color: #D9367D; text-decoration: none; } 

.hide {display: none; }

/* 
	 Background and containers 
 	 --------------------------------------------------------------------
*/

div#container { background-color: #FFFFFF; margin: 0px auto 0px; text-align: left; width: 938px;  } 
div#pageholder { width: 100%; display: block; } 

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

div#header { background-position: 0px 30px; background-image: url(../images/midnight_integrated_systems_logo.png); background-repeat: no-repeat; width:938px; height: 220px; margin-bottom: 0px; overflow: hidden; } 
div#header div#logo { margin-top: 30px; width: 279px; height: 106px; float: left; }
div#header div#header_right { float: right; width: 500px; padding-top: 25px; }
div#header div#header_right div#contact_details { margin-bottom: 25px; }
div#header div#header_right div#contact_details p { text-align: right; margin-bottom: 4px; color: #8e8e8e; line-height: 1em; }
div#header div#header_right div#contact_details p a { color: #8e8e8e; zoom: 1; background-color: white }
div#header div#header_right div#contact_details p a:hover { color: #A5295F; }

div#header div#header_right div#contact_details p#tel { font-size: 1.8em;}
.cufon-loading div#header div#header_right div#contact_details p#tel { visibility: hidden !important; }
.cufon-ready div#header div#header_right div#contact_details p#tel { font-size: 2.1em;  }

div#header div#header_right div#contact_details p#email { font-size: 1.5em; }
.cufon-loading div#header div#header_right div#contact_details p#email { visibility: hidden !important; }
.cufon-ready div#header div#header_right div#contact_details p#email { font-size: 1.7em; }

div#header div#header_right div#strapline { padding-right: 20px; background-image: url(../images/strapline_colour_squares.png); background-position: right 5px; background-repeat: no-repeat; }
div#header div#header_right div#strapline h1 { text-align: right; }
div#header div#header_right div#strapline h1 a { color: #8e8e8e; }
div#header div#header_right div#strapline h1 a span.highlight { font-size: 0.9em; color: #A5295F; }


/* 
	 Main Column 
 	 --------------------------------------------------------------------
*/


div.top_section { margin-bottom: 30px; clear: both; overflow: hidden; height: 416px; }
div.top_section div.slideshow { z-index: 0; position: absolute;  }

div.left_menu { width: 214px; height: 416px; background-image: url(../images/menu_bg.jpg); margin-bottom: 30px; }
div.left_menu ul { padding: 10px 5px 0px 20px; }
div.left_menu ul.project_items li { font-size: 1.1em; margin-bottom: 7px; }
div.left_menu ul li { margin-bottom: 4px; font-size: 1.7em; line-height: 1em; }

.cufon-loading div.left_menu ul li { visibility: hidden !important; }
.cufon-ready div.left_menu ul li {  }

div.left_menu ul li#projects { padding-top: 15px; margin-bottom: 0px; }
div.left_menu ul li a { color: #fff; }
div.left_menu ul li a:hover, div#left_menu ul li a.current:hover { color: #A5295F; }
div.left_menu ul li a.current { color: #A5295F; }



div.left_menu_home { z-index: 1; position: absolute; background-image: url(../images/trans.png); margin-bottom: 0px; }
div.left_menu_home ul { padding: 10px 5px 0px 20px; }
div.left_menu_home ul li a { color: #fff; }
/*
div.top_section div.left_menu_home ul li a:hover, div.top_section div#left_menu ul li a.current:hover { color: #A5295F; }
div.top_section div.left_menu_home ul li a.current { color: #A5295F; }
*/
div#main {  }
div.main_home {  }
div.main_all { } 

div.btn { margin-bottom: 30px; }

div#main div.quick_links { border: 1px solid #aaa; padding: 14px; font-size: 1.1em; overflow: hidden; margin-bottom: 30px; }
div#main div.quick_links ul li a { background-image: url(../images/btn_jump_to.png); background-repeat: no-repeat; background-position: 0 6px; padding-left: 17px; }
div#main div.quick_links ul li a:hover { background-position: -700px 6px; }

div#main div.btn_back_to_top a { background-image: url(../images/btn_back_to_top.png); background-repeat: no-repeat; background-position: 0 4px; padding-left: 17px; }
div#main div.btn_back_to_top a:hover { background-position: -700px 4px; }

div#main div.press_box { border: 1px solid #aaa; padding: 14px; font-size: 1.1em; overflow: hidden; margin-bottom: 30px; }
div#main div.press_box h3 a { color: #333; }
div#main div.press_box h3 a:hover { color: #A5295F; }
  
div#main h1 {  } 
div#main p {  } 
div#main p.intro {  } 
div#main blockquote {  } 
div#main blockquote p {  } 
div#main ul { } 
div#main li { } 
div#main ul.bullets { margin: 0 0 15px 15px; } 
div#main ul.bullets li { margin-bottom: 3px; list-style-type: disc; } 
div#main ul.nobullets { margin: 0 0 15px 0; } 
div#main ul.nobullets li { list-style-type: none; } 
div#main ul.tight li { margin-bottom: 0px; } 

div#main img.fullwidth { margin-bottom: 15px; } 
div#main img.rightpic { float: right; clear: both; margin-top: 3px; margin-bottom: 15px; margin-left: 15px; } 
div#main img.leftpic { float: left; clear: both; margin-top: 3px; margin-bottom: 15px; margin-right: 15px; } 



/* 
	 Left Column 
 	 --------------------------------------------------------------------
*/

div.left { margin-right: 30px; float: left; width: 214px; padding-bottom: 25px;  } 
div.main_home div.left { width: 184px; } 

/* 
	 Centre Column 
 	 --------------------------------------------------------------------
*/

div.centre { margin-right: 30px; float: left; padding-bottom: 25px; width: 460px; } 
div.full { float: left; padding-bottom: 25px; width: 694px; } 


	/* Centre - Home */
div.main_home div.centre { width: 310px; margin-left: 0px; } 
div.main_even_cols div.centre { width: 332px; margin-left: 0px; } 

	/* Centre - Columns */
div.centre div.two_column { width: 200px; margin-right: 30px; display: inline; float: left; }
div.centre div.fitted { width: 230px; margin-right: 30px; display: inline; float: left; }
div.centre div.fitted div.end { margin-right: 0; }

	/* Clients */
div.clients ul.nobullets li { font-size: 1.2em; line-height: 1.3em; margin-bottom: 6px; }


	/* Brands */
div.brands div.section { width: 662px; margin-bottom: 30px; float: left; clear: both; /* padding: 15px; border: 1px dotted; */ overflow: hidden }
div.brands div.section h3 { margin-bottom: 30px; border-bottom: 1px dotted; padding-bottom: 4px; }
div.brands ul li { float: left; margin: 0 40px 30px 0; min-width: 175px; text-align: center; }

/* '.brands' is the styles for the original large logos which I thought looked to big. '.brands2' is the resized smaller version */

div.brands2 div.section ul { width: 664px; margin-bottom: 30px; float: left; clear: both; padding: 14px 14px 0; border: 1px solid #aaa; overflow: hidden }
div.brands2 div.section h3 { margin-bottom: 0px; border: 2px solid #aaa; border-width: 3px 4px; background-color: #aaa; color: #fff; display: inline; margin-bottom: 2px; font-size: 1.4em; line-height: 1.5em; clear: both; }
div.brands2 ul li { float: left; margin: 0 9px 20px 0; width: 123px; text-align: center; }
div.brands2 ul.fitted li { margin: 0 12px 20px 0; }
div.brands2 ul.fitted li.end { margin-right: 0; }


	/* Gallery */
div.gallery	div.section ul { width: 664px; margin-bottom: 30px; float: left; clear: both; padding: 14px 14px 3px; border: 1px solid #aaa; overflow: hidden }
div.gallery div.section h3 { margin-bottom: 0px; border: 2px solid #aaa; border-width: 3px 4px; background-color: #aaa; color: #fff; display: inline; margin-bottom: 2px; font-size: 1.4em; line-height: 1.5em; clear: both; }


div.gallery	ul li { float: left; margin: 0 6px 6px 0; }
div.gallery	ul li a { display: block; padding: 0; margin: 0; line-height: 1em; }
div.gallery	ul li a img { width: 64px; height: 64px; }	


div.gallery	ul.fitted li { float: left; margin: 0 11px 11px 0; }

div.gallery	ul.fitted li.end { margin-right: 0; }

	/* In-Page Gallery */
div.in_page_gallery ul { width: 428px; margin-bottom: 30px; float: left; clear: both; padding: 14px 14px 4px; border: 1px solid #aaa; overflow: hidden }
div.in_page_gallery	ul li { float: left; margin: 0 8px 8px 0; }
div.in_page_gallery	ul li a { display: block; padding: 0; margin: 0; line-height: 1em; }
div.in_page_gallery	ul li a img { width: 63px; height: 63px; }

div.in_page_gallery	ul.fitted li { float: left; margin: 0 10px 10px 0; }
div.in_page_gallery	ul.fitted li.end { margin-right: 0; }

	/* Latest Tech */
ul.latest_tech { }
ul.latest_tech li.logo {  float: left; width: 100px; margin-right: 15px; text-align: right; }
ul.latest_tech li.text {  float: left; width: 340px; margin-bottom: 20px; }

/* 
	 Right Column 
 	 --------------------------------------------------------------------
*/

div.right { width: 204px; float: left; padding-bottom: 25px; }

div.right div.ad { border: 1px solid #aaa; font-weight: bold; padding: 14px 14px 0; overflow: hidden; margin-bottom: 20px; background-color: #fff; display: block; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #fff,  #ddd); /* for firefox 3.6+ */ 
}
div.right div.ad_gallery { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d7e6f1'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d7e6f1)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #fff,  #d7e6f1); /* for firefox 3.6+ */ 
}

div.right div.ad_press { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ebdade'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ebdade)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #fff,  #ebdade); /* for firefox 3.6+ */ 
}

div.right div.ad_project { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dde8cd'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dde8cd)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #fff,  #dde8cd); /* for firefox 3.6+ */ 
}

div.right div.ad h2 a { color: #000; }
div.right div.ad h3 a { color: #777; }

	/* Right - Home */
div.main_home div.right { width: 384px; } 
div.main_home div.right div.ad_section { width: 384px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ccc; background-repeat: no-repeat; clear: both; }
div.main_home div.right div.ad_section p { margin-bottom: 0px; }
div.main_home div.right div.ad_image { margin-right: 19px; width: 97px; float: left; clear: left; }
div.main_home div.right div.ad_text { width: 268px; float: right; clear: right; }
div.main_home div.right div.ad_text h3 a { color: #666; }
div.main_even_cols div.right { width: 332px; } 


div.right div#ad_technology { background-image: url(../images/ad_img_hdtv.png); }

/* 
	 Accreditations 
 	 --------------------------------------------------------------------
*/
div#logoParade { clear: both; width: 938px; height: 58px; margin-bottom: 30px; } 
div#logoParade img { float: left; margin-right: 30px; }
#logoParade div.scrollableArea *
	{
		float: left;
		padding-left: 10px;
	}
	
	/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_left.png), url(images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.png), url(images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}
div#accreditations { width: 938px; clear: both; height: 90px; overflow: hidden; } 
div#accreditations ul { } 
div#accreditations ul li { float: left; margin-right: 48px; }
div#accreditations ul li.end { margin-right: 0px; }


/* 
	 Footer 
 	 --------------------------------------------------------------------
*/

div#footer { border-top: 1px solid #ccc; background-color: #FFFFFF; padding: 10px 0px 25px 0px; width: 938px; clear: both; } 
div#footer div#copyright { float: left; width: 600px; overflow: hidden; }
div#footer div#copyright p { font-size: 1.2em; color: #666666; margin-bottom: 2px; } 
div#footer div#copyright p span { padding-right: 15px; margin-right: 13px; background-image: url(../images/nav_divider.png); background-position: right 3px; background-repeat: no-repeat; }
div#footer div#copyright p span.end { background-image: none; }
div#footer div#copyright p a { color: #666; }
div#footer div#copyright p a:hover { color: #D9367D; }
div#footer div#copyright div#cedia_logo a { background-image: url(../images/supplier_logo_cedia.png); background-repeat: no-repeat; display: block; overflow: hidden; width: 45px; height: 45px; margin: 20px 0px; }

div.accreditations { padding: 20px 0; float: left; clear: both;    width: 990px; }
div.accreditations ul { float: left; clear: both; }
div.accreditations ul li { float: left; margin-right: 30px; }

div#footer div#credit { float: right; width: 97px; }
div#footer div#credit a, div#credit a:link, div#credit a:visited { width: 97px; text-indent: 0px; overflow: hidden; }
div#footer div#credit a:hover { text-indent: -97px; }
div#footer div#credit a#ie6 { display: none; }
div#footer div#credit a#not_ie6 { display: block; }

/* 
	 Misc 
 	 --------------------------------------------------------------------
*/

div.clear { clear: both; } 
li.clear { clear: both; }

/* 
	 Third Party CSS 
 	 --------------------------------------------------------------------
*/


/**
 * jQuery Cookie Compliance plugin
 * This jQuery plugin was inspired and based on Cookie Compliance Code v1.000 from http://www.kartris.com/)
 * and adapted by Pad Creative.
*/
#cookieMessageWrapper
{
	background: #aaa;
	font-family: Arial,Helvetica,Sans-Serif; 
	font-size: 1em; 
	font-weight: normal; 
	color: #fff;
	padding: 0;
	margin: 0;
	display: none;
	border-bottom: solid 1px #666;
	background: #aaaaaa; /* Old browsers */
	background: -moz-linear-gradient(top,  #aaaaaa 0%, #888888 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaaaaa), color-stop(100%,#888888)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #aaaaaa 0%,#888888 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #aaaaaa 0%,#888888 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #aaaaaa 0%,#888888 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #aaaaaa 0%,#888888 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#888888',GradientType=0 ); /* IE6-8 */

}
#cookieMessage
{
	width: 938px; /* this needs to be set to the width of the centre container */
	padding: 3px 0 7px 0;
	margin: 0 auto;
	position: relative;
	text-align: left;
}
#cookieMessage:after
{
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
#cookieMessage p
{
	margin: 5px 0 0;
}
#cookieMessage p a { color: #A5295F; }
#cookieMessage p a:hover { color: #666; }
a#cookieClose
{
	float: right;
	display: block;
	background-image: url(../images/close.png);

	background-repeat: no-repeat;
	width: 15px;
	height: 15px;
	z-index: 100;
	
	text-decoration: none;
	background-color: transparent;
	border: solid 0px #555;
	border-radius: 3px;
	color: #fff;
	font-size: 1.1em;
	text-transform: lowercase;
	margin-top: 5px;
	font-weight: bold;

}
a#cookieClose:hover { opacity: 0.8; }


/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}


/* Landing December 2015 */

#landing-page h1 {  font-size: 3.7em; padding-left: 150px; color: #222; font-size: 3.8em; font-family: "azo-sans-web"; font-weight: 400; line-height: 1.4em; background-image: url(/images/landing-hikvision/icon-cctv.jpg); background-repeat: no-repeat; margin-bottom: 20px; }

#landing-page .form-outer { background-color: #E6E6E6; padding: 30px; margin-bottom: 50px; }

#landing-page .form-outer .form-col { width: 49%; margin-right: 4%; float: left;  }
#landing-page .form-outer .form-col.end { width: 47%; margin-right: 0%;  }

#landing-page .form-outer .form-col p.bullet { padding-left: 100px; min-height: 75px; background-repeat: no-repeat; font-size: 1.6em; line-height: 1.3em; }
#landing-page .form-outer .form-col p.bullet span.red { color: #A5295F; }

#landing-page .form-outer .form-col p.bullet.hd { background-image: url(/images/landing-hikvision/icon-hd.png); }
#landing-page .form-outer .form-col p.bullet.hybrid { background-image: url(/images/landing-hikvision/icon-hybrid.png); }
#landing-page .form-outer .form-col p.bullet.uhd { background-image: url(/images/landing-hikvision/icon-uhd.png); }

#landing-page .form-outer .form-col .arrow-box { padding: 15px 60px 15px 15px; color: #fff; background-image: url(/images/landing-hikvision/grey-arrow.png); background-size: 100% 100%; margin-bottom: 30px; }

#landing-page .form-outer .form-col .arrow-box p { margin-bottom: 0; font-size: 1.3em; }

#landing-page .form-outer .form-col .arrow-box h3 { color: #fff; margin-bottom: 15px; }

#hickvision-cred p {  }
#hickvision-cred img { float: left; }

/* Clearfix */
#landing-page .group:before,
#landing-page .group:after { content: ""; display: table; }
#landing-page .group:after { clear: both; }
#landing-page .group { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }


#quote-form input, #quote-form button, #quote-form textarea { -webkit-appearance: none; white-space: normal; box-sizing: content-box; border: 0px; line-height: 1em; padding: 0; margin: 0; font-weight: normal; font-family: inherit; display: block; }

#quote-form input[type='submit'], #quote-form button { cursor: pointer;
-o-transition: background-color 0.2s, color 0.2s, opacity 0.2s;	
-moz-transition: background-color 0.2s, color 0.2s,  opacity 0.2s;	
-webkit-transition: background-color 0.2s, color 0.2s, opacity 0.2s;	
transition: background-color 0.2s, color 0.2s, opacity 0.2s; }

#quote-form { background-color: #A5295F; padding: 15px 30px; color: #fff; }
#quote-form h3 { color: #fff; font-family: "azo-sans-web"; font-weight: normal;  font-size: 3.5em; margin-bottom: 13px; }

#quote-form ul { margin: 0px; } 
#quote-form ul li { list-style: none; margin: 0 0 13px 0; }
#quote-form input,
#quote-form textarea { display: block; width: 100%; font-size: 1em; line-height: 1.5em; font-size: 1.5em; color: #222; }

#quote-form textarea::-webkit-input-placeholder { color: #A5295F; }
#quote-form textarea:-moz-placeholder { color: #A5295F; }
#quote-form textarea::-moz-placeholder { color: #A5295F; }
#quote-form textarea:-ms-input-placeholder { color: #A5295F; }

#quote-form input::-webkit-input-placeholder { color: #A5295F; }
#quote-form input:-moz-placeholder { color: #A5295F; }
#quote-form input::-moz-placeholder { color: #A5295F; }
#quote-form input:-ms-input-placeholder { color: #A5295F; }

#quote-form textarea { color: #A5295F; } 

#quote-form textarea { height: 100px; }

#quote-form div.field { padding: 3px 5px; background-color: #fff; }

#quote-form p,
#quote-form label { color: #fff; font-size: 1.5em; margin-bottom: 13px; }

#quote-form input[type="submit"] { display: block; padding: 7px 0; width: 100%; font-size: 2.2em; text-transform: uppercase; background-color: #808080; color: #fff; line-height: 1.3em; background-image: url(/images/landing-hikvision/send-now.png); background-repeat: no-repeat; background-position: right center; margin-bottom: 20px; }

#quote-form input[type="submit"]:hover { background-color: #222; color: #fff; }

#quote-form img.padlock { float: left; }
#quote-form p.privacy { font-size: 12px; margin-left: 30px; margin-bottom: 0;}

#quote-form ul li.submit { margin-bottom: 0; }

p.thanks { font-size: 2.5em; }

#header.landing-header { height: 170px; }

#container .request-quote { background-color: #A5295F; color: #fff; padding: 7px 15px; display: inline-block; font-size: 1.3em; margin-top: 20px; line-height: 1.3em; }
#container .request-quote:hover { background-color: #8e8e8e; }
#container .request-quote.main { font-size: 1.6em; margin-top: 10px; }

#quote-form p.errormes { color: yellow; }

#quote-form .nopointer { color: #fff; }