@charset "UTF-8";

/* Fiberoute LTD - Designed inhouse [last update 20th December 2013 */

/*Global Design Elements */

html, body {
       height: 100%;
 }
 
body {
	font-family: 'Roboto', sans-serif; /*Arial, Helvetica, sans-serif;*/
	color: #6f7173;
	background-color: #f8f8f8;
	margin: 0;
    padding: 0;
	min-height: 100%;  /* for all other browsers */
    height: 100%;  /* for IE */
    position:relative;
	min-width: 1200px;
}

#wrapper {
	max-width:950px; /*width: 90%;*/
	margin: 0 auto;
	overflow: hidden;
	padding-left: 20px;
	min-height: 100%;
}

#mainframe {
	padding-bottom: 10px;
}

h1 {
	font-size: 17pt;
	padding-top: 20px;
}
h2 {
	font-weight: normal;
}

a {
	color: #DEDEDE;
	text-decoration: none;
}

a:hover {
	color: #FFFFFF;
 }

#mainmenu {
	background: url("../images/background.gif") #000;
	height: 60px;
    top:0;
    width:100%;
    z-index:100;
    opacity: 0.9;
}

#navbar li {
	text-align: right;
	margin-right: 15px;
    margin-left: 15px;
	margin-bottom: 0px;
}

#navbar img {
	max-width: 200px;
	float:left;
    margin-top: 8px;
}

.nav {
	list-style: none;
	margin: 0;
	text-align: right;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	width: 700px;
float:right;
}

.nav li {
    display: inline;
}

.clear{
  clear:both;
}

.nav li a {
	text-decoration: none;
	color: #828282;
	font-size: 17px;
	border:solid 1px transparent;
	padding: 5px;
}

.nav li a:hover {
	background: #1e1e1e;
    box-shadow: inset 0 1px 0 #1c1c1c, 0 1px 0 rgba( 255, 255, 255, 0.1 );
border: 1px solid #0a0302;
color: #FFFFFF;
}

#banner {
	background: url(../images/londonbg8.jpg) center center no-repeat;
background-size: 100%;
width: auto;
height: auto;
max-width: 100%; /*100%;*/
max-height: 100%;
padding-top:70px;
padding-bottom: 35px;
min-height: 120px;
}

#banner .text {

margin-left: 57%;
z-index: 99999;
width: 400px;
}

#banner .text h1 {
	
    position: relative; 
    color:#FFF;
    font-weight: 500;
    font-smooth:always;
    -webkit-font-smoothing: antialiased;
    z-index:1000;
    margin: 0 0 22px 0;
font-size: 1.4em;
line-height: 120%;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
#banner .text h1 span {
font-size: 24px;
line-height: 42px;
margin-bottom: 15px;
font-weight: bold;
}

#footer-top{
    background-color: #1c1c1c;
    position: relative;
    width: 100%;
    bottom: 0;
}

#footer-line {
	border-top-style: 1px solid;
	border-top: 1px solid;
	border-top-color: #dfdfdf;
}

#footer-col {
	padding-top:20px;
	width: 25%;
	float:left;
}

#footer-col li {
	list-style:none;
    list-style-type:none;
	color: #7A7A7A;
	font-size: 14px;
	margin-left:-40px;
}

#footer-col a {
	color: #7A7A7A;
}
#footer-col a:hover {
	color: #D74B4B;
}
#footer-col ul {
list-style:none;
list-style-type:none;
list-style-position: inside;
}
#footer subtitle {
	font-size: 16px;
	color: #ffffff;
	font-weight:400;
	text-align: left;
	text-transform: uppercase;
}
#text p {
     display: inline;
     float:left;
}
#text .left {
	float: left;
}
#text .right {
	float: right;
}

#text {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	color: #DEDEDE;
	font-size: 16px;
	font-family: "europa", sans-serif;
}

@font-face {
    font-family: "europa";
    src:'../fonts/europa.ttf'
}

@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:639px) {}
@media screen and (min-width:640px) and (max-width:959px) {}
@media screen and (min-width:960px) and (max-width:1279px) {}
@media screen and (min-width:1280px) and (max-width:1599px) {}
@media screen and (min-width:1600px) {}
@media screen and (min-width:1920px) {}
@media print {}

/*Homepage*/

#featured {
	overflow: hidden;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
}

#featured a {
	color: #D74B4B;
}

#featured-item {
	width: 30%;
	display:inline-block;
	background-color: #efefef;
	margin: 10px;
	border-radius: 8px;
	border:1px solid #bcc9d7; 
   box-shadow: 0px 0px 2px 1px #dce1e5;
   border-radius:5px; 
}

#featured-item h3 {
	padding: 5px;
	text-align: center;
	font-size: 16px;
}
#featured-item p {
	padding: 5px;
	text-align: center;
}

#homepageabout a{
	color: #D74B4B;
}

/*Infastructure*/

#infrastructureheader {
	background: url(../images/racks5.jpg) center center no-repeat;
	background-size: 100%;
	width: auto;
	height: auto;
	max-width: 100%; /*100%;*/
	max-height: 100%;
	padding-top:400px;
}

#factbox {
    background-color: #efefef;
	margin: 10px;
	border-radius: 8px;	
	margin-top: 240px;
}

#factboxcontent {
	padding-bottom: 10px;
	padding-top: 5px;
	padding-left: 10px;
}

#infastructurepictures {
	max-height: 220px;
	max-width: 100%;
	margin-left: 15%;
}

#goswellroadpics {
	max-width: 320px;
	float:left;
	text-align: center;
}

#goswellroadmap {
    padding-left: 20px;
	float: left;
	max-width: 210px;
	text-align: center;
}

/*Virtual Servers*/

#pricing-table {
	text-align: center;
	width: 892px; /* total computed width = 222 x 3 + 226 */
}

#pricing-table .plan {
	font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
	text-shadow: 0 1px rgba(255,255,255,.8);     
	background: #fff;      
	border: 1px solid #ddd;
	color: #333;
	padding: 20px;
	width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */
	float: left;
	position: relative;
}
	
#pricing-table #most-popular {
	z-index: 2;
	top: -13px;
	border-width: 3px;
	padding: 30px 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	-webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);    
}

#pricing-table .plan:nth-child(1) {
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
}

#pricing-table .plan:nth-child(4) {
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;        
}

#pricing-table h3 {
	font-size: 20px;
	font-weight: normal;
	padding: 20px;
	margin: -20px -20px 50px -20px;
	background-color: #eee;
	background-image: -moz-linear-gradient(#fff,#eee);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
	background-image: -webkit-linear-gradient(#fff, #eee);
	background-image: -o-linear-gradient(#fff, #eee);
	background-image: -ms-linear-gradient(#fff, #eee);
	background-image: linear-gradient(#fff, #eee);
}
	
#pricing-table #most-popular h3 {
	background-color: #ddd;
	background-image: -moz-linear-gradient(#eee,#ddd);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));    
	background-image: -webkit-linear-gradient(#eee, #ddd);
	background-image: -o-linear-gradient(#eee, #ddd);
	background-image: -ms-linear-gradient(#eee, #ddd);
	background-image: linear-gradient(#eee, #ddd);
	margin-top: -30px;
	padding-top: 30px;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0; 		
}
	
#pricing-table .plan:nth-child(1) h3 {
	-moz-border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	border-radius: 5px 0 0 0;       
}
	
#pricing-table .plan:nth-child(4) h3 {
	-moz-border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;       
}	

#pricing-table h3 span {
	display: block;
	font: bold 25px/100px Georgia, Serif;
	color: #777;
	background: #fff;
	border: 5px solid #fff;
	height: 100px;
	width: 100px;
	margin: 10px auto -65px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}

#pricing-table ul {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
}

#pricing-table li {
	border-top: 1px solid #ddd;
	padding: 10px 0;
}
		
#pricing-table .signup {
	position: relative;
	padding: 8px 20px;
	margin: 20px 0 0 0;  
	color: #fff;
	font: bold 14px Arial, Helvetica;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;       
	background-color: #F5384B;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;     
	text-shadow: 0 1px 0 rgba(0,0,0,.3);
}

#pricing-table .signup:hover {
	background-color: #FA3E51;
}

#pricing-table .signup:active, #pricing-table .signup:focus {
	background: #F5384B;       
	top: 2px;
	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
	box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; 
}

.clear:before, .clear:after {
	content:"";
	display:table;
}

.clear:after {;
	clear:both
}

.clear	{
	zoom:1;
}

/*buttons*/

.btn-red {
	margin-left: 28px;
-webkit-box-shadow: inset 0 2px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 2px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 2px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-large {
	float: left;
}

.btn.btn-red {
	color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background: #F5384B/*#63c6ae*/;
}

.btn:hover {
color: #fff;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
background-color: #e6e6e6;
}

a, a:hover {
	white-space: nowrap;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}

.btn {
	display: inline-block;
*display: inline;
*zoom: 1;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
background-image: -o-linear-gradient(top, #fff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFE6E6E6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #e6e6e6;
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
border: 1px solid #ccc;
*border: 0;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
*margin-left: .3em;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn {
	padding: 16px 24px 17px 24px;
font-family: 'Roboto', sans-serif; /*Arial, Helvetica, sans-serif;*/font-size: 13px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.2em;
text-shadow: none;
background-color: #ccc;
border: 0 none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -2px rgba(0, 0, 0, 0.1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

.btn.btn-red:hover {
	background: #FA3E51;
}

.btn-outline {
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 4px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 4px 10px rgba(0,0,0,0.2);
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn.btn-outline.btn-white:hover {
color: #fff;
border-color: #fff;
background: none;
}

.btn.btn-outline.btn-white {
	color: #fff;
border-color: rgba(255,255,255,0.5);
}
.btn.btn-white:hover {
	background-color: #f7f5f2;
}

.btn.btn-large.btn-outline {
	padding:14px 24px 15px 24px;
}

.btn.btn-outline {
	color: #626263;
background: none;
border: 2px solid #bbb;
-webkit-box-shadow: 0 1px rgba(0,0,0,0);
-moz-box-shadow: 0 1px rgba(0,0,0,0);
box-shadow: 0 1px rgba(0,0,0,0);
}

#partners {
height: 60px;
background-color: #efefef;
border-radius: 8px;
border:1px solid #bcc9d7; 
box-shadow: 0px 0px 2px 1px #dce1e5;	
}

#partners img {
padding-top: 5px;
padding-bottom: 5px;
padding-right: 25px;
float:left;
}

#partners h2 {
	width: 170px;
	font-size: 18px;
	float:left;
	padding-top:5px;
	padding-left: 5px;
	padding-right: 5px;
}

/* Image sprites */

.web-hosting,.data-center,.dedicated-server,.fiberoutedark,.cpanel,.cpanelDARK,.level3,.level3DARK,.supermicro,.supermicroDARK,.intel,.intelDARK,.fiberoutelight,.centos{background:url(../images/sprite.png) no-repeat;display:block;}
.web-hosting{background-position: -1866px 0; width: 128px; height: 128px;margin:0 auto}
.data-center{background-position: -552px 0; width: 128px; height: 128px;margin:0 auto}
.dedicated-server{background-position: -681px 0; width: 128px; height: 128px;margin:0 auto}

.fiberoutedark{background-position: -810px 0; width: 180px; height: 48px;}
.fiberoutelight{background-position: -991px 0; width: 180px; height: 48px;float:left;margin-top:8px}

.cpanel:hover{background-position: -276px 0; width: 137px; height: 42px;}
.cpanel{background-position: -414px 0; width: 137px; height: 42px;margin-left:7px;margin-top:9px;float:left;}

.level3:hover{background-position: -1314px 0; width: 137px; height: 36px;}
.level3{background-position: -1452px 0; width: 137px; height: 36px;margin-left:15px;margin-top:12px;float:left;}

.supermicro:hover{background-position: -1590px 0; width: 137px; height: 20px;}
.supermicro{background-position: -1728px 0; width: 137px; height: 20px;margin-left:15px;margin-top:20px;float:left;}

.intel:hover{background-position: -1172px 0; width: 70px; height: 47px;}
.intel{background-position: -1243px 0; width: 70px; height: 47px;margin-left:15px;margin-top:7px;float:left;}

.centos:hover{background-position: 0 0; width: 137px; height: 27px;}
.centos{background-position: -138px 0; width: 137px; height: 27px;margin-left:15px;margin-top:17px;float:left;}

input {
outline: none;
border-style: solid;
border-width: 1px;
border-color: black;
font-size: 14px;
font-style: normal;
font-weight: 100;
width: 461px;
margin-bottom: 10px;
padding: 5px;
}

textarea {
width: 944px;
height: 200px;
resize: none;
outline: none;
border-style: solid;
border-width: 1px;
border-color: black;
font-size: 14px;
margin-bottom:15px;
}

input#contact_send.contact_submit {
	background-color: #F5384B;
	color: #fff;
	border-style:none;
	width: 200px;
}

input#contact_send.contact_submit:hover: {
	background-color: #FA3E51;
	color: #fff;
}

#emaillist li {
	list-style:none;
    list-style-type:none;
	color: #7A7A7A;
	font-size: 14px;
	margin-left:-40px;
}

#emaillist a {
	color: #7A7A7A;
}
#emaillist a:hover {
	color: #D74B4B;
}
#emaillist ul {
list-style:none;
list-style-type:none;
list-style-position: inside;
}

#emaillist h2 {
	font-size: 16px;
	margin-left:-40px;
}
#emaillist{
width: 25%;
float:left;
}

#registeredoffice {
width: 75%;
float:right;
}

#registeredoffice p {
	font-size: 14px;
}
#registeredoffice h2 {
	font-size: 16px;
}

#othercontacts {
	width: 100%;
    height: 140px;
}

#vpsfeatures {
text-align: left;
}

#featureheader {
position:relative;
top:35px;
border-top:1px solid #c2c2c2;
margin-bottom:40px;
}

#featureheader h1 {
background:#f8f8f8;
width:200px;
margin:0 auto;
position:relative;
bottom:14px;
padding: 0;
text-decoration: none;
text-align: center;
}
#featureslisted p {
	width: 225px;
	text-align: center;
	float: left;
}

#featureslisted b {
	font-size: 13pt;
}

#plantagline {
	font-style: italic;
}

#plantagline a {
	color: #FA3E51;
}

#statuspage {
	min-height: 60%;
}