/* HTML Tags
----------------------------------------------------------------------------------------------------*/

body
{
    background-image: url('../images/header-bg-small.jpg');
    background-repeat: repeat-x;
    margin:0;
    padding:0;
    height:100%;
 }



.line {color: #444; background-color: #444; height: 1px;}
label {display: block; color: #2F4D70}
input, textarea, select{
  display: block;
  font-weight: bold;
 color: 444444;
  font-size: 16px;
  padding: 2px;
}
input[type=hidden] {display: none; background-color: #BDD2EB}
input:focus, textarea:focus
{
  background-color: #FFF9C5;
}

input:focus, input.ieFocusHack
{
    background-color: #FFF9C5;
}

ul {list-style: square;}
ul li {padding: 3px;}

ul {list-style-image: url('../images/check.png'); list-style: square;}


#formResponse {display: none}

/* Images

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

.image-border { padding: 4px; border: 2px solid #999;}
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
/* End Images */

/* Links & Top Navigation
----------------------------------------------------------------------------------------------------*/

#nav ul {display: inline; list-style: none}
#nav ul li {display: inline;}

#home 
{
	display: block;
position: relative;
left: 15px;
	float: left;
	width: 92px;
	height: 42px;
	background-image: url('../images/home.png');
	background-repeat: no-repeat;
	background-position: 0 0;
}

#home:hover {background-position: bottom left;}
#home a span{display: none}
#home.active{background-position: bottom left;}

#button-services 
{
float: left;
 display: block;
	width: 156px;
	height: 59px;
	background-image: url('../images/our-services.png');
	background-repeat: no-repeat;
	background-position: top left;
}
#button-services:hover {background-position: bottom left;}
#button-services span{display: none}
#button-services.active{background-position: bottom left;}


#services 
{
	display: block;
	float: left;
	width: 92px;
	height: 42px;
	background-image: url('../images/services.png');
	background-repeat: no-repeat;
	background-position: top left;
}
#services:hover {background-position: bottom left;}
#services span{display: none}
#services.active{background-position: bottom left;}


#portfolio
{
	display: block;
	margin-left: 10px;
	float: left;
	width: 92px;
	height: 42px;
	background-image: url('../images/portfolio.png');
	background-repeat: no-repeat;
	background-position: top left;
}
#portfolio:hover {background-position: bottom left;}
#portfolio span{display: none}
#portfolio.active{background-position: bottom left;}

#blog 
{
	display: block;
	float: left;
position: relative;
left: -5px;
	width: 92px;
	height: 42px;
	background-image: url('../images/blog.png');
	background-repeat: no-repeat;
	background-position: top left;
}
#blog:hover {background-position: bottom left;}
#blog a span{display: none}
#blog.active{background-position: bottom left;}

#quote 
{
	display: block;
	float: left;
	position: relative;
	left: -10px;
	width: 92px;
	height: 42px;
	background-image: url('../images/quote.png');
	background-repeat: no-repeat;
	background-position: top left;
}
#quote:hover {background-position: bottom left;}
#quote a span{display: none}
#quote.active{background-position: bottom left;}

#contact 
{
	display: block;
	float: left;
	position: relative;
	left: -10px;
	width: 92px;
	height: 42px;
	background-image: url('../images/contact.png');
	background-repeat: no-repeat;
	background-position: top left;
}
#contact:hover {background-position: bottom left;}
#contact a span{display: none}
#contact.active{background-position: bottom left;}



/* Layout ID's
----------------------------------------------------------------------------------------------------*/
#container {overflow: hidden}
#mainContent {min-height: 400px;}
#caption h1 {font-size: 40px; line-height: 1.2em; color: #FFF}
#caption {position: relative; top: 30px;}
#screenshot{position: relative; top: 30px;}
#footer
{
  padding: 10px 0 10px 0;
  background: #f0f0f0;
  border-top: 1px solid #b1b1b1;
  color: #646361;
  width: 100%;
  height: 80px;   /* Height of the footer */
  bottom:0;

}

#hosting-plans tr td
{
  text-align: center;
}

.alternate {background-color: #EFEFEF;}

.silver-highlight {background-color: #dadada;}
.bronze-highlight {background-color: #f3efd4;}
.gold-highlight {background-color: #eee478;}

yellow-highlight {background-color: #FCF8C3;}


div.wpcf7-response-output {font-weight: bold; border: 2px solid #E6DB55; background-color: #FFFBCC;}


.action-steps
{
  padding: 5px;
  margin: 10px;
  background-color: #E4FAD0; 
  margin-bottom: 40px;
}
.action-steps h2 {color: #FFF; background-color: #E03263; padding: 4px;} 
.action-steps ul {list-style: square}