/** BASIC */

body {
	margin: 0px;
	padding: 0px;
	text-align: justify;
	font-family:Arial, Helvetica, sans-serif;
	background-color: #000123;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
p {
	color: #333333;
	font-size: 12px;
}

a {
	color: #0066CC;
	font-size: 12px;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	text-decoration: underline;
}

.list1 {
	margin: 0;
	padding: 0;
	list-style: none;
}

.list1 a {
	padding-left: 12px;
}

.list2 {
	margin: 0;
	list-style: none;
}

.list2 a {
	padding-left: 12px;
}

img {
	margin-right: 10px;
	margin-left: 0px;
}
img.icon {
	margin-right: 5px;
	border: 3px solid #FFFFFF;
}
img.icona {
	border: 3px solid #FFFFFF;
	margin-right: 0px;
}
img.pic {
	margin: 0px;
	padding: 0px;
	border-top-width: 0px;
	border-right-width: 5px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
}
img.pic2 {
	margin: 0px;
	padding: 0px;
}
img.pic3 {
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
}
img.back {
	padding: 0px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 50px;
}
img.plan {
	border: 5px solid #FFFFFF;
	margin-left: 10px;
}
img.right {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
img.iconb {
	border: 3px solid #FFFFFF;
	margin-bottom: 3px;
	margin-top: 4px;
}

/** HEADER */

#header {
	width: 890px;
	height: 80px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #000123;
	padding-right: 1em;
	padding-left: 1em;
	background-image: url(../images/Graphics/banner-l.gif);
	padding-top: 5px;
	padding-bottom: 5px;
	background-repeat: no-repeat;
}

#header h1 {
	margin: 0px;
	text-transform: capitalize;
	font-weight: bold;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 90px;
	font-size: 20px;
	color: #FFFFFF;
}

#header h2 {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 21px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 90px;
	color: #6dd0f7;
}
#header h3 {
	margin: 0 0 0 -80px;
	padding: 0px 0px 0px 95px;
	text-transform: none;
	font-weight: bold;
	font-size: 13px;
	position: absolute;
	right: 350px;
	top: 56px;
	font-family: Arial, Helvetica, sans-serif;
	color: #014380;
}
#header h4 {
	margin: 0px;
	text-transform: none;
	font-weight: bold;
	color: #0099FF;
}
#picture {
	width: 900px;
	height: 232px;
	color: #254360;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	border-bottom-width: 1px;
}
#picture2 {
	width: 900px;
	height: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}



/** MENU */

#menu {
	width: 921px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	padding-top: 6px;
	padding-bottom: 8px;
	height: auto;
	background-image: url(../images/Graphics/menu3.gif);
}

#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	text-decoration: none;
	text-transform: none;
	font-weight: bold;
	font-size: 12px;
	color: #ababad;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 25px;
}

#menu a:hover {
	color: #9BC877;
}

#menu .active {
	color: #FF9900;
}
.menu2{
	list-style-type: none;
	padding: 0;
	width: 180px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
	background-color: #000234;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.menu2 li a{
	color: #ababad;
	display: block;
	width: auto;
	padding: 3px 0;
	padding-left: 10px;
	text-decoration: none;
	background-color: #000234;
	background-image: none;
	font-family: arial;
	font-size: 12px;
	font-weight: bold;
	border-bottom-style: dotted;
	border-bottom-color: #ababad;
	border-bottom-width: thin;
}


* html .menu2 li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 170px;
color: #003366;
}
.menu2 .active{
	color: #fff;
	background-color: #6dd0f7;
}

.menu2 li a:hover{
	background-color: #00529e;
	text-decoration: none;
	color: #fff;
}


/** CONTENT */

#content {
	width: 900px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}

#columnA {
	float: right;
	width: 496px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: dotted;
	border-left-style: dotted;
	border-right-color: #CCCCCC;
	border-left-color: #CCCCCC;
	padding-right: 10px;
	padding-left: 10px;
	background-color: #FFFFFF;
}

#columnA h2 {
	height: 17px;
	border-bottom: 1px dashed #EEEEEE;
	font-size: 12pt;
	font-weight: bold;
	color: #003399;
}
#columnA h3 {
	font-size: 11pt;
	font-weight: bold;
	color: #0066CC;
	height: 12px;
}
#columnA h4 {
	font-size: 10pt;
	font-weight: bold;
	color: #FFFFFF;
	height: 20px;
	padding-top: 3px;
}

#columnB {
	float: left;
	width: 180px;
}

#columnB h3 {
	border-spacing: 2px;
	font-size: 10pt;
	font-weight: bold;
	color: #000234;
	padding: 0px;
}
#columnC {
	float: right;
	width: 180px;
	margin-left: 10px;
}
#columnC h3 {
	border-spacing: 2px;
	font-size: 10pt;
	font-weight: bold;
	color: #0066cc;
	padding: 0px;
}

/** FOOTER */

#footer {
	clear: both;
	height: 35px;
	text-align: center;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-image: url(../images/Graphics/menu3.gif);
	background-repeat: repeat-x;
	background-position: left top;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

#footer p {
	margin: 0px;
	padding: 10px 0px 0px 0px;
	font-size: 11px;
	color: #FFFFFF;
}

#footer a {
	color: #CCCCCC;
}
blockquote {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background-color: #990000;
	margin: 10px;
	background-image: url(../images/Graphics/top_quote1.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
blockquote p {
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	text-indent: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}
#quote_attrib  {
	background-image: url(../images/Graphics/btm_quote1.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	font-size: 70%;
	text-align: right;
	margin-top: 0px;
	padding-bottom: 10px;
	padding-right: 35px;
}

#search {
	height: 94px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 0px;
	background-color: #00529e;
	border: 1px solid #003366;
	width: auto;
}
#search p  {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: normal;
	text-align: center;
	padding-bottom: 0px;
	font-size: 12px;
}
#search2 {
	height: 80px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 0px;
	background-color: #003C71;
}
#search2 p  {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-top: 5px;
	padding-left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: normal;
	text-align: center;
	font-size: 12px;
}
#ask {
	height: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	background-image: url(../images/Graphics/icons/ask.gif);
	width: auto;
}
#ask h2  {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
#ask p  {
}
#calc {
	height: auto;
	border: 1px dashed #666666;
	width: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	text-align: center;
	font-style: normal;
	background-color: #EFEFEF;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 8px;
	padding-bottom: 0px;
	padding-left: 8px;
}
#quote {
	height: auto;
	border: 1px dotted #666666;
	width: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	text-align: left;
	font-style: italic;
	background-color: #EFEFEF;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-top: 15px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
}
#box_2 {
	height: auto;
	border: 1px dotted #666666;
	width: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	text-align: left;
	font-style: italic;
	background-color: #EFEFEF;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-top: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
}
#box_lug {
	height: auto;
	border: 1px solid #666666;
	width: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	text-align: left;
	font-style: normal;
	background-color: #023435;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-top: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 15px;
	background-image: url(../images/lugarde_sm.jpg);
	background-repeat: no-repeat;
	background-position: right center;
}
#box_lug a {
	color: #66CC99;
}
#call {
	height: auto;
	background-color: #00529e;
	width: auto;
	margin-bottom: 10px;
	background-image: url(../images/Graphics/menu3.gif);
}
#call p  {
	margin-top: 0px;
	margin-right: 0px;
	padding-top: 5px;
	padding-left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	color: #ababad;
	font-weight: bold;
	text-align: center;
	font-size: 18px;
	padding-bottom: 5px;
	margin-bottom: 0px;
}
#box {
	height: auto;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-color: #CCCCCC;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	border: 1px solid #ababad;
}
#box p  {
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	font-weight: normal;
	text-align: justify;
	font-size: 12px;
	padding: 0px;
}
#news {
	height: auto;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	background-color: #E1F0FF;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border: 1px solid #82C4FF;
	padding-top: 5px;
}
#news p  {
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	font-weight: normal;
	text-align: justify;
	font-size: 12px;
	padding: 0px;
}

table.price  {
	font-family: Arial, Helvetica, sans-serif;
}
table.price p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
table.stats 
{
	text-align: center;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 11px;
	color: #fff;
	width: auto;
	background-color: #e1f0ff;
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin-bottom: 0px;
}

table.stats td 
{
	background-color: e1f0ff;
	color: #003C71;
	text-align: left;
	border: 1px #fff solid;
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-left: 13px;
}

table.stats td.hed
{
	background-color: #00529e;
	color: #fff;
	padding: 4px;
	text-align: left;
	border-bottom: 0px #fff solid;
	font-size: 11px;
	font-weight: normal;
	background-image: none;
} 
/* End table */
#wrapper {
	background-color: #FFFFFF;
	height: auto;
	width: 920px;
	margin-right: auto;
	margin-left: auto;
}
/* keops */
.thumbnail
{
	float: left;
	width: 128px;
	margin-top: 10px;
	margin-right: 6px;
	margin-left: 5px;
	background-color: #000123;
	padding-top: 8px;
	padding-right: 13px;
	padding-left: 13px;
	padding-bottom: 6px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	text-align: left;
	height: 230px;
}
.thumbnail p {
	text-align: left;
	text-indent: 0;
	color: #FFFFFF;
}
.thumbnail a {
	font-size: 11px;
	text-decoration: none;
	font-weight: normal;
	color: #ababad;
}

.tumbnail a:hover {
	text-decoration: underline;
}
/*End caption */
.thumbnail2  {
	float: left;
	width: auto;
	margin-top: 10px;
	margin-left: 10px;
	background-color: #C4E2FF;
	padding: 5px;
}

.clearboth { clear: both; 
}

/* lugarde */
.thumbnail3
{
	float: left;
	width: 126px;
	border: 1px solid #666666;
	margin-top: 10px;
	margin-right: 5px;
	margin-left: 5px;
	background-color: #023435;
	padding-top: 8px;
	padding-right: 13px;
	padding-left: 13px;
	padding-bottom: 6px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: left;
	height: 193px;
}
.thumbnail3 p {
	text-align: left;
	text-indent: 0;
	color: #FFFFFF;
}
.thumbnail3 a {
	font-size: 11px;
	text-decoration: none;
	font-weight: normal;
	color: #66cc99;
}

.tumbnail3 a:hover {
	text-decoration: underline;
}
/*End caption */
/* finnlife */
.thumbnail4
{
	float: left;
	width: 124px;
	border: 2px solid #E5DDDA;
	margin-top: 10px;
	margin-right: 5px;
	margin-left: 5px;
	background-color: #F6F6F8;
	padding-top: 6px;
	padding-right: 13px;
	padding-left: 12px;
	padding-bottom: 6px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #675850;
	text-align: left;
	height: 193px;
}
.thumbnail4 p {
	text-align: left;
	font-size: smaller;
	text-indent: 0;
	color: #FFFFFF;
}
.thumbnail4 a {
	font-size: 11px;
	text-decoration: none;
	font-weight: normal;
	color: #221E72;
}

.tumbnail4 a:hover {
	text-decoration: underline;
}
/*End caption */
/* Here's the list that houses the image as a background */
ul#cmp {
	list-style-type : none;
	position : relative;
	display : block;
	width : 350px;
	height : 250px;  /* the auto part is for optionally centering the list */
	padding : 0;
	background-color: transparent;
	background-image: url(../images/design_image3.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 0px;
}

/* This makes the list items (links and spans) easier to manage (float control) */
ul#cmp li { 
  display : inline;
}

/* Here are link specs and relationship setup */
ul#cmp li a {
  position : relative;
  display : block;
  text-decoration : none;
}

/* 
  This gets rid of the main content-containing outer span and all within, 
  but it remains available to assistive technologies 
*/
ul#cmp li a span.offset { 
  margin-top : -9000px; 
  margin-left : -9000px;
  position : absolute;
}

/* This is the general hover and focus state link-span properties */
ul#cmp li a:hover span.offset, ul#cmp li a:focus span.offset, ul#cmp li a:active span.offset {
	color : #666666;
	background-image : none;
	background-color : #ffffff;
	border : 1px solid #72c4ec;
	display : block;
	width : 150px;
	height : auto;
	text-decoration : none;
	cursor : pointer;
}

/* 
  This sets the inner span. Padding on the main span 
  was tried but produced odd results in IE (go figure) 
*/
ul#cmp li a:hover span.offset span, ul#cmp li a:focus span.offset span, ul#cmp li a:active span.offset span {
  display : block;
  width : 140px;
  margin : 5px;
}


/* 
  No embedded image styles are needed except maybe border : 0 (not needed here). 
  Images are optional though, as is text. Place images in main outer span. 
  Text goes within the inner span

  What follows are CSS blocks, one for each list item link. This is a solid solution,
  but it uses a lot of CSS info. I will comment the first block only.
*/


/* 
  Hot-Spot Number One (1)
*/
/* This sets the size of the list item link area and its location relative to the UL */
ul#cmp li a#cmp01 { 
  width : 80px;
  height : 60px;
  margin-top : 0;
  margin-left : 130px;
}

/* 
  On hover/focus I grab the second background image, the one with the hover/focus state changes.
  I also set its position underneath the sized window I created with the hover/focus link properties.
*/
ul#cmp li a#cmp01:hover, ul#cmp li a#cmp01:focus, ul#cmp li a#cmp01:active {
	background-color: transparent;
	background-image: url(../images/design_image3_on.jpg);
	background-repeat: no-repeat;
	background-position: -130px 0px;
}

/* Now I have to set the position of the outer span in relation to the list item link */
ul#cmp li a#cmp01:hover span.offset, ul#cmp li a#cmp01:focus span.offset, ul#cmp li a#cmp01:active span.offset {
  margin-top : -1px;
  margin-left : 215px;
}


/* Hot-Spot Number Two (2) */
ul#cmp li a#cmp02 {
  width : 110px;
  height : 75px;
  margin-top : -50px;
  margin-left : 235px;
}
ul#cmp li a#cmp02:hover, ul#cmp li a#cmp02:focus, ul#cmp li a#cmp02:active {
	background-color: transparent;
	background-image: url(../images/design_image3_on.jpg);
	background-repeat: no-repeat;
	background-position: -235px -10px;
}
ul#cmp li a#cmp02:hover span.offset, ul#cmp li a#cmp02:focus span.offset, ul#cmp li a#cmp02:active span.offset {
  margin-top : -11px;
  margin-left : 110px;
}

/* Hot-Spot Number Three (3) */
ul#cmp li a#cmp03 {
  width : 75px;
  height : 95px;
  margin-top : 3px;
  margin-left : 115px;
}
ul#cmp li a#cmp03:hover, ul#cmp li a#cmp03:focus, ul#cmp li a#cmp03:active {
	background-color: transparent;
	background-image: url(../images/design_image3_on.jpg);
	background-repeat: no-repeat;
	background-position: -115px -88px;
}
ul#cmp li a#cmp03:hover span.offset, ul#cmp li a#cmp03:focus span.offset, ul#cmp li a#cmp03:active span.offset {
  margin-top : -89px;
  margin-left : 230px;
}

/* Hot-Spot Number Four (4) */
ul#cmp li a#cmp04 {
  width : 110px;
  height : 120px;
  margin-top : -60px;
  margin-left : 5px;
}
ul#cmp li a#cmp04:hover, ul#cmp li a#cmp04:focus, ul#cmp li a#cmp04:active {
	background-color: transparent;
	background-image: url(../images/design_image3_on.jpg);
	background-repeat: no-repeat;
	background-position: -5px -123px;
}
ul#cmp li a#cmp04:hover span.offset, ul#cmp li a#cmp04:focus span.offset, ul#cmp li a#cmp04:active span.offset {
  margin-top : -124px;
  margin-left : 340px;
}

/* Hot-Spot Number Five (5) */
ul#cmp li a#cmp05 {
  width : 95px;
  height : 97px;
  margin-top : -90px;
  margin-left : 240px;
}
ul#cmp li a#cmp05:hover, ul#cmp li a#cmp05:focus, ul#cmp li a#cmp05:active {
	background-color: transparent;
	background-image: url(../images/design_image3_on.jpg);
	background-repeat: no-repeat;
	background-position: -240px -153px;
}
ul#cmp li a#cmp05:hover span.offset, ul#cmp li a#cmp05:focus span.offset, ul#cmp li a#cmp05:active span.offset {
  margin-top : -154px;
  margin-left : 105px;
}

/* End Styles */