@charset "utf-8";
/* CSS Document */
/* Author: Scott Tweedie 
My goal is to try to use the DRY method and reuse as much code as possible */
/* Body and Font Tags*/

html {
	
	height: 100%; /* this is the key! */ 
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	color:#000000;
	background: white;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
	font-size: 11.7px;
	font-weight:normal;
	font-style: normal;
	line-height: normal;
	height: 100%; /* this is the key! */ 
    margin: 0;
	padding: 0;


}
h1 {font-size: 150%}
h2 {font-size: 130%}
p {font-size: 100%}
p.package-text, h1.package-text {font-weight:400;color: #333333;}
.paragraph_text {
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 11.7px;
	font-weight:normal;
	font-style: normal;
	line-height: normal;
	color: #000000;
}
.style5 {	color: #999999;	font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;	font-size: 10px;}
.style6 {color: #999999}
.style7 {color: #FFFFFF}
.style8 {color: #FFFFFF; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif; font-size: 10px; }
.stylehomeclients {
	color: #FFFFFF;
	font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
	font-size: 8px;
	text-align: center;
}
.footer1 {color: #999999; font-size: 75%;}

.paragraph_intro {
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 14px;
	font-weight:normal;
	font-style: normal;
	line-height: 20px;
	color: #000000;
	text-align: left;
}

a:link { color: #0099cc; }
a:visited {
	color: #0099cc;
	text-align: center;
}
 
a.topnav:link {color: white; text-decoration: none; }
a.topnav:visited {color: white; text-decoration: none; }
a.topnav:hover {color: white; text-decoration: underline; }
a.topnav:active {color: white; } 

a.bluelink:link {color: #0099cc; text-decoration: none;font-weight: bold; }
a.bluelink:visited {color: #0099cc;text-decoration: none; font-weight: bold; }
a.bluelink:hover {color: white; text-decoration: underline; font-weight: bold;}
a.bluelink:active {color: #0099cc; font-weight: bold;}

a.whitelink:link {color: #ffffff; text-decoration: none; }
a.whitelink:visited {color: #ffffff; text-decoration: none; }
a.whitelink:hover {color: #ffffff; text-decoration: underline; }
a.whitelink:active {color: #ffffff; } 

.header_white {
	font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #000000;
	line-height: 2em;
}
.header_black {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;font-size: 18px;font-weight: 400;	color: #000000;}
.footer_white {
	font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	line-height: 3em;
}

/*MISC---------------------------------*/
.thumb:hover img {border:5px solid #AAAAAA;}
.thumb img {border:5px solid #CCCCCC;}

ul.orderedlistnobulls { line-height: normal; list-style-type:none; text-align:left;}
ads_right { float: right;   padding: 5px;  margin: 0; }  
/*END MISC---------------------------------*/

/*Font Classes FOR TESTING..................................................*/
.caution {font-family: Verdana; font-size: 12pt; color: red; } /*the .caution is a CLASS which will be used once*/
#caution {font-family: Verdana; font-size: 12pt; color: red; } /*the #caution is an ID*/
.headertest, .red, .green {width: 100%; background: white; font-size: 20px; color: purple; } 
.red { float:left; color: red; width: 30%} 
.green {float:right; width: 60%; color: green; } 
/*END  Font Classes FOR TESTING..................................................*/


/*FONTSsssssssssssssssssssssssssssssssssssssssssssssssssssss*/




/*END   FONTSsssssssssssssssssssssssssssssssssssssssssssssssssssss*/





#headbg  {
	width: 100%;
	min-width: 100%;
	height:62px;
	width: 100%;
	margin: 0;
	padding: 0px 0;
	background: url(images/header-bgs/menubg-52.gif);
	height: 62px;
}
 

/* Header Area on each page--------------*/
#headcontainer {
	width: 100%;
	height:52px;
	min-width: 100%;
	margin: 0;
	padding: 0px 0;
}
#grill,#shadow,#vertstripes,#stripes  {width: 100%; height:62px; width: 100%; margin: 0; padding: 0px 0;}
	
#mainmenu  {background: url(images/header-bgs/menubg-52.gif);	height: 52px;}
 
#logo {
	float: left;
	width: 28%;
	padding: 0px 0;
	min-width: 28%;
	width: 31%;
	background: url(images/header-bgs/menubg-52.gif);
	height: 52px;
	z-index: 0;
} 

#mainmenu {
	float: right;
	width: 68%;
	height: 52px;
	z-index:1;
	text-align:center;
	min-width: 68%;
	padding-left: 10px;
}
#grill {
	height: 20px;
	padding: 0px 0;
	background-image: url(images/grills/2000.png);
	background-color: #000000;
}
#shadow {
	height: 8px;
	padding: 0px 0;
	background-image: url(images/blubar.png);
	background-color: #000000;
}
#stripes {
	background: #000000;
	height: 20px;
	background-image: url(images/stripes/bluesmall.gif);
}
#vertstripes {background: #000000;background: url(images/stripes/blue-vert.png);height: 15px;}

#header h1 {margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

/* FOOTER */

/* Footer Classes below*/


#footcont {
	width: 100%;
	background: black;
	margin: 0;
	text-align: center;
	height: 350px;
	min-width: 100%;
	background-image: url(images/stripes/bg1.png);
} 

#footheadercont {
	background: #ffffff;
	padding: 0;
	position: relative;
	height: 120px;
	width: 100%;
	min-width: 100%;}

#footheader {
	background: #ffffff;
	padding: 0;
	background-image: url(images/stripes/bluefooter.gif);
	background-repeat: repeat-x;
	height: 120px;
	width: 100%;
	min-width: 100%;
	height: 90px;
}
#footlistcont {
	width: 955px;
	min-width: 955px;
	margin:0;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
} 

.footlist1 {
	float: left;
	width: 16%;
	padding-left:0px;
	margin: 0;
	min-width: 150px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #ffffff;
	text-align:left;
}
.footlist2 {
	float: right;
	width: 25%;
	padding: 5px;
	padding-left:10px;
	margin: 0;
	width: 20%;
	min-width: 300px;
	font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	text-align:left;
}
	
.footlist1 p, .footlist2 p  .footlist1 h3, .footlist2 p, .footlist2 h3 {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;}

.#mainContent {margin: 0 24% 0 23.5%; padding: 15px 0; /* top and bottom padding create visual space within this div  */
}
.#mainContent {margin: 0 24% 0 23.5%; padding: 15px 0; /* top and bottom padding create visual space within this div  */
}

.footerpage #footer { 
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#000000;
} 
.footerpage #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
 
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
 
}


/* Portfolio Page is unique becuase it has the big flash area */


/* Content Pages (about us, ...list the others can all use the same layout to start...that will get the site launched..then we can come back and adjust them as needed. */

#maincontainer {width: 100%; background: white;margin: 0; text-align: left; height:100px; min-width:955px;}
.banner955 {background-color: white; ;text-align: center;min-width:955px;min-height:250px;}
.bannerbluestripe {
	background-color: white;
	text-align: center;
	min-width:955px;
	min-height:125px;
	background-image: url(images/stripes/blue.png);
	height: 125px;
	padding: 0;
}
.banneraboutus {
	background-color: black;
	;
	text-align: center;
	min-width:955px;
	min-height:250px;
	background-image: url(images/grills/2000.gif);
	height: 250px;
	padding: 0;
}
.bannercloud {background-color: white;	text-align: center;	min-width:955px;	min-height:200px;	background-image: url(images/middleimages/what-is-cloud-bg.jpg);
}
.banner955Flash {background-color: white; z-index:-1; text-align: center; min-width:955px; width: 100%; min-height:250px;}
.bannerorange {
	background-color: #0099cc;
	z-index:-1;
	text-align: center;
	min-width:955px;
	min-height:250px;
	height: 250px;
}
.bannerthanks {
	background-color: #0099cc;
	z-index:-1;
	text-align: center;
	min-width:955px;
	min-height:250px;
	background-image: url(images/middleimages/middle-thanks.jpg);
	height: 250px;
}
.bannerblack {	background-color: black;	z-index:-1;	text-align: center;	min-width:955px;	min-height:250px;}
.bannerthin {
	background-color: black;
	z-index:-1;
	text-align: left;
	min-width:955px;
	min-height:100px;
	background-image: url(images/stripes/blue.png);
	padding-left: 25px;
	height: 100px;
	padding-top: 50px;
}



 
.servicesmenu{
	background-color: #FFFFFF;
	width: 955px;
	min-width: 955px;
	text-align:center;
	height: 20px;
	margin-left: auto;
	margin-right: auto;
}


.contservices {
	width: 100%;
    margin: 0;
	height: 300px;
	background: #8ECFE9;
	width:100%;
	min-width: 100%;
	position: relative;
} 
.contcont {
	width: 100%;
	margin: 0;
	min-width: 100%;
	text-align: center;
	background: #8ECFE9;
	margin-bottom: auto;
	margin: 50;
} 
.contcontwhite {
	width: 100%;
	margin: 0;
	min-width: 100%;
	text-align: center;
	background: #ffffff;
	margin-bottom: auto;
	height: 100%;
} 
.wrapperwhite100 {
	width: 100%;
	margin: 0;
	min-width: 100%;
	text-align: center;
	background: #ffffff;
	margin-bottom: auto;
	min-height: 100%;
	
} 
.contcontblack {
	width: 100%;
	margin: 0;
	min-width: 100%;
	text-align: center;
	min-height: auto;
	background-image: url(images/stripes/bg1.png);
	height: 100%;
	background-repeat: repeat;
	display: table;
	position: relative;

} 
.contwrapper {
	width: 955px;
	min-width: 955px;
	margin: 0;
	background-color: #8ECFE9;
	height: 335px;
} 

.leftcont   {
	float: left;
	width: 99%;
	min-width:800px;
	background: #8ecfe9;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 5px;
	text-align: left;
 
}
.rightcont  {
	float: right;
	width: 25%;
	min-width:300px;
	background: #8ecfe9;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 15px;
	text-align: left;
	margin: 0;
	 
}
.leftcontCLOUD   {
	float: left;
	width: 50%;
	min-width:500px;
	background: #ffffff;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0px;
	text-align: left;
 
}
.rightcontCLOUD   {
	float: right;
	width: 300px;
	min-width:300px;
	background: #ffffff;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 15px;
	text-align: center;
	margin: 0;
	 
}
.leftcontFORM   {
	float: left;
	width: 45%;
	min-width:325px;
	background: #ffffff;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0px;
	text-align: left;
 
}
.rightcontFORM   {
	float: right;
	width: 450px;
	min-width:300px;
	background: #ffffff;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 15px;
	text-align: center;
	margin: 0;
	 
}
.leftcontHOW   {
	float: left;
	width: 50%;
	min-width:500px;
	background: #ffffff;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0px;
	text-align: left;
 
}
.rightcontHOW   {
	float: right;
	width: 200px;
	min-width:200px;
	background: #ffffff;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 15px;
	text-align: center;
	margin: 0;
	 
}
.contcontwhite {
	width: 100%;
	height: 100%;
	height: 100%;
	background: #ffffff;
	text-align: left;
	min-width: 955px;
} 

.25 {
	width: 25%;
	background: #ffffff;
	min-width:250px;
	float: left;
	 
	 
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 15px;
	 }

.70 {
	width: 70%;
	background: #ffffff;
	min-width:700px;
	float: right;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 15px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
 
}
#servicestcont {
	width: 950px;
	min-width: 1000px;
	margin:0;
	margin-left: auto;
	margin-right: auto;
	height: 500px;
} 
.servicesconttentcontainer {
	width: 100%;
	margin: 0;
	height: 800px;
	background: #8ECFE9;
	width:955px;
	min-width: 955px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
} 

.servicebannerleft {
	float: left;
	width: 315px;
	background: #ffffff;
	padding-left:0px;
	margin: 0;
	min-width: 315px;
	text-align:left;
	margin-top: 2px;
}
.servicebannerright {
	float: right;
	width: 25%;
	background: #000000;
	padding: 5px;
	padding-left:10px;
	margin: 0;
	width: 20%;
	min-width: 300px;
	color: #ffffff;
    text-align:left;
}
 
.contentwrapper {
	width: 100%;
height: 100%;} 
.serviceswrapper {
	width: 100%;
	margin: 0;
	min-width: 500px;
	position: relative;
	text-align: center;
	background-color: #FFFFFF;
	height: 502px;
	min-height: 325px;
	margin-left: auto;
	margin-right: auto;
} 
.FORMwrapper {
	width: 900px;
	margin: 0;
	min-width: 500px;
	position: relative;
	text-align: center;
	background-color: #FFFFFF;
	height: auto;
	min-height: 500px;
	margin-right: auto;
	margin-left: auto;
} 
.HOWwrapper {
	width: 800px;
	margin: 0;
	min-width: 500px;
	position: relative;
	text-align: center;
	background-color: #FFFFFF;
	height: 100%;
	min-height: 500px;
} 
.serviceswrapperbottom {
	width: 100%;
	margin: 0;
	min-width: 955px;
	position: relative;
	text-align: center;
	background-color: #8ECFE9;
} 



.servicesleftcont   {
	float: left;
	width: 60%;
	min-width:600px;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 15px;
	text-align: left;
	background-color: #8ECFE9;
 
	
}
.servicesrightcont  {
	float: right;
	width: 25%;
	min-width:300px;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 15px;
	text-align: center;
	background-color: #8ECFE9;
	 
}


/* Curved Box

 /* set the image to use and establish the lower-right position */
    .cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{
      background: transparent url(images/img.png) no-repeat bottom right}
    .cssbox{
	/* intended total box width - padding-right(next) */
      width:955px !important; /* IE Win = width - padding */
	width: 955px;
	/* the gap on the right edge of the image (not content padding) */
      padding-right:15px; /* use to position the box */
	margin:20px auto;
	background-color: #FFFFFF;
	margin-top: 10px;
	max-width: 955px;
	height: 800px;
}

    /* set the top-right image */
    .cssbox_head{background-position:top right;
    /* pull the right image over on top of border */
      margin-right:-15px; 
    /* right-image-gap + right-inside padding */
      padding-right:40px}

    /* set the top-left image */
    .cssbox_head h2{
      background-position:top left;
      margin:0; /* reset main site styles*/ 
      border:0; /* ditto */
    /* padding-left = image gap + interior padding ... no padding-right */
      padding:25px 0 15px 40px; 
      height:auto !important;
      height:1%} /* IE Holly Hack */

    /* set the lower-left corner image */
    .cssbox_body{
	background-position:bottom left;
	margin-right:25px; /* interior-padding right */
	padding:15px 0 15px 40px;
	height: 100%;
} /* mirror .cssbox_head right/left */


.cssbox_headerbanner{
	background-color: #000000;
	width: 100%;
	min-width: 100%;
	height: 200px;
	min-height: 200px;
	text-align: left;
}

.cssbox_wrapper{
	background-color: #000000;
	width: 100%;
	min-width: 100%;
	height: 100%;
	text-align: center;
}

.cssbox_menuwrapper{
	background-color: #000000;
	width: 955px;
	min-width: 955px;
	text-align:center;
	height: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
.cssbox_menuleft{
	margin: 0;
	background-color: #000000;
	width: 50%;
	min-width: 600px;
	float: left;
	text-align:left;
	padding-top: 0px;
}
.cssbox_menuright{
	background-color: #000000;
	width: 25%;
	min-width: 300 px;
	float: right;
	text-align:left;
}
.sitecontent_wrapper{
	background-color: #FFFFFF;
	width: 955px;
	min-width: 955px;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	margin: auto;
	padding: 0;
	min-height: 100%;
	height: 100%;
}
.clients_wrapper, clients_list_wrapper{
	background-color: #000000;
	width: 670px;
	min-width: 670px;
	text-align:center;
	height: 460px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10px;
	overflow: scroll;
}
.clients_list_wrapper{
	background-color: #000000;
	width: 800px;
	min-width: 800px;
	text-align:center;
	height: 600px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10px;
	overflow: scroll;
}
.clients_logos_wrapper{
	background-color: #000000;
	width: 670px;
	min-width: 670px;
	text-align:center;
	height: 460px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10px;

}
.sitecontent_left{
	margin: 0;
	background-color: #FFFFFF;
	width: 60%;
	float: left;
	text-align:left;
	padding-top: 0px;
	padding-left: 10px;
	height: 100%;
	overflow: visible;
}
.sitecontent_right{
	background-color: #FFFFFF;
	width: 30%;
	float: right;
	text-align:left;
	padding-left: 10px;
}
.cssbox_headermenuright{      background-color: #000000; width: 25%; min-width: 300 px; float: right; text-align:left;}

.packages{
	margin: 0;
	background-color: #FFFFFF;
	width: 90%;
	float: none;
	text-align:left;
	padding-top: 0px;
	padding-left: 10px;
	height: 100%;
}


#homepageclientscont{
	width: 900px;
	min-width: 900px;
	margin:0;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
} 

}
.homepageclients1 {
 float: left;
	
	 
	padding: 5px;
	padding-left:10px;
	margin: 0;
 
	min-width: 300px;
	font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	text-align:center;
}
.homepageclients2 {
 
 float: right;
	width: 25%;
	padding: 5px;
	padding-left:10px;
	margin: 0;
 
	min-width: 300px;
	font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	text-align:left;
}

















*/