/* 
Menu bar: width = 760px, height = 36px
*/

/**************************
  General
**************************/

* {
  padding:0;
  margin:0;
}

/* 
hr {
  display: block;
  clear: both;
  height: 3px;
  background-color: black;
  border: 1px solid black;
  margin: 2em 0px;
  padding: 0px;
}
*/

span.debug {
  font-size: 20px;
  color: red;
}

body {
  width: 760px;
  margin: 0px auto;
  padding: 0px;
  background-color: #EDEDED;
  font-family: Arial, Helvetica, Sans-Serif;
  text-align: left;
  color: #454545;
}

h1 {
  margin: 0px 0px 10px 0px;
  padding: 0px;
  font-size: 24px;
  font-weight: bold;
  text-align: left;
}

h2 {
  margin: 0px -5px 20px -5px;
  padding: 0px 5px;
  font-size: 16px;
  font-weight: bold;
  background-color: #EDEDED; 
  text-align: left;
}

h3 {
  margin: 22px 0px 10px 0px;
  padding: 0px;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}

h4, h5, h6 {
  margin: 1.5em 0px 10px 0px;
  padding: 0px;
  font-size: 12px;
  font-weight: bold;
  text-align: left;
}

div, p {
  margin: 1em 0;
  padding: 0px;
  font-size: 13px;
  text-align: left;
}

div.separator {
  margin: 2em 0px;
  padding: 0px;
  height: 0px;
  border-width: 0px 0px 3px 0px;
  border-style: solid;
  border-color: #EDEDED;
}

em {
  font-size: 100%;
  font-style: italic;
}

big {
  font-size: 17px;
}

small {
  font-size: 10px;
}

strong {
  font-size: 100%;
  font-weight: bold;
}

/* If IE6 recognised a[name] then could just put "a" here instead */ 
a:link, a:active, a:visited { 
  text-decoration: none;
  color: #518bcd;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
  color: #518bcd;
}

a[name] {
  color: #454545;
  text-decoration: none;
}

ul {
  margin: 1em 0px;
  list-style-type: disc;
  list-style-position: outside; 
  color: #454545;
}

ul ul {
  margin-top: 0px;
  margin-bottom: 0px;
  list-style-type: circle;
  font-size: 13px;
}

ol {
  margin: 1em 0px;
  list-style-position: outside; 
  font-size: 13px;
}


li {
  margin: 1px 0px 1px 30px; 
  padding: 0px;
  font-size: 100%;
  color: #454545;
}

dl {
  margin: 1em 0px;
  padding: 0px;
  font-size: 13px;
}

dt {
  margin: 0px;
  padding: 0px;
  float: left;
  font-size: 100%;
}

dd {
  margin: 0px;
  padding: 0px;
  font-size: 100%;
}

img {
  border: none;
}

table {
  margin: 1.5em auto;
  padding: 0px;
  border: 1px solid #454545;
  /*table-layout: fixed;*/
  border-collapse: separate;
  border-spacing: 0px;
  empty-cells: show;
  font-size: 12px;
}

tr {
  margin: 0px;
  padding: 0px;
  background-color: white;
}

th, td {
  height: 35px;
  text-align: left;
  font-size: 12px;
  margin: 0px;
  padding: 0px;
}

th {
  font-weight: bold;
}

td {
  font-weight: normal;
}

th.leftCell, td.leftCell {
  padding-left: 10px;
}

td dl {
  border-top: 1px solid #454545;
  margin: 1em 0px;
  padding: 0px 10px;
  font-size: 12px;
}

td dt {
  font-size: 12px;
  margin-top: 1em;
}

td dd {
  font-size: 12px;
  margin-top: 1em;
  margin-left: 25px;
}

address {
  margin: 1em 0px 1em 50px;
  padding: 0px;
  font-size: 13px;
  font-style: italic;
  margin: 1em 3em;
}

.error {
  color: red;
  font-weight: bold;
}

.error img {
  padding: 1em 1em 1em 3em;
}

.centred {
  text-align: center;
}

.shaded {
  background-color: #EDEDED;
}

ul.buttons {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

ul.buttons li {
  margin: 0px;
  padding-left: 30px;
  width: 91px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  float: left;
}

ul.buttons li a {
  display: block;
  color: white;
  margin: 0px;
  padding: 0px;
  width: 91px;
  height: 31px;
  border-width: 0px;
  background-image: url(buttonBigRed.gif);
  font-size: 14px;
  font-weight: bold;
  background-color: #505050;
  text-decoration: none;
}

ul.buttons a:hover {
  background-image: url(buttonBigCharcoal.gif);
}

/* This is only necessary for IE6 */
ul.buttons a:hover,
ul.buttons a:link,
ul.buttons a:active,
ul.buttons a:visited {
  color: white;
  text-decoration: none;
}

div#pageContent ul.buttons {
  width: 272px; 
  height: 31px;
  margin: 2em auto 2em auto;
}

div#pageContent ul.buttons li a {
  font-size: 14px;
  font-weight: bold;
  color: white;
}

div#pageContent ul.doubleButtons {
  width: 166px;
  margin: 1em auto;
  padding: 0px;
  list-style-type: none;
}

div#pageContent ul.doubleButtons li {
  width: 166px;
  padding: 0px;
  margin: 0px;
  height: 31px;
  line-height: 31px;
}

div#pageContent ul.doubleButtons li a {
  width: 166px;
  background-image: url(buttonDoubleRed.gif);
  text-align: left;
  display: block;
  color: white;
  margin: 0px;
  padding: 0px;
  height: 31px;
  border-width: 0px;
  font-size: 14px;
  font-weight: bold;
  background-color: #505050;
  text-decoration: none;
}

div#pageContent ul.doubleButtons li a:hover {
  background-image: url(buttonDoubleCharcoal.gif);
}

div#pageContent ul.doubleButtons li a span.s1 {
  padding-left: 15px;
}

div#pageContent ul.doubleButtons li a span.s2 {
  padding-left: 25px;
  font-size: 11px;
  font-weight: normal;
}

/* This is only necessary for IE6 */
div#pageContent ul.doubleButtons a:hover,
div#pageContent ul.doubleButtons a:link,
div#pageContent ul.doubleButtons a:active,
div#pageContent ul.doubleButtons a:visited {
  color: white;
  text-decoration: none;
}

input.submit {
  text-align: center;
  width: 91px;
  height: 31px;
  line-height: 31px;
  background-color: #505050;
  background-image: url(buttonBigRed.gif);
  border-width: 0px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  vertical-align: middle;
  cursor: pointer;
}

input.submit:hover {
  background-image: url(buttonBigCharcoal.gif);
}

div#mainFrameTop,
div#mainFrameBottom {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 6px;
  font-size: 0px;
  background-image: url(mainFrameTop.gif);
}

div#mainFrameTop {
  background-image: url(mainFrameTop.gif);
}

div#mainFrameBottom {
  background-image: url(mainFrameBottom.gif);
  clear: both;
}

div.dummy {
  clear: both;
  margin: 0px;
  padding: 0px;
}

/**************************
  Brand
**************************/

div#brand {
  margin: 5px 0px 10px 5px;
  padding: 0px;
  font-size: 0px;
}

div#brand a img {
  margin: 0px;
  padding: 0px;
  border: 1px solid #EDEDED;
}

div#brand a:hover img {
  border-color: #323232;  
}

/********************************************
  Top and bottom menus
********************************************/

ul#topMenu {
  margin: 0px 0px 8px 0px;
}

ul#bottomMenu {
  margin: 8px 0px 0px 0px;
  clear: both;
}

ul#topMenu,
ul#bottomMenu {
  padding: 0px;
  background-image: url(mainMenuBar.gif);
  width: 760px;
  height: 36px;
  font-size: 13px;
  list-style-type: none;
}

ul#topMenu li {
  width: 108px; /* i.e. width of ul (currently 760) divided by number of elements in list (currently 7) */
}

ul#bottomMenu li {
  width: 125px;
}

ul#topMenu li,
ul#bottomMenu li {
  margin: 0px;
  padding: 0px;
  height: 36px;
  float: left;
  text-align: center;
  margin: 0px 0px;
  line-height: 36px;
  color: white;
}

ul#topMenu li a,
ul#bottomMenu li a {
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  padding: 0px 3px;
}

ul#topMenu li a.selected,
ul#bottomMenu li a.selected {
  border-left: 3px solid red;
  border-right: 3px solid red;
}

ul#topMenu li a:hover,
ul#bottomMenu li a:hover {
  color: #323232;
  text-decoration: none; /* This line is only necessary for IE6 */
}

ul#bottomMenu li#copyright {
  padding-left: 20px;
  width: 240px;  /* Remainder of 760 - (4 * 125) - 20, where 760 is the width of ul, 130 is the width of the other 3 li elements, 20 is the padding of this li element */
  text-align: left;
  color: black;
  font-size: 13px;
  font-weight: normal;
}

/********************************************
  Sub Menu
********************************************/

ul#subMenu {
  margin: 0px 0px 0px 5px;
  padding: 0px;
  float: left;
  list-style-type: none;
}

ul#subMenu a {
  color: #518bcd; /*#6798D2;*/
  border-left: 3px solid white;
  border-right: 3px solid white;
  padding: 0px 3px;
  font-size: 13px; 
  font-weight: bold;
}

ul#subMenu a.selected {
  border-color: #EE1439;
}

ul#subMenu a:hover {
  color: #454545; /*#EE1439;*/
  border-left-color: #454545;
  text-decoration: none;
}

ul#subMenu a.selected:hover 
{
  border-color: #EE1439;
}

ul#subMenu li {
  margin: 0px;
  padding: 0px;
}

ul#subMenu li a:visited {  
  color: #518bcd;
}

/********************************************
  Special Links
********************************************/

ul.specialLinks01,
ul.specialLinks02,
ul.specialLinks03,
ul.specialLinks04 {
  list-style-type: none;
}

ul.specialLinks02 li,
ul.specialLinks04 li {
  margin-top: 1em;
  margin-bottom: 1em;
}

ul.specialLinks01 li a:visited,  
ul.specialLinks02 li a:visited,  
ul.specialLinks03 li a:visited,
ul.specialLinks04 li a:visited {  
  color: #518bcd;
}

ul.specialLinks01 li a,
ul.specialLinks02 li a,
ul.specialLinks03 li a span.s1,
ul.specialLinks04 li span a {
  padding-right: 13px;
  background-image: url(triangleRed.gif);
  background-position: center right;
  background-repeat: no-repeat;
}

ul.specialLinks03 li a span.s2 {
  padding: 0px 0px 0px 10px;
  margin: 0px;
  color: #454545;
  font-size: 10px;
  font-weight: normal;
  text-decoration: none;
  background-image: none;
}

ul.specialLinks03 li a:hover span.s1 {
  text-decoration: underline;
}

ul.specialLinks03 li a:hover span.s2 {
  text-decoration: none;
}

/**************************
  Sub Header
**************************/

div#subHeader {
  width: 720px;
  background-color: white;
  margin: 0px;
  padding: 10px 20px 0px 20px;
  color: #454545;
}

div#subHeader h1 {
  margin-top: 0px;
}

div#subHeader div {
  padding: 0px 20px 0px 0px;
  margin: 0px;
}

div#subHeader p {
  margin: 0px;
  padding: 0px;
  text-align: center;
  clear: none;
  font-size: 17px;
  font-weight: bold;
}

div#subHeader img#subHeaderImage {
  float: right;
  margin: 0px;
  padding: 0px;
}

div#subHeader ul#highlights {
  margin: 15px 0px 0px 0px;
  padding: 0px;
  list-style-type: disc;
  font-size: 13px;
  font-weight: normal;
  list-style-position: inside; 
}

div#subHeader ul#highlights li {
  margin: 0px;
  padding: 0px;
}

div#subHeader ul.buttons {
  margin: 20px 0px 0px 0px;
  padding: 0px;
}

/**************************
  Page content
**************************/

div#pageContent
{
  width: 720px;
  background-color: white;
  margin: 0px;
  padding: 10px 20px;
  color: #454545;
  clear: left;
}

/* If IE6 recognised a[name] then could just put "div#pageContent a" here instead */
div#pageContent a:link, 
div#pageContent a:active, 
div#pageContent a:visited, 
div#pageContent a:hover {  
  font-size: 90%;
}

div#pageContent a:visited {  
  color: #EE1439;
}

div#pageContent a[name] {
  font-size: 100%;
}

/* 
The following three declarations:
  div#pageContent h3 a
  div#pageContent h3 a:hover
  div#pageContent h3 a[name]
are only necessary because IE6 doesn't recongnise a[href] when an <a> tag 
has both "name" and "href" paramaters. Otherwise s single a[href] declaration
would be sufficient.
 */
div#pageContent h3 a:link, 
div#pageContent h3 a:active, 
div#pageContent h3 a:visited, 
div#pageContent h3 a:hover {
  color: #454545;
  font-size: 100%;
}

div#pageContent h3 a:hover {
  text-decoration: underline;

}

div#pageContent h3 a[name] {
  text-decoration: none;
}

div#pageContent h3 a[href]:hover {
  text-decoration: underline;
}

div#pageContent p.review
{
  margin: 1.5em 40px;
  text-align: center;
}

div#pageContent p.review span.s1
{
  font-style: italic;
  font-size: 15px;
}

div#pageContent p.review span.s2
{
  font-size: 12px;
  margin-top: 5px;
  font-weight: bold;
}

div#pageContent p.review span a
{
  font-size: 100%;
}

/**************************
  Footnotes
**************************/
div#footnotes {
  margin: 0px 0px 0px 0px; 
  padding: 0px; 
}

div#footnotes span {
  margin: 0px 0px 0px 38px;
  padding: 0px;
  float: left;
}

div#footnotes span a img {
  display: block;
  margin: 0px 0px 3px 0px;
  padding: 1px;
  border: 1px solid #EDEDED;
}

div#footnotes span a:hover img {
  border-color: #323232;
}

div#footnotes p {
  margin: 10px 80px 0px 150px;
  text-align: center;
  font-size: 10px;
  font-weight: normal;
  background-color: #EDEDED;
}

/****************************************
  Contact page
****************************************/

#contact div#pageContent ul {
  list-style-type: none;
}

#contact div#pageContent form {
  width: 400px;
  margin: 2em auto 2em auto;;
  text-align: right;
  padding: 20px;
  border: 0px solid #EDEDED;
}

#contact div#pageContent form input,
#contact div#pageContent form textarea,
#contact div#pageContent form select {
  width: 400px;
  text-align: left;
}

#contact div#pageContent form input.submit { /* Using input.submit instead of input[type="submit"] because the latter is not supported by IE6 */
  margin: 0px;
  width: 91px;
  text-align: right;
  padding-right: 13px;
  background-color: white;
  background-image: url(triangleRed.gif);
  background-position: 100% 55%;
  background-repeat: no-repeat;
  font-size: 100%;
  color: #518bcd;
}

#contact div#pageContent form input.submit:hover {
  text-decoration: underline;
}

/****************************************
  Adobe Reader page
****************************************/

#adobe div#pageContent div {
  margin: 33px 0px 33px 100px;
}

/****************************************
  Products and Press pages
****************************************/

#overview div#pageContent div.product,
#products div#pageContent div.product,
#press div#pageContent div.product {
  width: 290px;
  float: left;
  margin: 15px 15px 0px 15px;
  padding: 0px 15px;
  border: 3px solid #EDEDED;
  background-color: white;
}

#overview div#pageContent div.product,
#products div#pageContent div.product {
  height: 230px;
}

#press div#pageContent div.product {
  height: 250px;
}

#overview div#pageContent div.product h3,
#products div#pageContent div.product h3,
#press div#pageContent div.product h3 {
  margin-top: 1em;
}

#overview div#pageContent div.product h3,
#products div#pageContent div.product h3 {
  float: left;
}

#overview div#pageContent div.product p.p1,
#products div#pageContent div.product p.p1 {
  font-weight: bold;
  float: right;
}

#overview div#pageContent div.product p.p1 a,
#products div#pageContent div.product p.p1 a {
  color: #454545;
  font-size: 100%;
}

#overview div#pageContent div.product p.p2,
#products div#pageContent div.product p.p2 {
  clear: both;
}

/****************************************
  Downloads page
****************************************/

#downloads div#pageContent ul#subMenu {
  margin-top: 10px;
  margin-right: 60px;
  margin-bottom: 20px;
}

#downloads div#pageContent div.product {
  margin: 20px 0px 0px 0px;
  padding: 0px 15px;
  border: 3px solid #EDEDED;
  background-color: white;
  clear: both;
}

#downloads div#pageContent div.product h3 {
  margin-top: 1em;
  width: 32%;
}

#downloads div#pageContent div.product div.d1 {
  float: left;
  width: 32%;
  margin: 0px;
  padding: 0px;
}

#downloads div#pageContent div.product div.d2 {
  width: 65%;
  float: right;
  margin: 0px;
  padding: 0px;
}

#downloads div#pageContent div.product div.d3 {
  clear: both;
  margin: 0px;
  padding-top: 5px;
}

#downloads div#pageContent div.product div.d1 p {
  text-align: center;
}

#downloads div#pageContent div.product div.d1 ul.specialLinks03 li {
  margin-left: 0px; 
  text-align: center; 
}

/****************************************
  Downloads Thank You page
****************************************/

#downloads_thankyou div#pageContent p {
  margin-top: 2em;
  margin-bottom: 2em;
}

#downloads_thankyou div#pageContent ul {
  text-align: center;
}

/**************************
  Store page
**************************/

#store div#pageContent table {
  width: 680px;
  background-color: #F7F7F7;
  margin-top: 1em;
  margin-bottom: 1em;
  border-collapse: collapse
}

#store div#pageContent th {
  background-color: #EDEDED;
  padding-top: 1em;
  padding-bottom: 1em;
  height: auto;
  font-weight: normal;
}

#store div#pageContent td {
  padding-left: 10px;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  height: auto;
  border-top: 1px solid #ADADAD;
}

#store div#pageContent th.leftCell {
  padding-left: 10px;
  font-weight: bold;
}

#store div#pageContent td.leftCell {
  width: 290px;
}

#store div#pageContent th.price,
#store div#pageContent td.price {
  text-align: right;
  width: 100px;
  padding-left: 0px;
  padding-right: 40px;
}

#store div#pageContent td.price {
  font-weight: bold;
}

#store div#pageContent th.selection,
#store div#pageContent td.selection {
  padding-left: 0px;
  width: 60px;
  text-align: left;
}

#store div#pageContent td.selection input {
  width: 28px;
  text-align: center;
}

#store div#pageContent div {
  margin: 0px auto; 
  padding: 0px;
  width: 680px;
  height: 31px;
  text-align: right;
}


#store div#pageContent div input.submit {
  margin: 0px;
}

/************************************************
  Export page
************************************************/

#export div#pageContent table {
  width: 550px;
}

#export div#pageContent th,
#export div#pageContent td {
  width: 100px;
  text-align: center;
}

#export div#pageContent th.leftCell,
#export div#pageContent td.leftCell {
  width: auto;
  text-align: left;
  padding-left: 30px;
}

/**************************
  404 page
**************************/

#four04 div#pageContent div {
  margin: 2em 0px 5em 0px;
}

#four04 div#pageContent h3 {
  margin: 2em 0px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

#four04 div#pageContent p {
  text-align: center;
}

/************************************************
  Comparison pages
************************************************/

#comparison div#pageContent table {
  width: 640px;
}

#comparison div#pageContent td {
  width: 110px;
}

#comparison div#pageContent td.leftCell {
  width: 300px;
}

#comparison div#pageContent td.legend {
  width: 100%;
}

#comparison div#pageContent td img {
  padding-left: 51px;
}

/****************************************
  Overview pages
****************************************/

#overview div#pageContent div.d3,
#msoffice div#pageContent div.d3 {
  margin: 20px 0px;
  padding: 0px;
}

#overview div#pageContent div.d3 a img,
#msoffice div#pageContent div.d3 a img {
  margin: 0px 30px 0px 17px;
  float: left;
  padding: 2px;
  border: 1px solid white;
}

#overview div#pageContent div.d3 a:hover img,
#msoffice div#pageContent div.d3 a:hover img {
  border-color: #323232;  
}

#overview div#pageContent div.d3 p,
#msoffice div#pageContent div.d3 p,
#overview div#pageContent div.d3 ul,
#msoffice div#pageContent div.d3 ul {
  clear: none;
  margin-top: 0px; /* This is only necessary for IE which doesn't seem to calculate the margin properly */
  padding-top: 20px;
}

#overview div#pageContent div.d1 {
  margin: 15px 15px 15px 30px;
  padding: 0px 15px;
  border: 3px solid #EDEDED;
  background-color: white;
  float: right;
  width: 400px;
}

#overview div#pageContent div.d1 h3 {
  margin: 1em;
  padding: 0px;
}

#overview div#pageContent div.d1 p {
  margin: 1em;
  padding: 0px;
}

/****************************************
  Screenshots & Quality pages
****************************************/

#screenshots div#pageContent h3,
#quality div#pageContent h4 {
  font-size: 13px;
  margin-top: 2em;
}

#screenshots div#pageContent div,
#quality div#pageContent div {
  text-align: center;
}