@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
@import url(./shoppingcart.css);

@media all {
	body {
		font-family: "Droid Sans", Arial,Helvetica,sans-serif;
		min-width: 320px;
		background-color: #f9f9f9;
	}
		
	#flexstart {
		background: none;
		border: none;
		box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		-ms-box-shadow: none;
		-o-box-shadow: none;
		text-align: center;
		font-variant: small-caps;
		overflow: hidden;
	}
	
	h1, h2, h3 { 
		font-family: "Oswald",Arial,Helvetica,sans-serif;
	}
	
	#flexstart h1, #flexstart h2 {
		margin: 0;
	}
	
	#flexstart h1 {
		font-size: 48px;
		color: #EEEEEE;
		text-shadow: 1px 1px 3px #999999;
		-moz-text-shadow: 1px 1px 3px #999999;
		-webkit-text-shadow: 1px 1px 3px #999999;
		-o-text-shadow: 1px 1px 3px #999999;
		-ms-text-shadow: 1px 1px 3px #999999;
	}
	
	#flexstart h2 {
		font-size: 32px;
		color: #999999;
		text-shadow: 1px 1px 2px #666666;
		-moz-text-shadow: 1px 1px 2px #666666;
		-webkit-text-shadow: 1px 1px 2px #666666;
		-o-text-shadow: 1px 1px 2px #666666;
		-ms-text-shadow: 1px 1px 2px #666666;
	}
	
	.navbar {
		border: none;
	}
	.navbar li {
		text-transform: uppercase;
	}
	
	.navbar .container {
		position: relative;
	}
	
	span.big {
		font-size: 150%;
	}
	
	#multitoggler {
		display: inline; 
		position: absolute; 
		cursor: pointer; 
		font-size: 70%;
		color: #bbb;
		top: 5px;
		right: 10px;
	}
}


@media screen {
	html, body {
		height: 100%;
	}
		
	body {
		padding-top: 92px;
	}
	
	#footerpusher, footer {
		height: 250px;
	}
	
	#pagewrapper {
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -250px;
	}
	
	section#home {
		height: 600px;
		background: #112 url('../img/background.png') repeat;
		overflow: hidden;
	}
	
	section#home .tldimg {
		position: absolute;
		width: 424px;
		height: 600px;
	}
	
	section#home .tldimg1 {
		background: url('../img/domains1.png');
	}
	
	section#home .tldimg2 {
		background: url('../img/domains2.png');
	}
	
	section#home .tldimg3 {
		background: url('../img/domains3.png');
	}
	
	section#home .tldimg4 {
		background: url('../img/domains4.png');
	}
	
	section#home .panel {
		background-color: #ccc;
		background-image: -ms-linear-gradient(#eee 0%, #ccc 100%); 
		background-image: -webkit-linear-gradient(#eee 0%, #ccc 100%); 
		background-image: -moz-linear-gradient(#eee 0%, #ccc 100%); 
		background-image: -o-linear-gradient(#eee 0%, #ccc 100%); 
		background-image: linear-gradient(#eee 0%, #ccc 100%);
	}
	section#home .panel-heading {
		text-align: center;
	}
	section#home .panel .row {
		margin-left: 0;
		margin-right: 0;
	}
	
	section#promise {
		padding: 50px 0;
		background-color: #ccc;
		background-image: -ms-linear-gradient(#eee 0%, #ccc 100%); 
		background-image: -webkit-linear-gradient(#eee 0%, #ccc 100%); 
		background-image: -moz-linear-gradient(#eee 0%, #ccc 100%); 
		background-image: -o-linear-gradient(#eee 0%, #ccc 100%); 
		background-image: linear-gradient(#eee 0%, #ccc 100%);
	}
	section#promise .row {
		margin-bottom: 30px;
	}
	section#promise h3 {
		margin-top: 0;
	}
	
	section#datacenter {
		height: 200px;
		padding-top: 30px;
		background: #333 url('../img/datacenter.jpg') repeat;
		color: #eee;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
	}
	section#datacenter big {
		display: block;
		margin-top: 0.7em;
		font-size: 1.5em;
	}
	section#awards {
		min-height: 200px;
		background: #333 url('../img/isle.jpg') repeat;
		color: #eee;
		text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
	}
	section#awards a {
		color: #eee;
		font-size: 140%;
	}
	
	section#domainselect {
		padding: 20px 0 50px;
		background: #112 url('../img/background.png') repeat;
		color: #eee;
		font-weight: normal;
	}
	section#domainselect > .container > .row {
		margin: 20px 0;
	}
	
	section#serviceselect {
		padding: 0;
		background-color: transparent;
		background-image: url('../img/background_red.svg');
		background-repeat: no-repeat;
		font-weight: normal;
	}
	section#hostingselect {
		padding: 0;
		background-color: transparent;
		background-image: url('../img/background.png');
		background-repeat: no-repeat;
		font-weight: normal;
	}
	section#serviceselect table,section#hostingselect table {
		margin: 0;
	}
	section#serviceselect thead, section#hostingselect thead {
		color: #eee;
	}
	section#serviceselect .plan, section#hostingselect .plan {
		margin-bottom: 0;
		box-shadow: 2px 2px 2px #000;
	}
	#colheadline {
		width: 210px;
	}
	#colheadline.count6 {
		width: 184px;
	}
	#colplans {
		width: 730px;
	}
	#colplans.count6 {
		width: 756px;
	}
	#colplans col {
		width: 146px;
	}	
	#colplans.count6 col {
		width: 121px;
	}	
	section#serviceselect table, section#hostingselect table {
		margin-top: 30px;
	}
	section#serviceselect thead ul, section#hostingselect thead ul {
		padding-left: 0;
		display: inline-block;
		text-align: left;
		margin-bottom: 30px;
	}
	
	section#serviceselect tbody td, section#hostingselect tbody td {
		border-top: none;
	}
	
	section#serviceselectinfo, section#hostingselectinfo {
		margin-top: 0px;
	}
	table.hosting, section#content .tabpanel {
		min-width: 940px;
	}
	table.hosting tbody {
		font-size: 90%;
	}
	div.row.fixedhosting {
		display: none;
		position: fixed;
		top:92px;
		z-index: 1031;
	}
	div.row.fixedhosting .plan {
		box-shadow: 2px 2px 2px #999;
	}
	section#hostingselectinfo .table > tbody > tr > td {
		border-top: none;
		border-right: 1px solid #eee;
		text-align: left;
		font-size: 90%;
		padding-top: 25px;
	}
	section#hostingselectinfo .table > tbody > tr > td.plan {
		background-color: #fff;
		border-bottom: 1px solid #eee;
		box-shadow: 2px 2px 2px #999;
	}
	section#hostingselectinfo .table > tbody > tr > td ul {
		list-style: none;
		padding-left: 0px;
		
	}
	
	section#content {
		padding: 50px 0;
	}
	section#content h2 {
		margin-bottom: 30px;
	}
	section#content .oneplan {
		background-color: #ccc;
		background-image: -ms-linear-gradient(#fff 0%, #ccc 100%); 
		background-image: -webkit-linear-gradient(#fff 0%, #ccc 100%); 
		background-image: -moz-linear-gradient(#fff 0%, #ccc 100%); 
		background-image: -o-linear-gradient(#fff 0%, #ccc 100%); 
		background-image: linear-gradient(#fff 0%, #ccc 100%);
		border-color: #333;
		border-style: solid;
		border-width: 1px;
		text-align: center;
		margin-bottom: 30px;
		padding-bottom: 20px;
		box-shadow: 5px 5px 2px 2px rgba(180, 180, 180, 0.5);
		-webkit-box-shadow: 5px 5px 2px 2px rgba(180, 180, 180, 0.5);
		-moz-box-shadow: 5px 5px 2px 2px rgba(180, 180, 180, 0.5);
		-o-box-shadow: 5px 5px 2px 2px rgba(180, 180, 180, 0.5);
		-ms-box-shadow: 5px 5px 2px 2px rgba(180, 180, 180, 0.5);
		
	}
	section#content .oneplan.special {
		background-color: #dbb;
		background-image: -ms-linear-gradient(#fdd 0%, #dbb 100%); 
		background-image: -webkit-linear-gradient(#fdd 0%, #dbb 100%); 
		background-image: -moz-linear-gradient(#fdd 0%, #dbb 100%); 
		background-image: -o-linear-gradient(#fdd 0%, #dbb 100%); 
		background-image: linear-gradient(#fdd 0%, #dbb 100%);
	}
	section#content .oneplan .important {
		font-size: 1.3em;
	}
	section#content .oneplan h3 {
		margin-top: 0;
		padding: 1em 0;
	}
	section#content .oneplan.special h3 {
		color: #ff0;
	}
	section#content .oneplan hr {
		border-color: #bbb;
	}
	section#content .oneplan .bigger {
		font-weight: normal;
		font-size: 1.5em;
		font-family: "Oswald",Arial,Helvetica,sans-serif;
	}
	section#content .oneplan.special .bigger {
		color: #f00;
	}
	section#content td.special {
		font-weight: bold;
		background-color: #dbb;
		background-image: -ms-linear-gradient(#FFFFCC 0%, #FFFF00 100%); 
		background-image: -webkit-linear-gradient(#FFFFCC 0%, #FFFF00 100%); 
		background-image: -moz-linear-gradient(#FFFFCC 0%, #FFFF00 100%); 
		background-image: -o-linear-gradient(#FFFFCC 0%, #FFFF00 100%); 
		background-image: linear-gradient(#FFFFCC 0%, #FFFF00 100%);
	}
	
	section#content .tab-content {
		background-color: #fff;
		border-left: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		border-right: 1px solid #ddd;
		padding: 20px;
		box-shadow: 2px 2px 2px #999;
	}
	
	section#content .tab-content .carousel {
		margin-bottom: 0;
		padding: 0 60px 60px;
		height: 140px;
		min-width: 898px;
	}
	section#content .tab-content .carousel .well {
		padding-left: 0; padding-right: 0;
	}
	section#content .tab-content .carousel .well img {
		margin-bottom: 5px;
	}
	section#content .tab-content .carousel-control {
		width: 40px;
		background: none;
		color: #333;
		padding-top: 45px;
	}

	section#content2 {
		padding: 50px 0;
	}
	section#content2 h2 {
		margin-bottom: 30px;
	}
	
	.navbar {
		box-shadow: 0 0 6px 3px rgba(0, 2, 2, 0.5);
		-webkit-box-shadow: 0 0 3px 6px rgba(0, 2, 2, 0.5);
		-moz-box-shadow: 0 0 6px 3px rgba(0, 2, 2, 0.5);
		-o-box-shadow: 0 0 6px 3px rgba(0, 2, 2, 0.5);
		-ms-box-shadow: 0 0 6px 3px rgba(0, 2, 2, 0.5);
	}

	
	#flexstart {
		color: #eee;
		height: 130px;
		margin-top: 30px;
		margin-bottom: 30px;
	}
	
	#flexstart .slides li {
		height: 130px;
	}
	
	#flexstart .slides li div {
		padding: 25px 0;
	}
	
	#flexstart .flex-control-paging li a {
		background: none repeat scroll 0 0 rgba(120, 120, 255, 0.4);
	}
	#flexstart .flex-control-paging li a.flex-active {
		background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
	}
	.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
		background-color: #333;
		color: white;
	}
	
	.table>thead>tr>td.info, .table>tbody>tr>td.info, .table>tfoot>tr>td.info, .table>thead>tr>th.info,
	.table>tbody>tr>th.info, .table>tfoot>tr>th.info, .table>thead>tr.info>td, .table>tbody>tr.info>td,
	.table>tfoot>tr.info>td, .table>thead>tr.info>th, .table>tbody>tr.info>th, .table>tfoot>tr.info>th {
		background-color:#B0CDFF;
	}
	.table-hover>tbody>tr>td.info:hover, .table-hover>tbody>tr>th.info:hover, .table-hover>tbody>tr.info:hover>td,
	.table-hover>tbody>tr.info:hover>th {
		background-color:#7EADFF;
	}
	
	table td.special {
		background-color: #dbb;
	}
	
	table thead.hosting th {
		text-align: center;
		border-bottom: none !important;
		border-top: none !important;
		padding: 0;
		margin: 0;
	}
	
	table thead.hosting th div.plan {
		position: relative;
		font-size: 140%;
		color: #fff;
		border-top: #3b64a9 solid 1px !important;
		border-right: #3b64a9 solid 1px !important;
		background-color: #4b74b9;
		background-image: -ms-linear-gradient(135deg, #6b94d9 0%, #4b74b9 100%);  
		background-image: -webkit-linear-gradient(135deg, #6b94d9 0%, #4b74b9 100%); 
		background-image: -moz-linear-gradient(135deg, #6b94d9 0%, #4b74b9 100%); 
		background-image: -o-linear-gradient(135deg, #6b94d9 0%, #4b74b9 100%); 
		background-image: linear-gradient(135deg, #6b94d9 0%, #4b74b9 100%);
		margin: 0 0 1.5em;
		padding: 20px 0 0;
	}
	
	table thead.hosting th div.plan.leftborder {
		border-left: #3b64a9 solid 1px !important;
	}
	
	table thead.hosting th div.plan.special {
		color: #ff6;
	}
	
	table thead.hosting th div.plan h3 {
		font-size: 90%;
		text-shadow: 1px 1px 1px #000000;
	}
	
	table thead.hosting th div.plan .orderbutton {
		margin: 0;
		padding: 0;
	}
	
	table thead.hosting th div.plan .orderbutton a.btn {
		font-size: 60%;
		color: #fff;
		position: relative;
		top: 1.2em;
		z-index: 5;
		-ms-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
		-o-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
		-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
		box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
	}
	
	table.stickyheader thead {
		position: fixed;
		top: 50px;
	}
	
	table.hosting tbody td.orderbutton {
		padding: 3px 0;
	}
	table.hosting tbody td.orderbutton a.btn {
		font-size: 95%;
	}
	
	.price {
		font-family: "Oswald",Arial,Helvetica,sans-serif;
		width: 100%;
		text-shadow: 1px 1px 3px #000000;
		font-weight: bold; 
		margin: 0;
		padding: 0;
	}
	
	.price.longterm {
		color: #ff6;
	}
	
	.price.priceinfo {
		min-height: 20px;
		font-size: 70%;
		text-shadow: none;
		font-weight: normal;
	}
	
	.price.priceselection {
		min-height: 41px;
		font-size: 70%;
		text-shadow: none;
		text-align: center;
		margin-top: 10px;
	}
	.price.priceselection label {
		margin-bottom: 0;
		font-weight: normal;
	}
	
	.price .pre {
		left: 0.5em;
		font-size: 250%;
	}
	
	.price .post {
		position: relative;
		font-size: 150%;
		left: -0.3em;
		top: -0.6em;
	}
	
	.price .currency {
		font-size: 70%;
		margin-top: 1em;
		margin-left: -2.6em;
	}
	
	.awards a {
		display: block;
		float: left;
		margin-top: 5px;
		margin-right: 5px;
	}
	
	.awards a img, #awards a img {
		border: 0;
	}
	
	footer {
		clear: both;
		border-top: 1px solid #bbb;
		background-image: -ms-linear-gradient(#eee 0%, #ccc 100%); 
		background-image: -webkit-linear-gradient(#eee 0%, #ccc 100%); 
		background-image: -moz-linear-gradient(#eee 0%, #ccc 100%); 
		background-image: -o-linear-gradient(#eee 0%, #ccc 100%); 
		background-image: linear-gradient(#eee 0%, #ccc 100%);
	}
	footer .row {
		padding: 15px 0;
	}
	
	.ribbon-wrapper {
		width: 100px;
		height: 100px;
		overflow: hidden;
		position: absolute;
		top: -6px;
		right: -6px;
		z-index: 50;
	}
}

@media (min-width: 1200px) {
	#colplans {
		width: 930px;
	}
	#colplans.count6 {
		width: 954px;
	}
	#colplans col {
		width: 186px;
	}
	#colplans.count6 col {
		width: 159px;
	}
}

@media (max-width: 992px) {
	footer .row .text-center, footer .row .text-right {
		text-align: left;
	}
	
	#footerpusher, footer {
		height: 600px;
	}
	
	#pagewrapper {
		margin: 0 auto -600px;
	}
	
	.navbar li {
		font-size: 0.9em;
	}
	.navbar li a {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 18px;
	}
	
	#flexstart h1 {
		font-size: 36px;
	}
	
	#flexstart h2 {
		font-size: 24px;
	}
}

@media (min-width: 768px) {
	.navbar li a {
		height: 92px;
		text-align: center;
	}	
	.navbar li a .fa {
		display: block;
		margin: 5px 0;
	}
}

@media (max-width: 767px) {
	body {
		padding-top: 45px;
	}
	div.row.fixedhosting {
		top:50px;
	}
	section#datacenter {
		padding-top: 15px;
	}
	section#promise h3, section#promise i.fa {
		margin-top: 20px;
	}
	.navbar-header a {
		padding-top: 10px;
	}
	.navbar li {
		font-size: 1em;
	}
	.navbar li a {
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 15px;
	}
	.navbar li a i.fa-2x {
		font-size: 1em;
		margin-right: 5px;
	}
	#flexstart h1 {
		font-size: 48px;
	}
	
	#flexstart h2 {
		font-size: 32px;
	}
}

@media (max-width: 500px) {
	section#datacenter {
		padding-top: 10px;
	}
	section#datacenter big {
		font-size: 1.2em;
		margin-top: 0.3em;
	}	
	#flexstart h1 {
		font-size: 36px;
	}
	
	#flexstart h2 {
		font-size: 24px;
	}
}

@media (max-width: 400px) {
	section#datacenter {
		padding-top: 0;
	}
	#flexstart h1 {
		font-size: 30px;
	}
	
	#flexstart h2 {
		font-size: 20px;
	}
}