/*
* Project Name: Hosting layout 2
* Author: Eyewebs
* Author URL: http://eyewebs.be
* Version: 1.0
* Last Edited: 12/01/2014
* Description: Made with ♥ in Belgium
*/

/* Table of Content
==================================================
	1. Grid						(line 24)
	2. Global					(line 53)
	3. Header					(line 125)
	4. Main Navigation			(line 154)
	5. Slider					(line 198)
	6. Products					(line 225)
	7. Domaincheck				(line 269)
	8. Featured					(line 329)
	9. Content					(line 344)
	10. Footer					(line 507)
================================================== */

/* 1. Grid
================================================== */
body { min-width: 1020px; }
.container { position: relative; width: 1000px; margin-left: auto; margin-right: auto; padding: 0 15px; }
.container:before,
.container:after { display: table; content: " "; }
.container:after { clear: both; }

.row { margin-left: -15px; margin-right: -15px; }
.row:before,
.row:after { display: table; content: " "; }
.row:after { clear: both; }

[class*='col-'] { float: left; display: inline; min-height: 1px; padding-left: 15px; padding-right: 15px; }

.col-1 { width: 8.333333333333332%; }
.col-2 { width: 16.666666666666664%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333333333%; }
.col-5 { width: 41.66666666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333333333336%; }
.col-8 { width: 66.66666666666666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333333334%; }
.col-11 { width: 91.66666666666666%; }
.col-12 { width: 100%; }


/* 2. Global
================================================== */
body {
	font-family: 'Droid Sans', sans-serif;
	font-size: 14px;
	color: #050505;
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.clearfix:before,
.clearfix:after { display: table; content: " "; }
.clearfix:after { clear: both; }

.pull-right { float: right !important; }
.pull-left { float: left !important; }

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.btn {
	display: inline-block;
	padding: 5px 25px 5px 10px;

	border: solid 1px #000;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	background: #000;
	background: url(../images/button-bg.png) no-repeat right 10px center;
	background: url(../images/button-bg.png) no-repeat right 10px center, -webkit-linear-gradient(#2d2d2d, #000);
	background: url(../images/button-bg.png) no-repeat right 10px center,      -o-linear-gradient(#2d2d2d, #000);
	background: url(../images/button-bg.png) no-repeat right 10px center,    -moz-linear-gradient(#2d2d2d, #000);
	background: url(../images/button-bg.png) no-repeat right 10px center,         linear-gradient(#2d2d2d, #000);

	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
}

h1, h2, h3 {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
}
h3 { font-size: 18px; margin-bottom: 20px; }

a {
	color: inherit;
	text-decoration: none;
}

p {
	margin: 0;
	padding: 0 0 20px 0;
}

ul {
	list-style-position: inside;
	margin: 0;
	padding: 0;
}


/* 3. Header
================================================== */
#header {
	background: #030303;
}
	.brand {
		display: block;
		margin-top: 15px;
	}
	#header h1 {
		margin: 15px 0;
		font-weight: 400;
		line-height: 30px;
		text-transform: uppercase;
	}
		#header h1 a:link, #header h1 a:visited {
			display: block;
			color: #006077;
			text-decoration: none;
		}
		#header h1 a:hover, #header h1 a:active {

		}
			#header h1 strong {
				color: #fff;
				font-weight: 700;
			}


/* 4. Main Navigation
================================================== */
.sf-menu {
	margin: 0;
}
.sf-menu li, .sf-menu li:hover, .sf-menu li.sfHover {
	background: transparent;
}
	.sf-menu a {
		font-size: 15px;
		line-height: 30px;
		text-transform: uppercase;
		color: #fff;
		margin: 15px 0 15px 10px;
		padding: 0 10px;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.33);
		border-radius: 4px;
		border: none;
	}
	.sf-menu li.current > a, .sf-menu li:hover > a, .sf-menu li.sfHover > a {
		background: #006077;
	}
/* Dropdown */
.sf-menu ul {
	right: 0;
	left: auto;
	min-width: 190px;
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
}
	.sf-menu ul li a {
		background: #222;
		border-radius: 0;
		border-top: solid 1px #2f2f2f;
		border-bottom: solid 1px #111;
		margin: 0;
		padding: 10px 15px;
		line-height: 20px;
	}
	.sf-menu ul li:hover a, .sf-menu ul li.sfHover a {
		background: #006077;
		border-color: #006077;
	}


/* 5. Slider
================================================== */
#slider,
#products,
#page-title {
	padding: 40px 0;
	background: url(../images/products-bg.png) left top repeat-x, url(../images/products-bg.png) left bottom repeat-x;
	background-color: #006077;
}
#slider .flexslider {
	margin: 0;
	border-color: #030303;
}
#slider .flex-control-nav {
	bottom: 0px;
	text-align: left;
}
#slider .flex-control-paging li a {
	width: 18px;
	height: 8px;
	border-radius: 0px;
}
#slider .flex-control-paging li a.flex-active {
	background: #006077;
}


/* 6. Products
================================================== */
#products .product {
	position: relative;
	background: url(../images/product-bg.png) repeat-y right top;
}
#products .product.last { background: none; }
	#products h3 {
		font-size: 24px;
		font-weight: 700;
		text-transform: inherit;
		text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.45);
	}
	#products ul {
		list-style-image: url(../images/product-list.png);
		font-size: 16px;
		font-weight: 300;
		color: #fff;
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.22);
	}
	#products .buttons {
		margin-top: 15px;
	}
		#products .btn {
			margin-right: 25px;
		}
	#products .price {
		position: absolute;
		top: -10px;
		right: 0px;
		width: 120px;
		height: 116px;
		background: url(../images/price-bg.png) no-repeat;
		text-align: center;
		font-size: 14px;
		color: #fff;
		padding-top: 20px;
	}
		#products .price strong {
			font-size: 24px;
			font-weight: 700;
		}


/* 7. Domaincheck
================================================== */
#domaincheck {
	background: #80a4ad;
	padding: 20px 0;
}
	#domaincheck input[type="text"],
	#domaincheck select,
	#domaincheck input[type="submit"] {
		width: 100%;
		height: 36px;
	}
	#domaincheck span {
		display: inline-block;
		float: left;	
	}
	#domaincheck .text {
		width: 67%;
		margin-right: 1%;
	}
	#domaincheck .select {
		width: 10%;
		margin-right: 1%;
		overflow: hidden;
		background: url(../images/select-bg.png) no-repeat right 10px center #fff;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.15);
	}
	#domaincheck select {
		width: 120%;
		background: transparent;
		padding: 10px;
		font-size: 17px;
		line-height: 1;
		border: 0;
		border-radius: 0;
		-webkit-appearance: none;
		outline: none;
	}
	#domaincheck .button {
		width: 10%;
	}
	#domaincheck input[type="text"] {
		padding-left: 40px;
		border: none;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		background: url(../images/search-bg.png) no-repeat left 10px center #fff;
		font-size: 17px;
		outline: none;
		box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.15);
	}
	#domaincheck .btn {
		font-size: 18px;
	}


/* 8. Featured
================================================== */
#featured {
	padding: 20px 0;
	border-bottom: solid 1px #f8f8f8;
}
	#featured h3 {
		margin-bottom: 20px;
	}
	#featured img {
		float: left;
		margin-right: 20px;
	}


/* 9. Content
================================================== */
#content {
	background: #f8f8f8;
	border-top: solid 1px #f0f0f0;
	padding: 20px 0;
}
	#content article {
		overflow: auto;
		height: 1%;
		padding: 30px;
		background: #fff;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.05);
	}

#content article p {
	float: left;
	width: 100%;
	padding: 2px 0 7px 0;
}
#content article hr {
	clear: both;
	background: none repeat scroll 0 0 #80a4ad;
	border: medium none;
	color: #80a4ad;
	height: 2px;
	margin: 10px 0;
}
#content article fieldset {
	border: 1px solid #9b9b9b;
	padding: 10px;
	margin: 5px 0;
}
#content article legend {
	font-weight: bold;
}
#content article label {
	float: left;
	width: 100%;
	padding: 3px;
}
	/* start form elements */
	#content article input[type="text"], #content article input[type="password"], #content article textarea {
		width: 99%;
		font: 12px Arial;
		color: #4c4c4c;
		float: left;
		padding: 5px 3px;
		border: 1px solid #d6d6d6;
	}
	#content article input.half-width {
		width: 48%;
		margin-right: 10px;
	}
	#content article input[type="text"]:focus, #content article input[type="password"]:focus, #content article textarea:focus {
		border-color: #80a4ad;
	}
	#content article input[type="submit"] {
		background: #80a4ad;
		border: none;
		color: #fff;
		padding: 5px;
		display: block;
		font-weight: bold;
	}
	#content article input[type="submit"]:hover {
		text-decoration: underline;
		cursor: pointer;
	}
	#content article select {
		float: left;
		width: 100%;
		font: 12px Arial;
		color: #4c4c4c;
		float: left;
		padding: 4px 3px;
		border: 1px solid #d6d6d6;
	}
	#content article input[type="text"].pDomain {
		width: 87%;
	}
	#content article select.pDomain_tld {
		margin: 0 0 0 10px;
		width: 10%;
	}
	/* end form elements */
	
	/* start table */
	#content article table {
		width: 100%;
		border-collapse: collapse;
		margin: 12px 0;
	}
	#content article table.halfWidth {
		width: 49%;
	}
	#content article thead th {
		padding: 5px 2px;
		font-weight: bold;
		border-bottom: 2px solid #80a4ad;
	}
	#content article tfoot td {
		padding: 5px 2px;
	}
	#content article tbody td {
		padding: 5px 2px;
		border-bottom: 1px solid #e4e4e4;
		vertical-align: top;
	}
	/* end table */

/* Notifications */
label.error, div.error { 
	border: 1px solid #F1AC88;
	background: #FAF5EA;
}
label.success, div.success { 
	border: 1px solid #8CCE3B;
	background: #F4FCEA;
}
label.warning, div.warning {
	border: 1px solid #e6db55;
	background: #fffbcc;
}
label.information, div.information {
	border: 1px solid #a2b4ee;
	background: #dbe3ff;
}
.error { 
	border: 1px solid #F1AC88 !important;
	background: #FAF5EA;
}
.notification {
	margin: 0 0 5px 0;
	padding: 10px;
	color: #707070;
}
div.error {
	background: url('../images/notification_error.png') no-repeat 10px;
	background-color: #faf5ea;
	padding: 10px 10px 10px 35px;
}
div.success {
	background: url('../images/notification_success.png') no-repeat 10px;
	background-color: #f4fcea;
	padding: 10px 10px 10px 35px;
}
div.warning {
	background: url('../images/notification_warning.png') no-repeat 10px;
	background-color: #fffbcc;
	padding: 10px 10px 10px 35px;
}
div.information {
	background: url('../images/notification_information.png') no-repeat 10px;
	background-color: #dbe3ff;
	padding: 10px 10px 10px 35px;
}
/* end notifications */


/* 10 Footer
================================================== */
footer {
	background: #030303;
	color: #fff;
	font-size: 15px;
	line-height: 25px;
	padding: 25px 0;
}
	footer h3 {
		margin-bottom: 10px;
		font-size: 18px;
		color: #006077;
	}
	footer ul {
		list-style-image: url(../images/footer-list.png);
	}
	footer a:link, footer a:visited {
		text-decoration: none;
	}
	footer a:hover, footer a:active {
		color: #006077;
	}
	footer .copyright {
		margin-top: 30px;
		padding-top: 15px;
		border-top: solid 1px #1d1d1d;
		font-size: 14px;
	}