/********************************************************************************
* 
* Ecliptic Technologies, Inc.
* Copyright 2007 - All Rights Reserved
* Unauthorized use or reproduction of this product is strictly prohibited by law.
* Website: http://www.ecliptictech.com
* Email: sales@ecliptictech.com
*
* Name: layout.css
* Description: Layout CSS file for the Ecliptic Technologies, Inc. website 
*
*********************************************************************************/


/* Auxilliary style sheets 
--------------------------------------------------------------------------------*/

@import url(type.css);


/* Body 
--------------------------------------------------------------------------------*/

*
	{
	margin:0px;
	padding:0px;
	}

body
	{
	margin:5px 0px;
	padding:0px;	
	background:#f0f0f0;
	}

hr
	{
	display:none;
	}
	
table
	{
	float:left;
	}


/* Images
--------------------------------------------------------------------------------*/

.imageleft
    {
    float:left;
    margin:0px 1em 1em 0px;
    clear:both;
    }

.imageright
    {
    float:right;
    margin:0px 0px 1em 1em;
    clear:both;
    }

.imagefull
    {
    display:block;
    margin:0px 0em 1em 0px;
    clear:both;
    }


/* Container 
--------------------------------------------------------------------------------*/

#container
	{
	width:798px;
	margin:0px auto;
	padding:0px;
	}
	
/* star hack to correct discrepencies between IE7 and older versions */

* html #container
	{
	position:absolute;
	left:50%;
	width:798px;
	margin:0px 0px 0px -399px;
	padding:0px;
	}
	

/* Masthead 
--------------------------------------------------------------------------------*/

#header
	{
	float:left;
	width:798px;
	height:122px;
	background:url(/images/eti_headerbg01.jpg) no-repeat;	
	}
	

/* Main navigation 
--------------------------------------------------------------------------------*/

#navbar
	{
	float:left;
	width:798px;
	height:22px;
	background:url(/images/eti_navbarbg01.gif) no-repeat;
	}
	

/* Main Background
--------------------------------------------------------------------------------*/

#main
	{
	float:left;
	width:798px;
	padding:0px 0px 10px 0px;
	background:url(/images/eti_mainbg01.gif) repeat-y;
	}


/* Banner
--------------------------------------------------------------------------------*/

#banner
	{
	float:left;
	width:798px;
	margin:0px 0px -10px 0px;
	padding:0px;
	background:transparent;
	}
	
#banner_left
	{
	float:left;
	width:484px;
	height:300px;
	margin:0px 0px 0px 9px;
	padding:0px;
	background:url(/images/flashmovie_leftbox01.jpg) no-repeat;
	}
	
/* star html hack to correct discrepencies between IE7 and older versions */
	
* html #banner_left
	{
	margin:0px 0px 0px 4px;
	border-left:1px solid #505050;
	}
	
#banner_topright
	{
	float:left;
	width:296px;
	height:120px;
	background:url(/images/flashmovie_toprightbox01.jpg) no-repeat;
	}
	
#banner_bottomright
	{
	float:left;
	width:296px;
	height:180px;
	background:url(/images/flashmovie_bottomrightbox01.jpg) no-repeat;
	}
	
#landingbanner
	{
	float:right;
	width:296px;
	margin:5px 0px 5px 10px;
	}

#landingbanner_left
	{
	float:left;
	width:484px;
	height:300px;
	margin:0px 0px 0px 9px;
	background:url(/images/landing_leftbox01.jpg) no-repeat;
	}
	
/* star html hack to correct discrepencies between IE7 and older versions */
	
* html #landingbanner_left
	{
	margin:0px 0px 0px 4px;
	border-left:1px solid #505050;
	}
	
#landingbanner_topright
	{
	width:296px;
	height:120px;
	background:url(/images/landing_toprightbox01.jpg) no-repeat;
	}
	
#businesslandingbanner_topright
	{
	width:296px;
	height:120px;
	background:url(/images/businesslanding_topbox01.jpg) no-repeat;
	}
	
#hellolandingbanner_topright
	{
	width:296px;
	height:120px;
	background:url(/images/hellolanding_topbox01.jpg) no-repeat;
	}
	
#topright_top
	{
	width:281px;
	height:11px;
	background:url(/images/toprightbox_topbg.gif) no-repeat;
	}
	
#topright_main
	{
	width:281px;
	padding:0px 0px 3px 15px;
	background:url(/images/toprightbox_mainbg.gif) repeat-y;
	}
	
#topright_content
	{
	width:252px;
	margin:0px 0px 0px 18px;
	padding:22px 0px 0px;
	background:transparent;
	}
	
#topright_bottom
	{
	width:281px;
	height:14px;
	background:url(/images/toprightbox_bottombg.gif) no-repeat;
	}	
	
#landingbanner_bottomright
	{
	width:296px;
	height:180px;
	background:url(/images/landing_bottomrightbox01.jpg) no-repeat;
	}
	
#businesslandingbanner_bottomright
	{
	width:296px;
	height:180px;
	background:url(/images/businesslanding_bottombox01.jpg) no-repeat;
	}
	
#hellolandingbanner_bottomright
	{
	width:296px;
	height:180px;
	background:url(/images/hellolanding_bottombox01.jpg) no-repeat;
	}
	
#web_landingbox
	{
	width:296px;
	}
	
#web_landingbox_top
	{
	width:296px;
	height:42px;
	background:url(/images/eti_weblandingbox_topbg.gif) no-repeat;
	}
	
#web_landingbox_main
	{
	width:246px;
	padding:0px 25px;
	background:url(/images/eti_weblandingbox_mainbg.gif) repeat-y;
	}
	
#web_landingbox_bottom
	{
	width:296px;
	height:14px;
	background:url(/images/eti_weblandingbox_bottombg.gif) no-repeat;
	}
	

/* Sub Navigation 
--------------------------------------------------------------------------------*/

#subnav
	{
	float:left;
	width:199px;
	margin:10px 0px 0px 16px;
	}
	
/* star html hack to correct discrepencies between IE7 and older versions */

* html #subnav
	{
	margin:10px 0px 0px 8px;
	}
	
#subnav_top
	{
	float:left;
	width:199px;
	height:9px;
	background:url(/images/eti_subnav_topbg01.gif) no-repeat;
	}
	
/* star html hack to correct discrepencies between IE7 and older versions */

* html #subnav_top
	{
	margin:0px 0px -3px 0px;
	}
	
#subnav_main
	{
	float:left;
	width:199px;
	background:url(/images/eti_subnavbg01.gif) repeat-y;
	}
	
#subnav_main ul img
	{
	padding:1px 0px;
	}
	
#subnav_bottom
	{
	float:left;
	width:199px;
	height:15px;
	background:url(/images/eti_subnav_bottombg01.gif) no-repeat;
	}
		

/* Content 
--------------------------------------------------------------------------------*/

#content
	{
	float:left;
	width:550px;
	margin:0px 10px;
	}
	
#landingcontent
	{
	float:left;
	width:760px;
	margin:0px 0px 0px 25px;
	}
	
/* star html hack to correct discrepencies between IE7 and older versions */

* html #landingcontent
	{
	margin:0px 0px 0px 12px;
	}
	
#landingcontentlist
	{
	display:inline;
	width:270px;
	margin:0px;
	padding:0px;
	}
	
#specialoffer
	{
	float:left;
	width:751px;
	margin:0px 0px 0px -5px;
	}
	
#specialoffertop
	{
	float:left;
	width:751px;
	height:12px;
	background:url(/images/eti_specialofferbgtop.gif) no-repeat;
	}
	
#specialoffermain
	{
	float:left;
	width:751px;
	padding:0px 0px 5px 0px;
	background:url(/images/eti_specialofferbgmain.gif) repeat-y;
	}
	
#specialoffercontent
	{
	float:left;
	width:713px;
	margin:10px 15px 0px 20px;
	padding:16px 0px 0px 0px;
	background:#ffffff;
	border:1px solid #808080;
	}
	
/* star html hack to correct discrepencies between IE7 and older versions */

* html #specialoffercontent
	{
	margin:10px 15px 0px 10px;
	}
	
#specialoffercontent img
	{
	float:right;
	margin:0px 20px 0px 0px;
	padding:0px;
	}
	
#specialoffercontent .special_business
	{
	float:left;
	}
	
#specialofferbottom
	{
	float:left;
	width:751px;
	height:16px;
	background:url(/images/eti_specialofferbottombg.gif) no-repeat;
	}
	
#gateway
	{
	float:left;
	width:748px;
	margin:2em 0px 0px 0px;
	padding:1em 0px 0px 0px;
	border-top:1px solid #005b98;
	border-bottom:1px solid #005b98;
	}
	
#topimage
	{
	float:left;
	width:550px;
	height:160px;
	margin:15px 10px;
	border:none;
	}
	
#devboxes
	{
	float:left;
	width:550px;
	margin:0px 0px 1.8em 0px;
	}
	
/* star html hack to correct discrepencies between IE7 and older versions */

* html #devboxes
	{
	margin:0px 0px -15px 0px;
	}
	
#customdevbox
	{
	float:left;
	width:256px;
	margin:0px 10px;
	}
	
/* star html hack to correct discrepencies between IE7 and older versions */

* html #customdevbox
	{
	margin:0px 5px;
	}
	
#customdevbox_top
	{
	float:left;
	width:256px;
	height:34px;
	background:url(/images/eti_custdev_topbg01.gif) no-repeat;
	}
	
#customdevbox_main
	{
	float:left;
	width:256px;
	background:url(/images/eti_devboxbg01.gif) repeat-y;
	}
	
#customdevbox_main img
	{
	float:right;
	margin:2px 18px 0px 5px;
	border:none;
	}
	
#customdevbox_bottom
	{
	float:left;
	width:256px;
	height:17px;
	background:url(/images/eti_devbox_bottombg01.gif) no-repeat;
	}
	
#webdevbox
	{
	float:left;
	width:256px;
	margin:0px 15px 0px 0px;
	}
	
/* star html hack to correct discrepencies between IE7 and older versions */

* html #webdevbox
	{
	margin:0px 7px 0px 0px;
	}
	
#webdevbox_top
	{
	float:left;
	width:256px;
	height:34px;
	background:url(/images/eti_webdev_topbg01.gif) no-repeat;
	}
	
#webdevbox_main
	{
	float:left;
	width:256px;
	background:url(/images/eti_devboxbg01.gif) repeat-y;
	}
	
#webdevbox_main img
	{
	float:right;
	margin:2px 18px 0px 5px;
	border:none;
	}
	
#webdevbox_bottom
	{
	float:left;
	width:256px;
	height:17px;
	background:url(/images/eti_devbox_bottombg01.gif) no-repeat;
	}
	
#address
	{
	float:left;
	margin:0px 50px 15px 0px;
	}
	
#customdevapps
	{
	float:left;
	}
	
.webserviceslist_row
	{
	float:left;
	width:550px;
	}
	
.webserviceslist
	{
	float:left;
	width:270px;
	}

.portfoliosection
	{
	float:left;
	width:550px;
	margin:5px 0px;
	}
	
.portfoliosection img
	{
	float:left;
	margin:0px 15px 0px 0px;
	}


/* Forms 
--------------------------------------------------------------------------------*/

.smallform label
    {
    display:block;
    margin:0px 0px 0.2em 0px;
    }

.smallform .text
    {
    width:300px;
    margin:0px 0px 1em 0px;
    padding:1px;
    border:1px solid #005b98;
    }

.smallform select
    {
    margin:0px 0px 1em 0px;
    }

.smallform textarea
    {
    width:300px;
    height:100px;
    margin:0px 0px 1em 0px;
    padding:1px;
    border:1px solid #005b98;
    }

.smallform .siteformbutton
    {
    display:block;
    }


/* Contact Forms
----------------------------------------------------------------------------------*/

#formcontainer
	{
	float:left;
	width:99%;
	margin:0px 0px 0px 0px;
	padding:0px 0px 1em 0px;
	}
	
#formcontainer fieldset
	{
	float:left;
	width:99%;
	margin:0px 0px 1em 0px;
	padding:0px;
	border:1px solid #005b98;
	}
	
#formcontainer fieldset legend
	{
	margin:0px 0px 0px 7px;
	padding:2px 5px;
	font:0.6875em Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	background:transparent;
	border:1px solid #005b98;
	}
	
#formcontainer .formcontent
	{
	float:left;
	width:95%;
	margin:15px 0px 0px 15px;
	padding:0px 0px 15px 0px;
	}

/* star hack to correct discrepencies between IE7 and older versions */

* html #formcontainer .formcontent
	{
	margin:15px 0px 0px 8px;
	}

#sidepane .formcontent
	{
	margin:10px;
	padding:0px;
	}
	
#formcontainer .formcontent ul
	{
	float:left;
	width:100%;
	margin:0px;
	padding:0px 0px 1.625em 0px;
	font:0.6875em Verdana, Arial, Helvetica, sans-serif;
	line-height:1.625em;
	list-style:none;
	}
	
#formcontainer .formcontent ul li
	{
	float:left;
	width:100%;
	margin:0px;
	padding:2px 0px;
	}

#formcontainer .formcontent p
    {
    position:static;
    padding:0px;
    }
	
#formcontainer .formcontent label, #formcontainer .formcontent .label
	{
	float:left;
	width:35%;
	margin:0px;
	padding:1px 10px 0px 0px;
	text-align:right;
	}

/* star hack to correct discrepencies between IE7 and older versions */

* html #formcontainer .formcontent label, * html #formcontainer .formcontent .label
	{
	padding:1px 5px 0px 0px;
	}
	
#formcontainer .text
	{
	padding:1px;
	width:60%;
	font:1em Verdana, Arial, Helvetica, sans-serif;
	background:#e5e5e5;
	border:1px solid #005b98;
	}

#formcontainer .radioandcheckbox
	{
	float:left;
	display:block;
	width:60%;
	margin:0px;
	padding:0px;
	clear:right;
	}

#formcontainer .radioandcheckbox li
    {
    font-size:1em;
    }

#formcontainer .radioandcheckbox input
    {
    width:15px;
    margin:0px 5px 0px 0px;
    background:none;
	border:none;
    }

#formcontainer .formcontent .blank
	{
	padding:1px;
	width:60%;
	font:italic 1em Verdana, Arial, Helvetica, sans-serif;
	background:none;
	border:none;
	}
	
#formcontainer select
	{
	padding:1px;
	width:auto;
	font:1em Verdana, Arial, Helvetica, sans-serif;
	background:#e5e5e5;
	border:1px solid #005b98;
	}
	
#formcontainer option
	{
	padding:1px;
	width:auto;
	font:1em Verdana, Arial, Helvetica, sans-serif;
	background:#e5e5e5;
	}
	
#formcontainer textarea
	{
	padding:1px;
	width:60%;
	height:100px;
	font:1em Verdana, Arial, Helvetica, sans-serif;
	background:#e5e5e5;
	border:1px solid #005b98;
	}
	
#formcontainer .button
	{
	margin:0px 8px 0px 0px;
	padding:0px 3px;
	font:0.6875em Verdana, Arial, Helvetica, sans-serif;
	}
	

/* Slogan 
--------------------------------------------------------------------------------*/

#slogan
	{
	float:left;
	width:798px;
	height:70px;
	background:url(/images/eti_footerbg01.gif) no-repeat;
	}
	
#slogan img
	{
	float:right;
	margin:0px 9px;
	border:none;
	}
	

/* Footer 
--------------------------------------------------------------------------------*/

#footer
	{
	float:left;
	width:798px;
	}
	

/* Miscellaneous Classes 
--------------------------------------------------------------------------------*/

.hr
	{
	width:100%;
	height:1px;
	margin:0px;
	padding:0px;
	background:#000000;
	}
	
.custdevimage
	{
	float:left;
	margin:10px;
	border:none;
	clear:right;
	}
	
.webportfolioimage
	{
	border:none;
	}
	
.e-commerceimage
	{
	float:right;
	width:79px;
	height:100px;
	margin:0px 0px 5px 15px;
	}
	
.aboutfargoimage
	{
	float:right;
	margin:0px 0px 5px 15px;
	}
	
.contactline
	{
	margin:5px 0px 0px 0px;
	}