/*
Theme Name: Flux Sites
Theme URI: http://www.nsdigital.co.za/
Description: The default theme for Flux Sites Hosting
Version: 1.0.5
Author: NS Digital
Author URI: http://www.nsdigital.co.za/
*/

/* Default styles */
@import "css/reset.css";

/* CSS FOR BORDER-RADIUS, BOX-SHADOW AND TEXT-SHADOW CAN BE FOUND IN CSS/CUSTOM.CSS */

/*-----------------------------------------------

INDEX:

1. SETUP
-1.1 Defaults
-1.2 Hyperlinks

2. SITE STRUCTURE & APPEARANCE
-2.1 Containers
-2.2 Header
--2.2.1 Logo
--2.2.2 Language Picker
--2.2.3 Text Size
--2.2.4 Search
-2.3 Navigation
-2.4 Content
--2.4.1 Home Page
--2.4.2 Hosting Page
--2.4.3 FAQS Page
--2.4.4 Contact Page
--2.4.5 Order Page
-2.5 Footer

3. WIDGETS

4. POSTS
-4.1 Typographic Elements
-4.2 Images

5. COMMENTSAREA
-5.1 Comments
-5.2 Comments Form

6. GENERAL STYLES

7. Accessibility
-7.1 Clearing
-7.2 Accessibility

-----------------------------------------------*/



/*-----------------------------*/
/* 1. SETUP */
/*-----------------------------*/

/* 1.1 Defaults */

html{height:100.01%;}

body  {	font: 12px Arial, Helvetica, Sans-serif; line-height: 1.5;  /*unitless for proper inheritance*/ color: #333;  background:#fbfbfb url(images/bg_body.jpg) top left repeat-x; color:#1f2324;font-family:Verdana, Helvetica, sans-serif; height:100%;}

h1, h2, h3, h4, h5, h6  {
	margin: 0;
	color: #1f2324;
}

h1  {font-size: 18px} h2  {font-size: 16px} h3  {font-size: 16px}
h4  {font-size: 14px} h5  {font-size: 12px} h6  {font-size: 12px}

h1, h2, p{font-family:Verdana, Helvetica, sans-serif;}

p  {margin: 3px 0; color:#1f2324; line-height:1.4em;}

strong{font-weight:bold;}

em{font-style:italic;}

/* 1.2 Hyperlinks */

a, a:active, a:link, a:visited  { text-decoration: none;  color:#1f2324; outline:0;}
a:hover  {  }

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited,
h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited  { text-decoration: none; }

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover  { text-decoration: underline; }

img a{border:none;}

/*-----------------------------*/
/* 2. SITE STRUCTURE & APPEARANCE */
/*-----------------------------*/

/* 2.1 Containers */
#page{}


.wrapper{width:979px; margin:0 auto; text-align:left; position: relative; padding:1px;}

.left_side{
	width:590px;
	float:left;
	padding:0 13px 0 13px;
}
.right_side{
	width:310px;
	float:right;
	margin:0 0px 0 0;
	position:relative;
}

.full_width{
	width:930px;
	float:left;
	padding:0 0 0 13px;
}




#logo_and_nav{width:979px; float:left; margin-top:0px; position:relative; height:145px; overflow:hidden;}
#content{width:979px; float:left;}
#footer{width:963px; float:left; margin:55px 0 0 6px;}


/* 2.2 Header */

#header{background:#427aad url(images/bg_header.png) top left repeat-x;  padding:4px; margin:0px;}
	#header p{color:#ffffff; text-align:right; margin:1px;}
	#header span.phone{background:url(images/sprite_icons.gif) no-repeat; padding:4px 10px 4px 18px; background-position:0px 1px;  font-size:0.9em;}
	#header span.email{background:url(images/sprite_icons.gif) no-repeat; padding:4px 0 4px 22px; background-position:0px -33px;  font-size:1em; margin-right:20px;}

#logo h1{background:url(images/sprite_icons.gif) no-repeat; background-position:-14px -145px; width:221px; height:70px; text-indent:-99999px; overflow:hidden; float:left;}
	#logo h1 a{border:solid 1px red; position:relative; width:100px; height:100px;}


/* 2.3 Navigation */

#navigation{float:right;  width:750px; height:70px; padding:0 0 0 0;}

			#navigation ul{margin:5px 0 0 0; float:right; }
			#navigation li{}

#navigation li.current-page a {
	
	background: #1b76c9;
	display: inline-block;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	position: relative;
	cursor: pointer;	
	color:#ffffff; 	
	}
	
#navigation li.current-page a:visited{
	color:#ffffff;
}

#navigation li{float:left; background:none; padding:0 0 0 0;}

#navigation a {display:inline-block; cursor:pointer; border:none; text-decoration:none; 
font-style:normal; margin:0 6px 0px 0; padding:10px 12px 10px 12px; vertical-align:middle; float:left;

white-space:nowrap; cursor:pointer; color:#000000; line-height:1; 
	letter-spacing:0 !important; font-family:"Arial" !important; font-size:12px !important; font-style:normal; 
	font-weight:bold; border:none; vertical-align:text-top;
}





html.safari #navigation a:focus{outline:none;}
#navigation a:visited{color:#000000;}

/*Button Hover Style*/
#navigation a:hover, 
#navigation a:focus{color:#000000; text-decoration:none; 


}


#navigation a:active, 
#navigation a:focus{color:#444;}

#navigation a:active, 
#navigation a:focus{outline:0;}
	

#we_do_website_hosting{background:url(images/sprite_icons.gif) no-repeat; background-position:-20px -235px; width:186px; height:46px; display:block; float:left; text-indent:-999999px; overflow:hidden; margin:0 580px 0 100px;}


/* 2.4 Content */

/* 2.4.1 Home Page */

h3{font-family:arial; font-size:14px; color:#4d4d4d; margin:20px 0 0 0;}
h3 span{font-weight:bold; color:#0f62ad;}

body.home h3{text-align:center; margin-left:0px;}



/*-----------------------------*/
/* Step Carousel */
/*-----------------------------*/

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 960px; /*Width of Carousel Viewer itself*/
height: 390px; /*Height should enough to fit largest content's height*/
margin:0 0 0 10px;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}


.box{
	width:274px; 
	display:inline; 
	background:#ffffff; 
	border:#ffffff solid 3px; 
	margin:45px 35px 0 20px; 
	height:318px; 
	position:relative; 
	float:left;

	}
.box:hover{

	}

.box a{
	text-indent:-999999px;
	overflow:hidden;
	width:274px;
	height:318px;
	position:absolute;
	z-index:99;
}

.box h1{
	color:#ffffff; 
	font-size:19px; 
	font-weight:bold; 
	padding:19px 0 16px 13px; 
	background-color:#2786dc;
	font-family:arial;
	
	}
	
.box h2{
	color:#ffffff; 
	font-size:26px; 
	font-weight:bold; 
	padding:12px 0 10px 13px; 
	background-color:#2786dc;
	position:absolute;
	bottom:0;
	width:261px;
	font-family:arial;
	}
	
.box h2 span{font-size:12px; color:#e4e3e3;}
.box h2 strong{
	font-size:12px; 
	color:#ffffff; 
	position:absolute; 
	display:inline;
	right:10px; 
	bottom:10px; 
	padding:5px 10px; 
	background:#185fa0;
	}


.box p{padding:0 12px 0 12px; text-align:justify; height:75px;}
.box ul{margin:13px 12px 0 12px; padding:18px 5px 0 5px; border-top:#e5e5e5 solid 1px;}
.box .kind{position:absolute; top:-6px; right:-11px; width:121px; height:51px;}





/* 2.4.2 Hosting Page */

.content_box{
	width:960px;
	background:#ffffff; 
	border:#ffffff solid 3px; 
	position:relative;
	padding:0 0 30px 0;
	margin:0 auto 0 auto;
	}

.content_box h1{
	color:#3e3e3e; 
	font-size:26px; 
	font-weight:bold; 
	font-family:arial;
	
	}
div.post_title{
	padding:19px 0 16px 13px; 
	background:#dbdbdb;
}


.pricing{
	width:523px;
	margin:50px 0 0 0; 
	background-color:#237ccd;	
	padding:0 0 19px 0;
}
.pricing h1{
	color:#ffffff; 
	font-size:18px; 
	font-weight:bold; 
	padding:19px 0 0 13px;
	background:none;
	background-image: none;
	font-family:arial;
	
	}
.pricing p{
	color:#ffffff;
	padding:11px 0 0 13px;
	margin:0 0 0 0;
}
.pricing p strong{color:#ffffff;}
.pricing p span{font-size:28px;}



.right_side p{font-size:14px; color:#706d6d; margin-top:22px;}
.right_side p strong{color:#706d6d; font-size:26px; font-weight:bold;}
.right_side p span{font-size:14px; color:#706d6d;}

.content_box .order .right_side p span{font-size:14px;}

.right_side .activate_button a{
	text-transform:uppercase;
	background-color:#237ccd;
	position:absolute;
	top:8px;
	right:0;
	color:#ffffff;
	font-weight:bold;
	font-size:18px;
	padding:13px 16px;
	margin-right:6px;
	}
	
.right_side a:hover{

}

.activate_button{position:fixed; border:dashed 1px #e0e0e0; width:283px; padding:10px; margin-top:15px; background:#f7f7f7;}

img.banner{position:absolute; top:-6px; right:-11px;}

div.postmeta p{padding:2px 4px 2px 0px; font-size:1em;}
	div.postmeta p span{background:#c3c3c3; padding:2px 4px 2px 4px; color:#f7f7f7; font-weight:bold; margin-right:5px;}
	div.postmeta p span#tags{margin-left:10px;}
	div.postmeta p a{text-decoration:underline;}
		div.postmeta p a:hover{text-decoration:none;}


/* 2.4.3 FAQS Page */

div.single{
	width:838px;
	margin:0 auto 0 auto;
}

div.single li{
	background:none;
	padding:0 0 0 0;
}

div.single li a{
	line-height:1.5em;
	color:#0054a1;
}
div.single li a:hover{
	color:#ffffff;
	background-color:#2f92eb;
}







/* 2.4.4 Contact Page */

.contact{
	
	}

.contact h1{
	color:#ffffff; 
	font-size:18px; 
	font-weight:bold; 
	padding:19px 0 16px 13px; 
	background-color:#207ccf;
	font-family:arial;

	}

.gform_body{margin:0 0 0 0px; padding:0 0 0 0; width:590px;}
.gform_body ol li{background:none; padding:0 0 0 0; margin:0 0 0 0; width:524px; color:#4d4d4d;}


p.linklove{display:none;}
	
.gform_body input{width:509px; border:#5da6e8 solid 3px; background:#f6f6f6; font-family:arial; font-size:18px; color:#4d4d4d; padding:12px 0 9px 9px;
		margin:20px 0 0 0;}
	
#cformsform input#cf_field_1{width:242px; border:#5da6e8 solid 3px; background:#f6f6f6; font-family:arial; font-size:18px; color:#4d4d4d; padding:12px 0 9px 9px;
	margin:20px 0 0 0;}	
#cformsform input#cf_field_2{width:242px; border:#5da6e8 solid 3px; background:#f6f6f6; font-family:arial; font-size:18px; color:#4d4d4d; padding:12px 0 9px 9px;
	margin:-48px 0 0 0; float:right; position:relative;}

textarea{width:509px; height:155px; border:#5da6e8 solid 3px; background:#f6f6f6; font-family:arial; font-size:18px; color:#4d4d4d; padding:12px 0 9px 9px;
	margin:20px 0 0 0;}

.text_small{width:242px; border:#5da6e8 solid 3px; background:#f6f6f6; font-family:arial; font-size:18px; color:#4d4d4d; padding:12px 0 9px 9px;
	margin:20px 0 0 0;}
.text_big{width:509px; border:#5da6e8 solid 3px; background:#f6f6f6; font-family:arial; font-size:18px; color:#4d4d4d; padding:12px 0 9px 9px;
	margin:20px 0 0 0;}
.text_area{width:509px; height:155px; border:#5da6e8 solid 3px; background:#f6f6f6; font-family:arial; font-size:18px; color:#4d4d4d; padding:12px 0 9px 9px;
	margin:20px 0 0 0; overflow:hidden;}


	li#li--7 label.cf-before{display:inline-block;}

input.button{

	font-weight:bold;
	font-size:18px;
	padding:16px 36px 16px 36px; 
	background-color:#4b94d6;
	border:none;
	cursor:pointer;
	color:#fff;
	margin:20px 0 0 0;
}
input.button:hover{
	
}
	
.contact a{color:#0f62ad; text-decoration:underline; font-weight:bold;
	padding:2px 5px;

}
.contact a:hover{
	color:#ffffff;
	background-color:#0f62ad;
	text-decoration:none;
	}
	
	
.contact img{position:absolute; top:-7px; right:-8px;}


.contact .right_side h3{
	background-color:#3f8cd3;
	color:#ffffff;
	font-size:14px;
	padding:13px 0 10px 13px;
	margin:150px 0 0 0;
}

.contact .right_side p strong{color:#0e66b6; font-size:16px;}




/* 2.4.5 Order Page */

.order span{font-size:18px;}
.order a{
	color:#0f62ad; text-decoration:underline; font-weight:bold;
}
.order a:hover{text-decoration:none;}

.order .right_side span{font-size:12px; color:#0e66b6;}
.order .right_side span strong{font-size:12px; color:#0e66b6;}
.order .right_side strong{font-size:12px;}

.order h2{margin:35px 11px 0 13px;}

.order .left_side p{margin-bottom:20px;}



div#usermessage2a strong{padding:15px 10px; text-align:center; font-size:18px; color:#ffffff;text-transform:uppercase;
background-color:#237ccd; margin:20px 0 40px 0; float:left; width:572px;}

#cforms2form ol{margin:0; padding:0px;}

#cforms2form li{margin:0px; background:none; padding:0 0 20px 0;}

#cforms2form span.reqtxt{font-size:0.8em;}

#cforms2form input.single{width:509px; border:#5da6e8 solid 3px; background:#f6f6f6; font-family:arial; font-size:18px; color:#4d4d4d; padding:12px 0 9px 9px;
		margin:0px 0 0 0;}
	
#cforms2form li label span{}

#cforms2form #cf2_field_8, #cforms2form #cf2_field_9, #cforms2form #cf2_field_10, #cforms2form #cf2_field_16{width:242px; }

#cforms2form li.cf-box-title{}
#cforms2form li.cf-box-group{margin:10px 0 0 0;}

#cforms2form li.cf-box-group input {display:inline-block;}

#cforms2form li.cf-box-group label{}

#cforms2form li.cf-box-group strong{font-weight:bold;}
#cforms2form li.cf-box-group span{color:#4d4d4d;}

li#li-2-5items{padding-top:15px;}
li#li-2-5items label{ font-size:1.6em; line-height:1.6em;}

/* 2.4 Footer */

#footer{background:#f5f5f5; border:#e9e9e9 solid 1px;}
#footer h1{font-family:Lucida Grande; color:#1b77ca; font-weight:bold; font-size:10px; padding:6px 14px 6px 0; text-align:right;
	background:#ebebeb;}
	
	#footer p{color:#1b77ca;text-align:right; padding:8px 0 15px 0;}
	#footer span.phone{background:url(images/sprite_icons.gif) no-repeat; padding:4px 10px 4px 18px; background-position:0px -65px;  font-size:14px;}
	#footer span.email{background:url(images/sprite_icons.gif) no-repeat; padding:4px 0 4px 26px; background-position:0px -99px;  font-size:14px; margin-right:14px;}




/* 3 Widgets and Sidebar */

div#sidebar{ margin:0px; padding:10px 20px 0 0;}
	div#sidebar ul{margin:0px; padding:0px;}
		div#sidebar ul li ul li{margin-left:20px; list-style-type:disc;}
		div#sidebar ul.children{margin-left:10px;}
	
	#sidebar ul li{background:none; margin:0px; padding:0px;}
	
	/* Sidebar Search */
	
	div#sidebar form#searchform {border:dashed 1px #e0e0e0; width:275px; padding:10px; margin-top:15px; background:#f7f7f7;}
	div#sidebar form#searchform label{display:block;}
	div#sidebar form#searchform input#s{border:solid 1px #e0e0e0; padding:8px; width:140px;}
	div#sidebar form#searchform #searchsubmit{
	text-transform:uppercase;
	background-color:#237ccd;
	border:solid 1px #237ccd;
	color:#ffffff;
	font-weight:bold;
	font-size:18px;
	padding:4px 10px;
	margin-right:6px;
	float:right;
	}
	
	div#sidebar h2{margin-bottom:10px;}
	div#sidebar ul li ul li a{padding:2px;}
	div#sidebar ul li ul li a:hover{background-color:#237ccd; color:#ffffff;}

/* 4 Posts */

	#edit-entry a{float:right; background-color:#237ccd; color:#ffffff; padding:12px;margin:20px 20px 0 0;}

/* 4.1 Text and Typohtaphy */

p{font-family:arial; font-size:14px; color:#4d4d4d; margin:13px 0 0 0; line-height:1.3em;}
strong{font-weight:bold; color:#0f62ad;}
ul{margin:13px 12px 0 0px; padding:18px 5px 0 5px;}
li{font-family:arial; font-size:14px; color:#0e66b6; line-height:1.6em; background:url(images/list_item.jpg) no-repeat; background-position:0px 6px; padding:0 0 0 19px;}
h2{color:#0e66b6; font-size:18px; font-weight:bold; border-bottom:#e5e5e5 solid 1px; padding:0 0 4px 0; margin:30px 0 0 0;}
	.left_side h2 a{color:#0e66b6; text-decoration:none;}
		.left_side h2 a:hover{color:#0657a0; text-decoration:none; background:none;}
		
		.left_side a{padding:2px;}
		
		.left_side a:hover{background:#237ccd; color:#ffffff;}


/* 5 Comments Area */

.comments-area h3{margin:30px 0 0 0; padding:0 0 5px 0; font-size:16px; font-weight:bold;}

.comments-area{width:586px; margin:30px 0 0 0;}

	.comments-area li{list-style-type:none; background-image:none;}
	
	#commentform{border-top:solid 1px #0e66b6; width:586px;}
	#commentform input{width:300px; border:#5da6e8 solid 3px; background:#f6f6f6; font-family:arial; font-size:18px; color:#4d4d4d; padding:12px 0 9px 9px; margin:0px 0 0 0;}
	#commentform input#submit{
		font-weight:bold;
		font-size:18px;
		padding:16px 36px; 
		background-color:#4b94d6;
		border:none;
		cursor:pointer;
		color:#ffffff;
		margin:20px 0 0 0;
		width:auto;
	}
	
	
	ol.commentlist{}
	
	ol.commentlist li{margin:20px 0 0 0; padding:10px 10px 20px 10px; border:dashed 1px #e0e0e0; background:#f7f7f7;}
	
	ol.commentlist li .comment-author{}
	ol.commentlist li .comment-author img{float:left; margin:0 10px 0 0;}
	ol.commentlist li .comment-meta{font-size:11px; padding:5px 0 10px 0; border-bottom:solid 1px #e0e0e0;}
	
	

form#commentform{width:586px;}
	form#commentform p textarea{width:570px; margin:0 0 0 0;}
	
	
	
	
	
	
	
	
/* Shopping Cart */

.shopping_cart{float:right; width:350px; display:block; border:solid 1px red; text-align:right; margin:-20px 10px 20px 0; padding:6px;}	

.xcheckout{float:right;}


/*-----------------------------*/
/* 7. ACCESSIBILITY */
/*-----------------------------*/

/* 7.1 clearing */ 
.clear{clear:both; height:1px; margin:0; padding:0; font-size: 15px; line-height: 1px;}
.clearfix:after{content: "."; display: block; height: 0; clear: both; visibility: hidden;}
* html>body .clearfix{display: inline-block; width:100%;}
* html .clearfix {/* Hides from IE-mac \*/ height: 1%; /* End hide from IE-mac */ }

/* 7.2 accessibility */ 
.accessibility { position: absolute; top: -999em; left: -999em;}