/***********************************************
 * 1:st page CSS
 ***********************************************/

/***********************************************
 * Main content
 ***********************************************/

div#container {
   display: block;
   width: 986px;
   height: auto;
   margin: 0px auto;
   padding-bottom: 20px;
}

div.homeintro {
   display: block;
   width: 957px;
   height: 359px;
   margin: 0px;
   padding: 12px 0px 0px 35px;
   background: url( /images/startbg.png ) no-repeat 0px 0px;
}

div.homeintroright {
   float: left;
   display: block;
   width: 445px;
   height: 327px;
   margin: -3px 0px 0px 0px;
   padding: 15px 15px 15px 16px;
   background: url( /images/startrightbg.png ) no-repeat 0px 0px;
}

div.homeintroleft {
   float: left;
   display: block;
   width: 460px;
   margin: 0px;
   padding: 0px;
}

div.homeintrolefttext {
   display: block;
   width: 460px;
   height: 239px;
   margin: 0px;
   padding: 0px;
}

div.homeintroleft blockquote {
   display: table;
   height: 239px;
   *display: block;
   *position: relative;
}

div.homeintroleft blockquote span {
   display: table-cell;
   vertical-align: middle;
   *display: block;
   *position: absolute;
   *left: 0px;
   *width: 100 %;
   *top: expression ( this.parentElement.clientHeight / 2 - this.clientHeight / 2 );
}

div.homeintroleft blockquote span span {
   display: inline;
   vertical-align: baseline;
   position: relative;
   left: auto;
   width: auto;
   top: auto;
}

div.homeintroleft h1 {
   position: relative;
   color: #809631;
   font: bold 26px Arial, Verdana, sans-serif;
}

div.homeintroleft h1 span.h1shadow {
   position: absolute;
   top: -1px;
   left: -1px;
   color: #fff;
   font: bold 26px Arial, Verdana, sans-serif;
}

div.homeintroleft p {
   position: relative;
   line-height: 26px !important;
   color: #809631;
   font: 18px Arial, Verdana, sans-serif;
}

div.homeintroleft p span.pshadow {
   position: absolute;
   top: -1px;
   left: -1px;
   line-height: 26px !important;
   color: #fff;
   font: 18px Arial, Verdana, sans-serif;
}

div.homeintroleft u {
   text-decoration: underline;
}

/***********************************************
 * Home page
 ***********************************************/

div#maincontent {
   clear: both;
   display: block;
   width: 957px;
   margin: 0px;
   padding: 26px 0px 0px 35px;
   position: relative;
}

div.homeleft {
   float: left;
   display: block;
   width: 215px;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
}

div.homemiddle {
   float: left;
   display: block;
   width: 452px;
   margin: 0px 0px 0px 12px;
   padding: 0px 0px 0px 0px;
}

div.homeright {
   float: left;
   display: block;
   width: 223px;
   margin: 0px 0px 0px 20px;
   padding: 0px 0px 0px 0px;
   background: url( /images/mainrightcontbg.png ) no-repeat 0;
}

div.puff {
   clear: both;
   display: block;
   width: 215px;
   height: 111px;
   margin: 0px 0px 16px 0px;
   padding: 0px 0px 0px 0px;
}

div.flip90 {
   /*display: block;*/
   float: left;
   width: 129px;
   height: 135px;
   margin: -2px 321px -260px;
   position: relative;
   z-index: 75;
   background: url( '/images/flip-9.0.png' ) no-repeat top left;
}

/***********************************************
 * Home page buttons
 ***********************************************/

div.btns {
   display: block;
   width: 460px;
   height: 120px;
   margin: 0px;
   padding: 0px;
}

div.btns blockquote {
   display: table;
   height: 120px;
*display : block;
*position : relative;
}

div.btns blockquote span {
   display: table-cell;
   vertical-align: middle;
 *display : block;
 *position : absolute;
 *left : 0 px;
 *width : 100 %;
 *top : expression ( this.parentElement.clientHeight / 2 - this.clientHeight / 2 );
}

div.btns blockquote span span {
   display: inline;
   vertical-align: baseline;
   position: relative;
   left: auto;
   width: auto;
   top: auto;
}

div.btns ul {
   margin: 1px 0px 0px 0px;
   list-style: none;
}

div.btns li {
   float: left;
   background: url( '/images/btnleft.gif' ) no-repeat left top;
   margin: 0px 2px;
   padding: 0 0 0 8px;
}

div.btns a {
   display: block;
   height: 36px;
   padding: 12px 25px 0px 16px;
   text-decoration: none;
   color: #000;
   font: bold 16px Arial, Verdana, sans-serif;
   line-height: 20px;
   background: url( '/images/btnright.gif' ) no-repeat right top;
}

div.btns li a span {
   color: #000;
   font: bold 16px Arial, Verdana, sans-serif;
   line-height: 20px;
   border-bottom: 1px solid #9ec03b;
}

div.btns li:hover, div.top_menu li.sfhover, div.btns li:hover a, div.btns li.sfhover a {
   background: url( '/images/btnleftover.gif' ) no-repeat left top;
}

div.btns li:hover a, div.btns li.sfhover a {
   background: url( '/images/btnrightover.gif' ) no-repeat right top;
}

/* Commented Backslash Hack
hides rule from IE5-Mac \*/
div.btns a {
   float: none;
}

/* End IE5-Mac hack */
div.btns a:hover {
   color: #333;
}

div.btns .active {
   background: url( '/images/btnleftover.gif' ) no-repeat left top;
   border-width: 0;
}

div.btns .active a {
   background: url( '/images/btnrightover.gif' ) no-repeat right top;
}

div.btns li.active:hover, div.top_menu li.active.sfhover, div.btns li.active:hover a, div.btns li.active.sfhover a {
   background: url( '/images/btnleftactiveover.gif' ) no-repeat left top;
}

div.btns li.active:hover a, div.btns li.active.sfhover a {
   background: url( '/images/btnrightactiveover.gif' ) no-repeat right top;
}

/***********************************************
 * Coda Slider (image scroller)
 ***********************************************/

#slider {
   width: 445px;
   height: 334px;
   margin: 0 auto;
   position: relative;
}

.scroll {
   width: 445px;
   height: 334px;
   overflow: auto;
   overflow-x: hidden;
   position: relative;
   clear: left;
}

.scrollContainer div.screenshot {
   width: 445px;
   height: 334px;
}

.scrollContainer div.screenshot blockquote {
   display: table;
   width: 405px;
   margin: 4px 18px 0px 18px;
   padding: 0px !important;
   height: 71px !important;
* display : block;
* position : relative;
}

.scrollContainer div.screenshot blockquote span {
   display: table-cell;
   vertical-align: middle;
   line-height: 18px !important;
   color: #464646;
   font: italic 12px arial, verdana, sans-serif;
* display : block;
* position : absolute;
* left : 0 px;
* width : 100 %;
* top : expression ( this.parentElement.clientHeight / 2 - this.clientHeight / 2 );
}

.scrollContainer div.screenshot blockquote span span {
   display: inline;
   vertical-align: baseline;
   position: relative;
   left: auto;
   width: auto;
   top: auto;
}

ul.navigation {
   clear: both;
   list-style: none;
   width: 476px;
   height: 44px;
   margin: 0;
   padding: 0px 0px 0px 0px;
}

ul.navigation li {
   float: left;
   display: block;
   margin: 0px;
   padding: 0px;
}

ul.navigation a {
   padding: 0px;
   text-decoration: none;
}

ul.navigation a:hover {
   background-color: #f6f6f6;
}

ul.navigation a.selected {
   background-color: #fff;
}

ul.navigation a:focus {
   outline: none;
}

.scrollButtons {
   position: absolute;
   bottom: 10px;
   cursor: pointer;
   height: 19px;
   padding: 5px 30px 0px 0px;
   color: #111;
   font: bold 12px arial, verdana, sans-serif;
   background: #fff url( /images/next.gif ) no-repeat right 0px;
}

.scrollButtons.left {
   left: 10px;
}

.scrollButtons.right {
   right: 10px;
}