/********************************************
   AUTHOR:          Pavel Werl and Erwin Aligam
   WEBSITE:         http://www.creatonix.com/
********************************************/

 
/********************************************
   HTML
********************************************/

/*** Body ***/
body {
  background: #CCC;
  font: 70%/1.5em Verdana, Tahoma, arial, Sans-serif;
  color: #555;
  width: 100%;
  margin: 0;
}

/********************************************
   LAYOUT
********************************************/
/*** Wrap (whole page) ***/ 
#wrap {
  width: 820px;
  background: #CCC url(../images/layout/content.png) repeat-y center top;
  margin: 0 auto;
}

/*** Header ***/
#page-header {
  position: relative;
  height: 113px;
  background: #CCC url(../images/layout/header.png) no-repeat center top;
}

/*** Main menu ***/
#page-menu {
  margin: 0 auto;
  font: bold 12px/22px Verdana, Arial, Tahoma, Sans-serif;
  height: 22px;
  width: 780px;
  background-color: #2581C0;
}

/*** Content (Included pages - without menu, header, footer, etc.) ***/
#content-wrap {
  width: 770px;
  margin: 0px auto;
  overflow: hidden;
}
#content-wrap #content {
  width: 100%;
}

/*** Main Column ***/
#content #main-wrap {
  background-color: #FFFFFF;
  width: 100%;
  float: left;
}

#content #main-wrap #main {
  margin: 10px;
}
#content.hasleftbar #main-wrap #main { margin-left: 210px !important; }
#content.hasrightbar #main-wrap #main { margin-right: 210px !important; }
#content.hasbothbars #main-wrap #main { margin-left: 210px !important; margin-right: 210px !important; }

/*** Leftbar ***/
#content #leftbar-wrap {
  float: left;
  margin-left: -100%;
  width: 200px;
}
#content #leftbar-wrap #leftbar {
  margin: 10px 0 10px 10px;
}

/*** Rightbar ***/
#content #rightbar-wrap	{
  float: right;
  margin-left: -100%;
  width: 200px;
}
#content #rightbar-wrap { .margin-left: -200px; /* IE6 Fix */ }

#content #rightbar-wrap #rightbar {
  margin: 10px 10px 10px 0;
}

/*** Footer ***/
#page-footer {
  color: #C6DDEE;
  background: #CCC url(../images/layout/footer.png) no-repeat center top;
  clear: both;
  height: 65px;
  text-align: center;
  font-size: 92%;
}

/********************************************
   HEADER STYLES
********************************************/ 
/*** Logo ***/
#page-header div.logo a, #page-header div.logo a:hover, #page-header div.logo a:visited {
  position: absolute;
  text-decoration: none;
  font: bolder 44px 'Trebuchet MS', Arial, Sans-serif;
  letter-spacing: -2px;
  color: #FFF;
  top: 25px; left: 47px;
}
/*** Slogan ***/
#page-header div.slogan {
  position: absolute;
  font: normal 12px 'Trebuchet MS', Arial, Sans-serif;
  color: #FFF;
  top: 70px; left: 55px;
}

/*** Links ***/
#page-header div#header-links {
  position: absolute;
  top: 20px; right: 30px;
  color: #C6DDEE;
  font-size: 10px;
  padding: 10px;
}
#page-header div#header-links a, #page-header div#header-links a:visited {
  color: #FFF;
  text-decoration: none;
}
#page-header div#header-links a:hover {
  color: #D4E59F;
}

/********************************************
   MENU STYLES
********************************************/
#page-menu ul {
  float: right;
  list-style: none;
  margin: 0; padding: 0 5px 0 0;
}
#page-menu ul li {
  display: inline;
}
#page-menu ul li a, #page-menu ul li a:visited {
  float: left;
  padding: 0 8px;
  color: #FFF;
  text-decoration: none;
}
#page-menu ul li a:hover {
  background-color: #ECECEC;
  color: #333;
}
#page-menu ul li#current a {
  background-color: #FFF;
  color: #333;
}

/********************************************
   FOOTER STYLES
********************************************/ 
/*** Links ***/
#page-footer a {
  color: #FFF;
  text-decoration: none;
}
#page-footer a:hover {
  color: #D4E59F;
}
/********************************************
   CONTENT STYLES
********************************************/
/*** Boxes ***/
#content div.box, #content div.box-green, #content div.box-blue {
  margin: 5px 0 5px 0;
  padding: 7px;
  background-color: #FAFAFA;
  border: 1px solid #EFF0F1;
}
#content div.box-green {
  background-color: #F7F9F7;
  border: 1px solid #94BD53;
}
#content div.box-blue {
  background-color: #EDF3FE;
  border: 1px solid #74A8F5;
}

/*** Links ***/
#content a, #content a:visited {
  text-decoration: underline;
  color: #2180BC;
}
#content a:hover {
  text-decoration: underline;
  color: #88ac0b;
}

/*** Spans ***/
#content span.acronym {
  cursor: help;
  border-bottom: 1px dotted #777;
}

/*** Headings ***/
#content h1, #content h2, #content h3, #content h4 {
  margin: 5px 0 5px 0;
  font: Bold 140% 'Trebuchet MS', Tahoma, Sans-serif;
}
#content h1 {
  padding: 3px 0 3px 22px;
  color: #88ac0b;
  border-bottom: 1px solid #EFF0F1;
  background: #FFF url(../images/elements/h1-bullet.png) no-repeat 0px 50%;
}
#content h2 {
  font-size: 130%;
  text-transform: uppercase;
  color: #88ac0b;
}
#content h3 {
  font-size: 130%;
  color: #666666;
}
#content h4 {
  font-size: 120%;
  color: #666666;
}

#content h1 a, #content h1 a:visited, #content h2 a, #content h2 a:visited { text-decoration: none; }
#content h1 a:hover, #content h2 a:hover                                   { text-decoration: underline; }
#content h3 a, #content h3 a:visited, #content h4 a, #content h4 a:visited { text-decoration: none; }
#content h3 a:hover, #content h4 a:hover                                   { text-decoration: underline; }

#content #main h1 a, #content #main h1 a:visited, #content #main h2 a, #content #main h2 a:visited { color: #88ac0b; }
#content #main h1 a:hover, #content #main h2 a:hover                                               { color: #88ac0b; }
#content #main h3 a, #content #main h3 a:visited, #content #main h4 a, #content #main h4 a:visited { color: #666666; }
#content #main h3 a:hover, #content #main h4 a:hover                                               { color: #666666; }

/*** Images ***/
#content img {
  background: #FAFAFA;
  border: 0;
}
#content img.float-right {
  margin: 5px 5px 5px 10px;
}
#content img.float-left {
  margin: 5px 10px 5px 5px;
}

/*** Lists ***/
#content ul {
  margin: 5px 0px;
  padding: 0 18px;
}
#content ul li {
  list-style-image: url(../images/elements/li-bullet.gif);
}
#content div.box ul li {
  list-style-image: url(../images/elements/li-bullet-gray.gif);
}

/*** Tables ***/
#content table {
  border-collapse: collapse;
  margin: 5px 0px 5px 0px;
}
#content th strong {
  color: #fff;
}
#content th {
  background: #A3CC1C;
  height: 29px;
  padding-left: 12px;
  padding-right: 12px;
  color: #FFF;
  text-align: left;
  border-right: 1px solid #B6D59A;
  border-bottom: solid 2px #FFF;
}
#content tr {
  height: 30px;
}
#content td {
  padding-left: 11px;
  padding-right: 11px;
  border-right: 1px solid #FFF;
  border-bottom: solid 1px #ffffff;
}
#content tr.row-a {
  background: #F8F8F8;
}
#content tr.row-b {
  background: #EFEFEF;
}

/*** Plain table ***/
#content table.plain {
  border-collapse: collapse;
  margin: 0;
}
#content table.plain th strong {
  color: #555;
}
#content table.plain th {
  background: #FFFFFF;
  height: 1px;
  padding: 0;
  margin: 0;
  color: #555;
  text-align: left;
  border: 0;
}
#content table.plain tr {
  height: 1px;
}
#content table.plain td {
  padding: 0;
  border: 0;
}

/*** Align tables ***/
#content table.align-table {
  margin: 5px 0 0 0;
  border: 0;
  width: 100%;
}
#content table.align-table tr {
  height: 1px;
  border: 0;
  vertical-align: middle;
  margin: 0;
}
#content table.align-table td {
  padding: 0;
  border: 0;
  vertical-align: middle;
}
#content table.align-table td.left {
  text-align: left;
}
#content table.align-table td.right {
  text-align: right;
}

/*** Forms ***/
#content form {
  margin: 5px 0px 5px 0px;
  padding: 0 10px 10px 10px;
  border: 1px solid #f2f2f2;
  background-color: #FAFAFA;
}
#content label {
  display: block;
  font-weight: bold;
  margin: 5px 0;
  font-size: 90%;
}
#content label#checkbox {
  display: inline;
  font-weight: normal;
  font-size: 100%;
  margin: 0;
}

/*** Others ***/
#content div .hr {
  border-top: 1px solid #EDEDEF;
  border-left: none;
  border-bottom: none;
  border-right: none;
  margin: 7px 0 7px 0;
  padding: 0;
}

/*** Alignment classes ***/
#content .float-left  { float: left; }
#content .float-right { float: right; }
#content .align-left  { text-align: left; }
#content .align-right { text-align: right; }
#content .align-center {text-align: center; }

/********************************************
   LEFTBAR AND RIGHTBAR STYLES
********************************************/ 
/*** Headings ***/
#content #leftbar h1, #content #rightbar h1 {
  margin: 10px 0 0 0;
  padding: 5px 0 5px 10px;
  font: bold 1.1em Verdana, 'Trebuchet MS', Sans-serif;
  color: #555;
  border: 1px solid #EFF0F1;
  background: #EEF0F1 url(../images/elements/h1-bg.gif) repeat-x left bottom;
}

#content #leftbar h2, #content #rightbar h2, #content #leftbar h3, #content #rightbar h3, #content #leftbar h4, #content #rightbar h4 {
  margin-top: 10px;
}

/*** Boxes ***/
#content #leftbar div.box, #content #rightbar div.box { margin-top: 0px; }
#content #leftbar div.box-blue, #content #rightbar div.box-blue { margin-top: 0px; }
#content #leftbar div.box-blue, #content #rightbar div.box-green { margin-top: 0px; }

/*** Menu ***/
#content #leftbar ul.menu, #content #rightbar ul.menu {
  list-style: none;
  margin: -3px -6px 0 -6px; padding: 0;
}
#content #leftbar ul.menu li, #content #rightbar ul.menu li {
  border-bottom: 1px solid #EFF0F1;
  list-style-image: none;
  background: url(../images/elements/li-bullet2.gif) no-repeat 5px 5px;
  padding: 2px 0px 2px 25px;
  margin: 0 2px;
}
#content #leftbar ul.menu li.last, #content #rightbar ul.menu li.last {
  border-bottom: 0;
  padding-bottom: 0;
}
#content #leftbar ul.menu a, #content #leftbar ul.menu a:visited, #content #rightbar ul.menu a, #content #rightbar ul.menu a:visited {
  font-weight: bolder;
  text-decoration: none;
}
#content #leftbar ul.menu a:hover, #content #rightbar ul.menu a:hover {
  font-weight: bolder;
  text-decoration: underline;
  color: #88ac0b;
}
/********************************************
   PRODUCTS STYLES
********************************************/

/*** Headings ***/
#content.products h1 {
  margin-top: 15px;
}

/*** Images ***/
#content.products img {
  margin: 5px;
}
#content.products img.float-left {
  margin-left: 5px;
  margin-right: 10px;
}

/*** Box ***/
#content.products div.box {
  margin: -6px 0 5px 0;
}

/*** Align Table ***/
#content.products table.align-table {
  clear: both;
}
#content.products table.align-table td {
  padding-top: 5px;
  border-top: 1px solid #EFF0F1;
}
/********************************************
   PRODUCT STYLES
********************************************/

/*** Box ***/
#content.product div.product-box div.box {
  text-align: center;
}
#content.product div.product-box h4 {
  margin-top: 0px;
  clear: both;
}

/*** Screenshots ***/
#content.product div.product-screenshots div.box {
  text-align: center;
  margin-top: 0px;
}
#content.product div.product-screenshots img {
  margin-bottom: 5px;
}
#content.product div.product-screenshots img.last {
  margin-bottom: 0px;
}

/*** Awards ***/
#content.product div.product-awards div.box {
  text-align: center;
  margin-top: 0px;
}
#content.product div.product-awards img {
  margin-bottom: 5px;
}
#content.product div.product-awards img.last {
  margin-bottom: 0px;
}

/*** Testimonials ***/
#content.product div.product-testimonials div.box {
  margin-top: 10px !important;
}
/********************************************
   ORDER STYLES
********************************************/

/* Order elements */
#content table.order {
  width: 100%;
}
#content table.order th {
}
#content table.order tr {
}
#content table.order td.product {
  text-align: left;
}
#content table.order td.quantity {
  font-weight: Bold;
  text-align: center;
}
#content table.order td.price {
  font-weight: Bold;
  text-align: center;
}

#content table.order td.quantity input {
  text-align: center;
  width: 20px;
}

#content form.order {
  margin: 0;
  padding: 0;
  border: none;
  background-color: inherit;
}
/********************************************
   CONTACT STYLES
********************************************/

/* Contact table */
#content table.contact {
  border-collapse: collapse;
  border: 0;
  margin: 10px 0 0 0;
}
#content table.contact th {
  background: #FFFFFF;
  height: 1px;
  padding: 0;
  margin: 0;
  color: #555;
  text-align: left;
  border: 0;
}
#content table.contact tr {
  height: 1px;
}
#content table.contact td {
  padding: 5px 0 5px 0;
  border: 0;
  vertical-align: top;
}
#content table.contact td strong {
  color: #666666;
}
/********************************************
   NEWSLETTER STYLES
********************************************/

#content table.newsletter {
  margin: 0;
}
#content table.newsletter tr {
  height: 1px;
  vertical-align: middle;
}
#content table.newsletter td {
  padding: 0;
  border: 0px;
  vertical-align: middle;
}
/********************************************
   COMPANY-NEWS STYLES
********************************************/

#content div.company-news {
  height: 200px;
  overflow: auto;
}

#content div.company-news .header {
  color: #88ac0b;
  font-size: 10px;
  font-weight: bold;
  margin: 0 0 3px 0;
}

#content div.company-news .text {
}