/* Base Styles */
body, input, textarea, select { font-family: Arial, Verdana, Helvetica; font-size: 12px;  }
body { margin: 0 0 20px 0; padding: 0px; }

body { background: #b5b5b5 url('/images/bgBody.jpg') repeat-x; color: #777777; }

a { text-decoration: none; }
a:hover { }

form { padding: 0px; margin: 0px; }

.center { text-align: center }
.left { float: left }
.right { float: right }

.clear { clear: both; }
.clearafter:after { content: '.'; display: block; height: 0px; clear: both; visibility: hidden; }
.clearafter { display: inline-block; }

/* Hides from IE-mac */
* html .clearafter { height: 1%; }
.clearafter { display: block; }

img { border: 0px; padding: 0px; margin: 0px; }

/* Container */
#container { margin: 0 auto 0 auto; padding: 0 2px 0 2px; width: 954px; height: auto; background: url('/images/bgContainer.jpg') repeat-y; }

/* Top */
#top { margin: 0px; padding: 0px 20px 0 0; width: 930px; height: 90px; background: url('/images/bgTop.jpg') no-repeat; text-align: right; }

#top h2 { clear: both; padding: 15px 0 0 0; margin: 0px; font-size: 16px; font-style: italic; }

#top ul { float: right; padding: 0px; margin: 15px 0 0 0; list-style: none; width: auto; height: 20px; text-transform: uppercase; font-size: 9px; }
#top ul li { float: left; padding: 1px 0 1px 15px; margin: 0 0 0 15px; }

#top .home { background: url('/images/iconHome.gif') no-repeat; }
#top .contact { background: url('/images/iconContact.gif') no-repeat; }
#top .support { background: url('/images/iconSupport.gif') no-repeat; }

#top a { color: #717171; }
#top a:hover { color: #B22D2E; }

/* Nav */
#nav { margin: 0px; padding: 0px; width: 950px; height: 45px; background: url('/images/bgNav.jpg') repeat-x; }

#nav ul { margin: 0 0 0 30px; padding: 0px; width: auto; height: 45px; background: url('/images/bgNav.jpg') repeat-x; border-left: 1px solid #ffffff; }
#nav ul li { padding: 15px 0 0 0; margin: 0px; list-style: none; float: left; width: auto; height: 30px; border-right: 1px solid #ffffff; }  
#nav ul li a { text-transform: uppercase; font-weight: bold; color: #ffffff; margin: 0 20px 0 20px; }

#nav ul p { padding: 0px; margin: 0px; }

#nav ul ul { display: none; position: absolute; margin: 15px 0 0 -1px; padding: 7px 0 7px 0; width: 190px; height: auto; background: #d9dce1; border: 1px solid #5a7fad; border-bottom: 2px solid #5a7fad; font-size: 11px; }
#nav ul ul li { clear: both; list-style: none; margin: 0px; padding: 6px 15px 6px 15px; width: 160px; height: auto; border: none; border-bottom: 1px solid #cad3e3; }
#nav ul ul li a { text-transform: none; font-weight: normal; color: #717171; margin: 0px; padding: 0px; }
#nav ul ul li:hover { background: #eff0f1; }

#nav .sub { padding: 6px 15px 6px 20px; width: 155px; background: #e2e4e7; }

/* Header */
#header { margin: 0px; padding: 0px; width: 950px; height: 185px; background: #f2f2f2; border-top: 1px solid #b0b0b0; border-bottom: 1px solid #b0b0b0; }
#header .ineed { float: right; margin: 20px 10px 0 0; padding: 20px 5px 5px 5px; width: 155px; height: 120px; background: url('/images/bgIneed.jpg') no-repeat; }

#header .ineed h2 { padding: 0 0 5px 15px; margin: 0px; font-size: 16px; }
#header .ineed p { padding: 10px 0 0 0; margin: 0px; text-align: center; }
#header .ineed select { width: 130px;  font-weight: bold; font-style: italic; }
#header .normal { font-weight: normal; font-style: normal; font-size: 11px; }

/* Sub Header */
#subheader { margin: 0px; padding: 0px; width: 950px; height: 120px; background: #f2f2f2; border-top: 1px solid #b0b0b0; border-bottom: 1px solid #b0b0b0; }

/* Content */
#content { margin: 0px; padding: 0px; width: 950px; height: auto; }

#content p { margin: 0px; padding: 10px 0 0 0; }

/* Sub Pages */
#content .page { float: right; padding: 20px 10px 20px 0; margin: 0px; width: 720px; height: auto; }
#content .pageside { float: left; padding: 20px 10px 20px 0; margin: 0px; width: 200px; height: auto; }

#content .page h1 { margin: 0px; padding: 0px; font-size: 18px; }
#content .page h2 { margin: 0px; padding: 15px 0 0 0; font-size: 15px; }
#content .page h3 { margin: 0px; padding: 15px 0 0 0; font-size: 12px; }

#content .page a { color: #406fa8; font-weight: bold }
#content .page a:hover { color: #B3161D; } 

#content .page ul { padding: 5px 0 5px 0; margin: 0 0 0 30px; list-style: none; }
#content .page ul li { padding: 0 0 0 20px; margin: 10px 0 0 0; background: url('/images/iconGreenArrow.gif') top left no-repeat;  }

#content .page ol { padding: 5px 0 5px 0; margin: 0 0 0 50px; }
#content .page ol li { padding: 10px 0 0 0; margin: 0px; background: none; }

#content .page dl { padding: 0px; margin: 0px; width: 450px; height: auto; }
#content .page dt { float: left; margin: 0px; padding: 10px 0 0 0; width: 150px; height: auto; }
#content .page dd { float: left; margin: 0px; padding: 10px 0 0 0; width: 300px; height: auto; }

#content .page table { margin: 10px 0 0 0; padding: 0px; }
#content .page table th { text-align: left; padding: 5px; }
#content .page table td { padding: 5px; }

#content .page .contact { padding: 0px 0 0 20px; } 
#content .page .headline { font-weight: bold; font-style: italic; } 
#content .page .red { color: #ab1a1a; }
#content .page .text { width: 250px; }
#content .page .hr { margin: 15px 0 0 0; padding: 0px; background: #cfd6e0; height: 1px; width: auto; font-size: 0px; }
#content .page .top { padding: 0px; margin: 0px;  }
#content .page .photo { float: right; margin: 15px 0 0 10px; padding: 0px; width: auto; height: auto; } 

#content .page .screenshots { background: #f2f2f2; border: 1px solid #dce2e2; padding: 12px; margin: 15px 0 0 0; font-size: 11px; }
#content .page .screenshots h3 { text-align: left; }
#content .page .screenshots img { float: left; margin: 10px 0 0 10px; padding: 0px; text-align: center;  }
#content .page .screenshots .first { margin: 10px 0 0 0; }
#content .page .screenshots .zoom { background: url('/images/icon/zoom.gif') no-repeat left bottom; padding: 10px 0 0 17px; font-style: italic; }

#content .page .portfolio { padding: 0 0 0 20px; margin: 0px; width: auto; height: auto; font-size: 11px; }

#content .page .portfolio .site { float: left; padding: 15px; margin: 20px 15px 0 15px; width: 270px; height: auto; background: #f2f2f2; border: 1px solid #dce2e2; }
#content .page .portfolio .site img { margin: 10px 0 0 0; padding: 0px; }
#content .page .portfolio .site ul { margin: 0 0 0 20px; }
#content .page .portfolio .site ul li { margin: 5px 0 0 0; }

#content .designpackages { width: 100%; height: auto; padding: 0px; margin: 0 auto 0 auto; }

#content .designpackages .package { float: left; width: 100%; height: auto; margin: 20px 0 0 0; }
#content .designpackages .package .head { width: auto; height: 27px; padding: 10px 10px 0 10px; margin: 0px; background: url('/images/bgDesignPackageH2.jpg'); }
#content .designpackages .package .head h2 { float: left; padding: 0px; margin: 0px;  }
#content .designpackages .package .head input { float: right; background: #f2f2f2; border: 1px solid #dce2e2; font-weight: bold; color: #777777; }
#content .designpackages .package .body { width: auto; height: auto; padding: 0 10px 10px 10px; margin: 0px; background: #f2f2f2; border: 1px solid #dce2e2; font-size: 11px; }
#content .designpackages .package .body ul li { margin: 5px 0 0 0; }
#content .designpackages .bluearrow li { background: url('/images/icon/bluearrow.gif') no-repeat left; }
#content .designpackages .bluearrow li a { color: #ab1a1a; }

/* Tour Navigation */
#content .tournav { margin: 15px 0 0 0; padding: 5px 5px 10px 5px; border: 1px solid #cfd6e0; background: #f2f2f2; }
#content .tournav h3 { margin: 0px; padding: 0px; }
#content .tournav input { font-size: 11px; font-weight: bold; margin: 0px 5px 0 0; padding: 1px; }
#content .tournav .button { cursor: pointer;  border: 1px solid #cfd6e0; background: #e5e9ee; color: #406fa8; }
#content .tournav .button:hover { color: #ab1a1a; }
#content .tournav .selected { border: 1px solid #cfd6e0; background: #e5e9ee; color: #ab1a1a; }

/* Inner Sub Pages */
#content .innerpage { float: left; width: 500px; height: auto; }
#content .innerpageside { float: right; margin: 0px; padding: 0px; width: 200px; font-size: 11px; }

#content .innerpageside .darkbluebox, #content .innerpageside .lightbluebox { margin: 0 0 10px 0; padding: 10px; border: 1px solid #cfd6e0; width: auto; height: auto; }
#content .innerpageside .darkbluebox { background: #e5e9ee; }
#content .innerpageside .lightbluebox { background: #f2f2f2; }

#content .innerpageside h2 { margin: 0px; padding: 3px 0 3px 0; font-size: 16px; color: #537CB0; }
#content .innerpageside h3 { margin: 0px; padding: 10px 0 0 0; font-size: 11px; }

#content .innerpageside p { padding: 10px 0 0 0; margin: 0px; }

#content .innerpageside a { font-weight: bold; color: #777777; }
#content .innerpageside a:hover { color: #888888; }

#content .innerpageside ul { padding: 0px; margin: 0 0 0 35px; list-style: disc }
#content .innerpageside ul li { padding: 0px; margin: 7px 0 0 0; background: none;  }

#content .innerpageside ol { padding: 0px; margin: 0 0 0 35px; list-style: lower-roman }
#content .innerpageside ol li { padding: 0px; margin: 7px 0 0 0; background: none;  }

#content .innerpageside .h2icon { float: left; padding: 0 8px 0 2px; margin: 0px; }
#content .innerpageside .hr { margin: 15px 0 5px 0; padding: 0px; background: #cfd6e0; height: 1px; width: auto; font-size: 0px; }
#content .innerpageside .pad { margin: 0px; padding: 0 5px 0 5px; }

#content .innerpageside .details { margin: 5px 0 0 0; padding: 5px 0 0 0; list-style: none; }

#content .innerpageside .details li { padding: 0 0 0 35px; margin: 10px 0 0 0; }

#content .innerpageside .details .pdf { background: url('/images/icon/pdf_lblue.jpg') no-repeat; }
#content .innerpageside .details .world { background: url('/images/icon/world_lblue.jpg') no-repeat; }
#content .innerpageside .details .info { background: url('/images/icon/info_lblue.jpg') no-repeat; }

/* Front Page */
#content .index { float: left; padding: 10px 0 10px 10px; margin: 0px; width: 550px; height: auto; }
#content .indexside { float: right; padding: 10px 10px 10px 0; margin: 0px; width: 370px; height: auto; }

#content .index p { padding: 8px 0 0 0; }

#content .index .headline { font-size: 14px; font-style: italic; }
#content .index .buttongo { background: url('/images/buttonGo.gif') no-repeat; width: 38px; height: 31px; margin: 35px 0 0 20px; }

#content .index .box1 { float: left; margin: 0px; padding: 10px; width: 169px; height: 164px; background: url('/images/bgIndexBox1.jpg') no-repeat; cursor: pointer; }
#content .index .box2 { float: right; margin: 0px; padding: 10px; width: 333px; height: 67px; background: url('/images/bgIndexBox2.jpg') no-repeat; cursor: pointer; }
#content .index .box3 { float: right; margin: 10px 0 0 0; padding: 10px; width: 333px; height: 67px; background: url('/images/bgIndexBox3.jpg') no-repeat; cursor: pointer; }
#content .index .box4 { float: left; margin: 10px 0 0 0; padding: 10px; width: 333px; height: 67px; background: url('/images/bgIndexBox4.jpg') no-repeat; cursor: pointer; }
#content .index .box5 { float: left; margin: 10px 0 0 0; padding: 10px; width: 333px; height: 67px; background: url('/images/bgIndexBox5.jpg') no-repeat; cursor: pointer; }
#content .index .box6 { float: right; margin: 10px 0 0 0; padding: 10px; width: 169px; height: 164px; background: url('/images/bgIndexBox6.jpg') no-repeat; cursor: pointer; }
#content .index .box7 { float: left; margin: 10px 0 0 0; padding: 10px 0px 10px 20px; width: 532px; height: 139px; background: url('/images/bgIndexBox7.jpg') no-repeat; font-size: 11px; }

#content .index .box7 ul { padding: 10px 0 0 20px; margin: 0px; list-style: square; font-size: 11px; } 
#content .index .box7 ul li { background: none; } 

#content .index .box7 .sub1 { float: left; width: 170px; padding: 0 20px 0 0; height: auto; }
#content .index .box7 .sub2 { float: left; width: 150px; padding: 0 20px 0 0; height: auto; }
#content .index .box7 .sub3 { float: left; width: 160px; padding: 0px; height: auto; }

#content .index h2, #content .index h3 { padding: 0px; margin: 0px; color: #537CB0; }
#content .index h2 { font-size: 16px; }
#content .index h3 { font-size: 14px; }

#content .indexside .darkbluebox, #content .indexside .lightbluebox { margin: 0 0 10px 0; padding: 10px; width: auto; height: auto; border: 1px solid #cfd6e0; }

#content .indexside .darkbluebox { background: #e5e9ee; height: 161px; }
#content .indexside .lightbluebox { background: #f2f2f2; height: 332px; margin: 0px; }

#content .indexside .lightbluebox ul { font-size: 11px; margin: 0px; padding: 0 0 0 20px; list-style: square; }
#content .indexside .lightbluebox ul li {margin: 0px; padding: 10px 0 0 0;  }

#content .indexside h1, #content .indexside h2, #content .indexside h3 { color: #777777; margin: 0px; padding: 0px; }
#content .indexside h1 { font-size: 16px; }
#content .indexside h2 { font-size: 15px; }
#content .indexside h3 { padding: 10px 0 0 0; font-size: 12px; }

#content .indexside a { font-weight: bold; color: #777777; }
#content .indexside a:hover { color: #555555;  }

/* Learmore style */
#content .learnmore a { background: url('/images/icon/learnmore.gif') no-repeat left; padding: 0 0 0 12px; color: #ab1a1a; font-size: 11px; font-weight: bold; }
#content .learnmore a:hover { color: #ab1a1a; }

/* Menu */
#menu { margin: 0px; padding: 0px; width: auto; height: auto; }

#menu h2 { margin: 0px; padding: 8px 0px 5px 20px; width: auto; height: 19px; background: url('/images/bgMenu_h2.jpg') repeat-x; font-size: 12px; text-transform: uppercase; color: #ffffff; }
#menu h3 { margin: 0px; padding: 5px 0px 5px 20px; width: auto; height: 14px; background: url('/images/bgMenu_h3.jpg') repeat-x; font-size: 12px; text-transform: uppercase; color: #416fa8; }

#menu ul { margin: 0px; padding: 0px; width: auto; height: auto; list-style: none; font-size: 11px; }

#menu ul li { cursor: pointer; margin: 0px; padding: 5px 0px 5px 20px; width: auto; height: auto; background: #f2f2f2; border-bottom: 1px solid #dbdee3; }
#menu ul li:hover { background: #e6e8ea; }

#menu ul li a { text-transform: none; font-weight: normal; color: #717171; margin: 0px; padding: 0px }
#menu ul li a:hover { text-decoration: none; color: #717171; }

#menu .sub { padding: 5px 0px 5px 30px; }

/* Footer */
#footer { margin: 0px; padding: 0px; width: 950px; height: 40px; background: url('/images/bgFooter.jpg') repeat-x; color: #ffffff; font-size: 10px; text-align: center; }
#footer p { margin: 0px; padding: 10px 0 0 0; }

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