body {margin:0; padding:0; font-size:15px; font-family:Calibri, Century Gothic, sans-serif; color:#666; /*background:url(../images/bg.png);*//* Old browsers */
/*background: -moz-linear-gradient(top,  #721d55 16%, #cf41a2 100%, #cf41a2 100%); /* FF3.6+ */
/*background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,#721d55), color-stop(100%,#cf41a2), color-stop(100%,#cf41a2)); /* Chrome,Safari4+ */
/*background: -webkit-linear-gradient(top,  #721d55 16%,#cf41a2 100%,#cf41a2 100%); /* Chrome10+,Safari5.1+ */
/*background: -o-linear-gradient(top,  #721d55 16%,#cf41a2 100%,#cf41a2 100%); /* Opera 11.10+ */
/*background: -ms-linear-gradient(top,  #721d55 16%,#cf41a2 100%,#cf41a2 100%); /* IE10+ */
/*background: linear-gradient(to bottom,  #721d55 16%,#cf41a2 100%,#cf41a2 100%); /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#721d55', endColorstr='#cf41a2',GradientType=0 ); /* IE6-9 */
}

img {max-width:100%; border:none; max-height:100%;}

a {color:#c00000; text-decoration:none;}
a:hover {text-decoration:underline;}

.nav_wrap {position: relative; width: 100%; text-align: left; margin: 0px; height: 40px; background: transparent;
}
nav{
	
	display: block;
	margin: auto 0;
	text-align: center;
	min-width: 100%;
	float-left;
}

h1, h2, h3, h4, h5 {color:#666;}

.content-box {border:1px solid #dcdcdc; border-top:none; background:#fdfdfd; padding:15px; border-bottom-right-radius:8px; border-bottom-left-radius:8px; margin-bottom:5px;}
.content {
	width:90%;
	position:relative;
	margin:0 auto;}


.listing {background:#fff; padding:10px; border:1px solid #f0f0f0; border-radius:8px; margin-bottom:15px; max-width:100%;}
.listing h4{color:#666;}
.listing a {}
.listing h5 {margin:0;}

.listing-image {width:180px; margin-right:5px; margin-top:5px;}
.listing-description {max-width:100%; color:#808080; font-size:10px; line-height:18px;}

.listing-links, .listing-meta {width:90%; margin-top:10px; font-size:10px; color:#c00000;}
.listing-meta {width:30%;}
.listing-meta {text-align:right;}


textarea {height:50px;}

label {display:block; font-size:12px; color:#c00000; margin:5px 0;}
select {height:30px; width:202px;}

.footer {max-width:80%; margin:auto; margin-top:30px; text-align:center; vertical-align:top }

td {vertical-align:top;}
th {background:#CCCCCC; color:#000000; text-align:left;}

.success {background:#edfced; border:1px solid #54b91d; color:#4f8a10;}
.error {background:#fdd5ce; border:1px solid #d8000c; color:#d8000c; padding:10px;}
.box{font-size:13px; font-weight:bold;; position:relative; padding:10px; border-radius:8px; margin-bottom:5px;}
.box .close{position:absolute; top:3px; right:3px;}

/** basic default styles **/
html { margin: 0; padding: 0; }

a { color: #7BA4E2; text-decoration: none; }
a:hover { text-decoration: underline; }

span.chyron { font-size: 1.2em; padding-top: 10px; }

/** main blocks **/
#container { 
display: block;
max-width: 100%;
margin: 0 auto; 
margin-top: 5px; 
margin-bottom: 66px;
padding: 20px 15px; 
background: #fff; 
border-radius: 6px; 
-webkit-border-radius: 6px; 
-moz-border-radius: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; 
box-sizing: border-box;  
}

/** the form elements **/
#register_form { box-sizing: border-box; }

#register_form .txtinput { 
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 5px;
font-size: 1em;
padding: 5px 5px;
padding-left: 5px;
width: 50%;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}

#register_form .txtinput:focus { 
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
outline: 0 none; 
}
/*
#register_form input#name {
background: #fff url('images/user.png') 5px 4px no-repeat;
}
#register_form input#email {
background: #fff url('images/email.png') 5px 4px no-repeat;
}
#register_form input#website {
background: #fff url('images/website.png') 5px 4px no-repeat;
}
#register_form input#telephone {
background: #fff url('images/phone.png') 5px 4px no-repeat;
}*/

#register_form textarea {
display: block;
font-family: Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 5px;
font-size: 1em;
padding: 11px 25px;
padding-left: 10px;
width: 50%;
height: 120px;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#register_form textarea:focus {
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
outline: 0 none; 
}
#register_form textarea.txtblock {
background: #fff url('images/speech.png') 5px 4px no-repeat;
}

#register_form #slider { width: 60%; }

#register_form #aligned { 
box-sizing: border-box; 
float: left; 
width: 450px; 
margin-right: 50px; 
}
#register_form #aside {
	float: left;
	width: 250px;
	padding: 0;
	box-sizing: border-box;
}

span.radiobadge { display: block; margin-bottom: 8px; }
span.radiobadge label { font-size: 1.2em; padding-bottom: 4px; }

select.selmenu {
font-size: 10px;
color: #676767;
padding: 5px !important;
border: 1px solid #aaa;
width: 200px;
}

/** custom buttons **/

#buttons { display: block; padding-top: 10px; }
#buttons #resetbtn {
color: #515151;
text-shadow: -1px 1px 0px #fff;
margin-right: 20px;
height: 3em;
padding: 0 1em;
outline: 0;
font-weight: bold;
font-size: 1em;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #fff;
background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(240,240,240) 2%, rgb(222,222,222) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(240,240,240)), color-stop(100%,rgb(222,222,222)));
background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);
background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);    background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);
background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 );
border: 1px solid #969696;
box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
-moz-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
-webkit-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}

#buttons #resetbtn:hover {
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);	
color: #818181;
background-color: #fff;
background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(244,244,244) 2%, rgb(229,229,229) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-stop(100%,rgb(229,229,229)));
background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
border-color: #aeaeae;
box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
}

#buttons #submitbtn {
height: 3em;
padding: 0 1em;
border: 1px solid;
outline: 0;
font-weight: bold;
font-size: 1em;
color:  #fff;
text-shadow: 0px 1px 0px #222;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border-color: #5e890a #5e890a #000;
-moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
-ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
background-color: rgb(226,238,175);
background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38))); 
background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
background-image: -o-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
background-image: -ms-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
background-image: linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2eeaf', endColorstr='#90b026',GradientType=0 );
}
#buttons #submitbtn:hover, #buttons #submitbtn:active {
border-color: #7c9826 #7c9826 #000;
color: #fff;
-moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
background: rgb(228,237,189);
background: -moz-linear-gradient(top, rgb(228,237,189) 2%, rgb(207,219,120) 3%, rgb(149,175,54) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(228,237,189)), color-stop(3%,rgb(207,219,120)), color-stop(100%,rgb(149,175,54))); 
background: -webkit-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 
background: -o-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: -ms-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4edbd', endColorstr='#95af36',GradientType=0 );
}

/** @group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/** all devices and responsive browser windows **/
@media screen and (max-width: 90%) {
	#container {
		width: 20%;
	}
	#register_form #aligned {
		width: 20%;
		float: none;
		display: block;
	}
	#register_form #aside {
		width: 20%;
		display: block;
		float: none;
	}
	#register_form .txtinput, #register_form textarea {
		width: 20%;
	}
	#prioritycase {
		float: left;
		display: block;
	}
	#recipientcase {
		float: left;
		display: block;
		margin-right: 55px;
	}
}


/* smaller screen dropoff *******/
@media only screen and (max-width: 90%) {
 	#register_form .txtinput, #register_form textarea {
		width: 80%;
	}
}

/* iPhone Landscape ********/
@media only screen and (max-width: 90%) {
	body {
		padding: 0px 0px;
	}
	select.selmenu {
		width: 190px;
	}
}

/* iPhone portrait *******/
@media only screen and (max-width: 90%) {
	body {
		padding: 0px 0px;
	}
 	#register_form .txtinput, #register_form textarea {
		width: 70%;
	}
	#register_form #aligned {
		overflow: hidden;
	}
	select.selmenu {
		width: 160px;
	}
	#recipientcase {
		margin-right: 30px;
	}
}
.amPmCheckbox input[type="checkbox"] {
    display: none;
}
.amPmCheckbox input[type="checkbox"]+label {    
	background: url('http://www.saprintdirectory.co.za/images/off.png') no-repeat;
    height:60px;
	width:60px;
}
.amPmCheckbox input[type="checkbox"]:checked + label {
    background: url('http://www.saprintdirectory.co.za/images/on.png')  no-repeat;
    height:60px;
	width:60px;
}

.RequestQuote{
    float:right;
	background:url('http://www.saprintdirectory.co.za/images/request_quote.png') no-repeat;
    cursor:pointer;
    border:none;
    width:90px;
    height:93px;
}

RequestQuote:active {
     background:url('http://www.saprintdirectory.co.za/images/request_quote.png') no-repeat;
}

.sidebar_left {
	float:left;
	z-index: -1;
	}
	
.sidebar_right {
	float:right;
	z-index: -1;
	}

ul {
  text-align: left;
  font: sans-serif;
  font-size:8px;
  display: inline;
  margin: 0;
  list-style: none;
}
ul li {
  display: inline-block;
  position: relative;
  background: #fff;
  cursor: pointer;
}
ul li:hover {
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 51px;
  left: 0;
  opacity: 0;
  visibility: hidden;
  border-color:#000000;
  z-index:10;
}
ul li ul li { 
  background: #fff; 
  display: block; 
  color: #000;
  width:200px;
}
ul li ul li:hover {}
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

/*----------------------------
	CSS3 Animated Navigation
-----------------------------*/


.fancyNav{
	/* Affects the UL element */
	overflow: hidden;
	display: inline-block;
	min-width:80%;
	float:left;
}

.fancyNav li{
	/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
	
	
	
	
	
	/* Adding a 1px inset highlight for a more polished efect: */
	
	
	
	position:relative;
	
	float: left;
	list-style: none;
}

.fancyNav li:after{

	/* This creates a pseudo element inslide each LI */	
	
	content:'.';
	text-indent:-9999px;
	overflow:hidden;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:1;
	opacity:0;
	
	/* Gradients! */
	
	
	
	/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
	
	
	
	/* This will create a smooth transition for the opacity property */
	
	-moz-transition:0.25s all;
	-webkit-transition:0.25s all;
	-o-transition:0.25s all;
	transition:0.25s all;
}

/* Treating the first LI and li:after elements separately */

.fancyNav li:first-child{
	/*border-radius: 0px 0 0 0px;*/
}

.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
	
	
	/*border-radius:4px 0 0 4px;*/
}

.fancyNav li:last-child{
	/*border-radius: 0 4px 4px 0;*/
}

/* Treating the last LI and li:after elements separately */

.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
	
	/*border-radius:0 4px 4px 0;*/
}

.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
	/* This property triggers the CSS3 transition */
	opacity:1;
}

.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
	/* Hides the targeted li when we are hovering on the UL */
	opacity:0;
}

.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
	opacity:1 !important;
}

/* Styling the anchor elements */

.fancyNav li:first-child a {padding-left:2px;}
.fancyNav li a{
	color: #5d5d5d;
	display: inline-block;
	font: 14px/1 Century Gothic,Arial,sans-serif;
	padding: 12px 20px 14px;
	position: relative;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
	z-index:2;
	text-decoration:none !important;
	white-space:nowrap;
}


.fancyNav li.home{
	background:url('../images/register.png') no-repeat right;
	padding-right:7px;
	
}
.fancyNav li.login{
	background:url('../images/login.png') no-repeat right;
	padding-right:7px;
}

img {max-width:100%;}
	
.wrapper {max-width:1100px; margin:auto;}

.sidebar-left, .sidebar-right {width: 15.4545%; float:left;}



.sidebar-left img, .sidebar-right img {display:block;}

.main-content {width:69.0915%; float:left;}


.main-navigation {
	
	float:right;
	width:75%;
	
	}
.left-navigation {float:left;}
.right-navigation {float:right;}
.fancyNav {padding-left:0px;}
.clear{clear:both;}
.primary, .footer {width:100%; clear:both;}

.menu-toggle {display: none;}
.top-banner {float:right; margin-top:10px; height: 170px; min-width:100px;}
.top-banner img{height:170px;}

.top-logo {margin-top:20px; float:left; height:180px; }
.top-logo img {height:170px;}
@media screen and (max-width: 1045px) {
	.main-navigation {margin-top:0; float: none;
    
    width: 90%;}
}
@media screen and (max-width: 920px) {
	.fancyNav li a {padding: 12px 15px 14px;}
	
}
@media screen and (max-width: 760px) {
.top-logo img {width:300px;}
.contact-details, .map {display:block;}

.before-request-quote-cell {width:100%; display:block; }
.request-quote-cell {text-align:center; width:100%; display:block;}
input[type="image"] {max-width:90%;}
	.filter-form td{display:block;}
	.left-navigation {width:100%;}
	.right-navigation {width:100%;}
	.menu-toggle {display:block;width:100%; text-align:center; padding:12px 0 14px;
		background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(1, #e6e6e6));
		background-image: -moz-linear-gradient(#FEFEFE 0%, #E6E6E6 100%);
		background-image: -o-linear-gradient(#FEFEFE 0%, #E6E6E6 100%);
		background-image: -ms-linear-gradient(#FEFEFE 0%, #E6E6E6 100%);
		background-image: linear-gradient(#FEFEFE 0%, #E6E6E6 100%);
		cursor:pointer;
	}
	/*.main-navigation {display:none;} */
	.right-navigation {float:none;}
	.fancyNav {width:100%;}
	.fancyNav li {display:block; width:100%;}
	.fancyNav li {
		background: #FEFEFE;
		border-bottom:1px solid #ccc;
	}
	
	
	.main-content, .content, .sidebar-left, .sidebar-right {width:100%; margin:auto; float:none;}
	
	
	.sidebar-left p, .sidebar-right p {width:24%; padding-right:1%; float:left; margin:5px 0;}
}
@media screen and (max-width: 470px) {
.top-banner, .top-logo  {text-align:center; float:none;}
}
@media screen and (max-width: 400px) {
.request-quote-cell {text-align:left;}
	
	.sidebar-left p, .sidebar-right p {width:49%; float:left;}
	.sidebar-left p:nth-child(3), .sidebar-right p:nth-child(3) {clear:both;}
}

pre {
    overflow: scroll!important;
}