body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
  width: 760px;
  margin: 0;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}

/* =========================================================================
   =                             Header                                    =
   =========================================================================*/

#header {
  height: 82px;
  border-bottom: 1px solid #aaa;
  background: url(../images/bg_header.jpg) top right repeat-y;
  position: relative; /* used only to be able to position objects absolutely inside the header */
}

#logo {
  border: 0;
}

#language_select {
  position: absolute;
  right: 10px;
  bottom: 7px;
}

#language_select strong {
  font-size: 110%;
  font-weight: bold;
}

/* =========================================================================
   =                             Left Menu                                 =
   =========================================================================*/

#leftmenu {
  position:absolute;
  left:0;
  width: 150px;
  font-family: Verdana, sans-serif;
  font-size: 85%;
}

#leftmenu li {
	font-weight: bold;
}

#leftmenu ul {
  list-style-image: url(../images/red_bullet.gif);
  list-style-position: inside;
  padding: 0;
  margin: 26px 0 0 0;
  border-top: 1px dotted #aaa;
}

#leftmenu ul li {
  padding: 3px 0 4px 10px;
  margin: 0; /* remove 1 em separation */
  border-bottom: 1px dotted #aaa;
}

#leftmenu a {
	color: #93BFBF;
	font-weight: bold;
	text-decoration: none;
}

#leftmenu a:visited {
	color: #778BA0;
}

#leftmenu a:hover {
	color: #999;
	text-decoration: underline;
}

#leftmenu ul li.selected {
  background-color: #f0f0f0;
/*  color: #000;*/
}

/* Sub-Menus */

#leftmenu ul li ul {
  border: none;
  margin: 4px 0 -4px -10px; /* This rule and the next one are used to override the grey background */
  background-color: #fff;   /* so we need the negative left margin, to extend the white to the left */
}

#leftmenu ul li ul li {
  font-family: Arial, sans-serif;
  border: none;
  margin-left: 12px;
  border-left: 1px dotted #aaa;
  padding-left: 15px;
}

/* Separate the texts slightly from the bullets */
#leftmenu ul li ul li a,
#leftmenu ul li ul li span {
  margin-left: 4px;
}

/* =========================================================================
   =                             Main Content                              =
   =========================================================================*/
   
#maincontent {
  margin-left: 150px; /* Leave space for absolutely positioned menu */
  border-left: 1px solid #aaa;
  padding: 1px 12px; /* 1px vertical padding is necessary. Otherwise, border-left has a gap at the top */
}


/* Text
------------------------------------------------- */
.small_text {
  font-size: 80%;
}

.larger_text {
 	font-size: 115%;
}

/* Links
------------------------------------------------- */

a { color: rgb(30,86,150); }
a:visited { color: rgb(17,49,130); }
a:hover { color: #888; }


/* "Read More" Links */
.read_more {
  font-size: 90%;
  float: right;
}

/* Headers (h1 and h2) with the grey gear background
------------------------------------------------- */

h1, h2 {
  font-weight: bold;
  color: #435D99;
  padding: 0 0 0 65px; /* Separate texts and links from the left */
}

h1 {
  background: url(../images/gear_bg_h1.gif) no-repeat;
  font-size: 16px;
  
  height: 22px; /* Height + padding top add up to 37: the background image height */
  padding-top: 15px;
  position: relative; /* used only to be able to position objects absolutely inside the header */
}

h2 {
  background: url(../images/gear_bg_h2.gif) no-repeat;
  font-size: 11px;
  
  height: 18px; /* Height + padding top add up to 37: the background image height */
  padding-top: 19px;
  margin-bottom: 20px;
}

h1 a,
h2 a {
  display: block; /* Make the link take the whole size of the background */
  color: #435D99;
  text-decoration: none;

  margin-left: -65px; /* Compensate the padding set by h1/h2, to take all space to the left */
  padding-left: 65px; /*   and add padding to reposition text correctly */
}

h1 a {
  margin-top: -15px; /* Compensate the padding set by h1/h2, to take all space to the left */
  padding-top: 15px; /*   and add padding to reposition text correctly */
  padding-bottom: 1px; /* and grow the link box downwards */
}
h2 a {
  margin-top: -19px; /* Compensate the padding set by h1/h2, to take all space to the left */
  padding-top: 19px; /*   and add padding to reposition text correctly */
  padding-bottom: 3px; /* and grow the link box downwards */
}


/* Links to the right inside h1 and h2 headers
------------------------------------------------- */
.link_in_h1 {
  position:absolute;
  right: 10px;
  bottom: 4px;
  font-size: 12px;
  font-weight: normal;
}
.link_in_h1 a {
  color: #000;
  text-decoration: underline;
  padding: 0; /* Eliminate the left and top padding set for h1/h2 links */
  margin: 0; /* Remove the margin and padding set by "h1 a" for links to take the whole space of the parent */
  padding: 0;
}
.link_in_h1 a:hover {
	color: #888;
}


/* Dotted Separators
------------------------------------------------- */
hr.dotted {
  border: none;
  border-top: 1px dotted #666;
  margin: 20px 0 14px 0;
}

hr.full_line {
  border: none;
  border-top: 1px solid #aaa;
  margin: 15px -12px 10px -12px;
}


/* Titles and markers
------------------------------------------------- */
.title_with_marker { /* title_with_marker are light blue titles with the red arrow to the left */
  font-family: Verdana, sans-serif;
  font-weight: bold;
  color: #93BFBF;
  text-decoration: none;
  padding-right: 6px ;
  padding-top: 10px;
}
.title_with_marker:visited {
  color: #778BA0;
}
a.title_with_marker:hover { /* only if they are links, make them change color and get underlined on hover */
  color: #aaa;
  text-decoration: underline;
}

.title_with_marker:before,
.link_with_marker:before {
  content: url(../images/red_arrow_bullet.jpg) " "; /* Display the red arrow bullet, with a space to separate it from the text */
}


/* Lists
------------------------------------------------- */
ul {
  list-style-image: url(../images/red_bullet.gif);
}

ul.arrow {
  list-style-image: url(../images/red_arrow_bullet.jpg);
}


li {
  margin: 1.5em 0; /* Slightly separate LI items vertically */
}

ul.compact_list li {
  margin: 0.3em 0; /* .compact_list is used for lists that don't need spacing between LI items */
}

/* Floating things
------------------------------------------------- */
.clearer {
	clear:both;
	height: 0;
	font-size: 0;
	margin: 0;
	padding: 0;
}

/* =========================================================================
   =                           Contact Form                                =
   ========================================================================= */

#contact_form {
	font-family: Verdana, sans-serif;
	color: #9cc;
  font-weight: bold;
}

#contact_form td {
  vertical-align: top;
  padding: 3px 15px 0 3px;
}

#contact_form input,
#contact_form textarea {
  margin-top: -4px;
  border: 1px solid #9cc;
}

#contact_form input.submit {
  background-color: #fff;
	font-family: Verdana, sans-serif;
  font-size: 90%;
  font-weight: bold;
  color: #666;
  width: 65px;
  height: 22px;
  margin-top: 0;
}

/* =========================================================================
   =                                Home                                   =
   ========================================================================= */

#latest_releases {
  margin: 0 -12px; /* Compensates the padding set in #maincontent, to extend top border to the body limits */
  padding: 0 12px 20px 30px; /* Compensates for the negative margin compensation */ /* The 30px to the left move the content a bit to the right */
  border-bottom: 1px solid #aaa;
}

#latest_releases h1 {
  margin-left: -18px; /* compensates for the extra padding in the section */
}

#latest_releases img {
  border: 0;
}


#products, #services {
  width: 264px;
  float:left;
  margin-left: -12px; /* Compensates the padding set in #maincontent */

  padding: 0 24px 5px 24px;
  border-right: 1px dotted #aaa;
}

#company {
  width: 265px;
  float: right; /* Must be floated for h2 to be correctly contained. */
  margin-left: 6px;

  padding-bottom: 10px ;
  border-bottom: 1px dotted #aaa;
}

#services {
  padding-bottom: 15px; /* separate from footer */
}

#company h2 {
  position: relative; /* Align the heading with the picture */
  right: 3px;
  margin-bottom: 0; /* Make the picture stick together to the heading */
}

#company img {
  border: 1px solid #ccc;
}

/* =========================================================================
   =                             Company                                   =
   ========================================================================= */

#company_container { /* Company container surrounds all the content in #maincontent. It's used to set a bigger padding */
  padding: 0 15px;
}

#company_container h1 { /* Used to make the picture stick to the h1 tag */
  margin-bottom: 0;
}

#company_container hr {
  margin-top: 25px;
}

#company_container ul li { 
  font-weight: bold;
}

#company_container .title_with_marker { /* Gives more vertical space */
  display: block;
  margin-top: 10px;
}

#company_info {
  border: 1px solid #ccc;
  padding: 0 10px;
}

#company_pic {
  float: left;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 0 15px 5px -10px;
}

#company_info p {
 	margin-top: 14px;
  margin-bottom: 0;
}


#mission_pic { /* Compensate #maincontent paddings and move downward */
  margin: 15px -12px -3px -12px;
}

/* =========================================================================
   =                             Customers                                 =
   =========================================================================*/

#customer_troy_1 {
  margin: 25px -2px 15px 50px;
  border: 1px solid #ccc;
}

#customer_troy_2 {
  margin: 25px 0 15px -2px;
  border: 1px solid #ccc;
}

.testimonial_signature_name,
.testimonial_signature_company {
  font-weight: bold;
}

.testimonial_signature_name {
	color: #CC3300;
}

/* =========================================================================
   =                             Products                                  =
   =========================================================================*/
   
.product_info {
  position: relative; /* used only to be able to position objects absolutely inside the div */
  padding: 10px 0; /* make the div taller */
}

.product_info .product_image { /* the class "product_image" is applied to the link containing the image, not the image itself */
  position: absolute; /* center the picture vertically */
  top: 50%;
  margin-top: -104px;

  margin-left: 0; /* eliminate the 212px margin-left for links (see below) */
  left: 20px; /* left position */
}

.product_info .product_image img {
  border: none;
}

.product_info a,
.product_info ul {
  margin-left: 212px; /* leave space to avoid overlapping with the image */
}

.product_info a.title_with_marker {
  margin-left: 227px; /* move the titles a bit to the right */
}

.product_info ul {
  padding-left: 0; /* move LI elements to the left */
  list-style-position: inside; /* put the marker inside, so only first line is indented */
}

.product_info ul li{
  margin: 1.5em 0 1.5em 0; /* Separate features vertically */
}

.product_info .read_more {
  position:relative; /* Move the read more link a bit up */
  bottom: 5px;
  
}

/* =========================================================================
   =                       ICode+Paypal                                     =
   =========================================================================*/

.icode_paypal_product_description {
	font-size: 115%;
	padding: 5px 10px 10px 10px;
	line-height: 1.3em;
}

.icode_paypal_product_description .title_with_marker { 
 	padding-top: 6px;
}

.icode_paypal_product_description ul.CloserListItems li {
 	padding: 0;
 	margin: 0;
}

/* =========================================================================
   =                       ICode+Paypal Virtual Tour                       =
   =========================================================================*/
   
/* The virtual tour is shown on a popup window that is 550 px wide. */

#virtual_tour_body {
  width: 550px;
}

#virtual_tour_body #header {
  width: 550px;
  background: url(../images/bg_header.jpg) top left repeat-y; /* Align the background to the left */
}

/* =========================================================================
   =                                Links                                  =
   =========================================================================*/

/* Make the links in the links section black */
#links_section a {
  color: #000;
  text-decoration: none;
}

#links_section a:hover {
  color: #888;
  text-decoration: underline;
}

#links_section img {
  border: none;
}


/* =========================================================================
   =                             SendMail.asp                              =
   =========================================================================*/

#bottom_mover {
  height: 200px; /* move the bottom div down, in pages that are too short */
}

/* =========================================================================
   =                                Footer                                 =
   =========================================================================*/
   
#footer {
  clear: both; /* used to make sure that footer is at the bottom, and not to the right of "products/services" */
  border-top: 1px solid #ccc;
  margin: 0 -12px; /* Compensates the padding set int #maincontent, to extend top border to the body limits */
  padding: 15px 0 0 0;
  text-align: center;
  position: relative; /* used only to be able to position objects absolutely inside the footer */
}

#footer a {
	color: rgb(30,86,150);
	text-decoration: none;
	font-weight: bold;
}

#footer a.email_link { /* used for links to e-mail addresses */
  color: #000;
  font-weight: normal;
  text-decoration: underline;
}

#footer a:visited {
	color: rgb(17,49,85);
}

#footer a:hover {
	color: #888;
	text-decoration: underline;
}

#footer #copyright {
  margin-top: 20px;
  padding-bottom: 8px;
}

#vanity_w3c {
  position: absolute;
  left: -120px;
  top: 25px;
}
#vanity_w3c img {
  border: 0;
}