body {
    background-color:       #999999;
    font-family:            Arial, Verdana, Times;
    text-align:             center;
}

#wrap {
    max-width:              50em;
    margin:                 0 auto;
}

div#logo_container {
    width:                  800px;
    padding:                0px;
    background:             #336699;
    margin-left:            auto;
    margin-right:           auto;
    background-image:       url("../images/logo.jpg");
    background-repeat:      no-repeat;
    height:                 147px;
    color:                  white;
    font-family:            Times;
}

/* Unused if using a graphic logo.
 * Useful if we revert back to a text (h1, h2) heading
div#logo_title {
        position:               relative;
        font-size:              160%;
        margin-left:            -130px;
        margin-top:             -20px;
        padding-top:            0px;
}

div#logo_title h1 {
        padding-top:            25px;
}

div#logo_subtitle {
        margin-left:            170px;
        margin-top:             -35px;
        font-style:             italic;
        font-size:              100%;
        text-align:             left;
}
*/

a {
    text-decoration:        none;
    color:                  black;
    border-bottom:          1px dotted #666666;
}

a:hover {
    color:                  #336699;
    border-bottom:          1px dotted #336699;
}

div#nav_bar {
    width:                  790px;
    background:             black;
    margin-left:            auto;
    margin-right:           auto;
    color:                  white;
    text-align:             left;
    padding-left:           10px;
    padding-top:            5px;
    padding-bottom:         5px;
    font-family:            arial;
    font-size:              90%;
}

div#nav_bar a {
    color:                  white;
    padding:                5px;
    padding-bottom:         0px;
    border:                 none;
    text-decoration:        underline;
}

div#nav_bar a:visited, div#nav_bar a:link {
    padding-bottom:         7px;
}

div#nav_bar a:hover {
    background-color:       #336699;
    padding-bottom:         7px;
}

div#login {
    float:                  right;
    margin-top:             -24px;
    padding:                10px 20px 5px 5px;
    text-align:             right;
    font-size:              80%;
}

div#login a:hover {
    padding-top:	    7px;
    padding-bottom:	    6px;
}

div#content_outerbox {
    margin-left:            auto;
    margin-right:           auto;
    padding-bottom:         30px;
    width:                  796px;
    background-image:       url("../images/strip_outerbox.jpg");
    background-repeat:      repeat-x;
    background-color:       white;
    border-style:	solid;
    border-color:	black;
    border-width:	2px 2px 2px 2px;
}

/* This remains the same regardless of whether or not JavaScript is supported */
div#content_innerbox {
    margin-left:            -10px;
    margin-bottom:          -1px;
/*      margin-right:           auto;*/
/*      margin-top:             35px;*/
    width:                  656px;
/*      height:                 350px;*/
/*      background-color:       white;*/
    background-image:       url("../images/strip_innerbox.jpg");
    background-position:    bottom;
    background-repeat:      repeat-x;
    text-align:             left;
    padding:                10px;
    font-family:            Arial;
    font-size:              90%;
}

h1 {
    margin-left:            0px;
    font-weight:            bold;
    font-size:              130%;
    margin-bottom:          -5px;
    margin-top:             -20px;
}

h2 {
    font-weight:            lighter;
    font-size:              115%;
    margin-bottom:          30px;
}

p{
    padding-bottom:         5px;
}

div#languages {
    background-color:       white;
    border:                 1px solid black;
    padding:                5px;
    margin-top:             4px;
    margin-right:           20px;
    float:                  right;
    font-size:              70%;
}

div#picture_container {
    clear: both;
    width:                  150px;
    height:                 250px;
    float:                  right;
    margin:                 30px 10px 0px 13px;
}

div#picture {
    background-color:       gray;
    height:                 200px;
    margin:                 0;
}

div#caption {
    margin-top:             10px;
    text-align:             center;
    font-style:             italic;
}

div#bottom_content {
    text-align:             center;
    width:                  100%;
    overflow:               auto;
    padding-top:            20px;
    margin-bottom:          -15px;
}

div#categories {
    text-align:             left;
    width:                  100%;
    overflow:               auto;
    padding-top:            20px;
    margin-bottom:          -15px;
}

table.specs {
    border:                 1px solid black;
}

table.specs tr:first-child {
    font-weight:	    bold;
}

table.specs td {
    border:                 1px solid black;
    padding:                5px;
}

p.flash_error {
    color:                  red;
    margin-top:             -5px;
    margin-bottom:          20px;
}

p.flash_success {
    color:                  green;
    margin-top:             -5px;
    margin-bottom:          20px;
}

a.action_link {
    font-style:             italic;
    text-align:             right;
}

table {
    border-collapse:        collapse;
}

th {
    padding:                5px 10px 5px 10px;
    border:                 1px solid black;
}

tr.list_line_odd td, tr.list_line_even td {
    padding:                5px 10px 5px 10px;
    border:                 1px solid black;
    font-size:              90%;
}

tr.list_line_odd {
    background-color:       #bdbdbd;
}

tr.list_line_even {
    background-color:       white;
}

span.star {
    color:                  red;
}

span.note {
    font-style:             italic;
    font-size:              80%;
}

/* This is a crappy hack for evenly spacing the 4 divs at the bottom of the page.
 * Unfortunately, IE 6/7 and FF2 do not support inline-block, which works
 * perfectly to fix this problem in FF3. */
div#bottom_content div {
    width:                  100px;
    float:                  left;
    display:                inline;
    vertical-align:         top;
    margin:                 10px 20px 20px 42px;
}

div#categories div {
    width:                  200px;
    float:                  left;
    display:                inline;
    vertical-align:         top;
    margin:                 0px 0px 20px 10px;
    height:		    25px;
}

div#disclaimer_bar {
    width:                  800px;
    margin-left:            auto;
    margin-right:           auto;
    background-color:       black;
    color:                  white;
    padding-top:            5px;
    padding-bottom:         5px;
    font-size:              80%;
}

div#disclaimer_bar a {
    color:                  white;
    padding:                5px 10px 5px 10px;
    border:                 none;
    text-decoration:        underline;
}

div#disclaimer_bar a:hover {
    color:                  #336699;
}

div#copyright {
    margin-top:             10px;
}

div.product {
    margin-top:             10px;
    padding-bottom:         10px;
    border-bottom:          1px dotted black;
/* Hack from http://www.dustindiaz.com/min-height-fast-hack/ */
    min-height:             150px;
    height:                 auto !important;
    height:                 150px;
}

div.product h2 {
    font-weight:            bolder;
    margin-bottom:          -10px;
    font-size:              100%;
}

div.product div.picture {
    width:                  100px;
    float:                  right;
    margin:                 30px 0px 10px 10px;
    text-align:             center;
}

div.product div.picture img {
    border:                 1px solid black;
}

div.big_picture img {
    border:                 1px solid black;
}

/* Might need to be hacked for IE.
 * As long as IE doesn't do anything strange,
 * it's all good. */
div.product div.picture img:hover {
    border:                 1px solid #336699;
}

a.image {
    border:                 none;
}

div.picture {
    float:                  right;
    margin-top:             150px;
    margin-right:           100px;
}

/* CSS for error validation */

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}

div.our_team {
}

div.our_team p.name {
    font-size:              115%;
    font-weight:            bold;
}

div.our_team p.position {
    color:                  #606060;
    margin-top:             -20px;
    border-bottom:          3px dotteed black;
    font-weight:            bold;
}

div.our_team img {
    height:                 100px;
    width:                  100px;
    float:                  left;
    padding:                0px 15px 10px 0;
}

div.about_us_links {
    border:                 1px solid gray;
    float:                  right;
    padding:                7px 7px 10px 7px;
    margin:                 0px 0px 10px 10px;
}

div#aul_title {
    font-weight:            bold;
    border-bottom:          1px solid black;
}

div.about_us h2 {
    font-weight:            bold;
    margin-bottom:          0px;
}

div.terms h2 {
    margin-bottom:          -10px;
    font-size:              110%;
}

div.categories div {
    min-width:              200px;
    display:                inline;
}

div.pagination {
    width:		    100%;
    text-align:		    center;
}

div.pagination a {
	padding:	    5px;
	background-color:   #999999;
	border:		    1px solid black;
}

div.pagination a:hover {
	background-color:   #336699;
	color: 		    black;
}

div.random_products_left, div.random_products_right {
    width:                  150px;
    height:                 160px;
    padding:                5px;
    border:                 1px solid black;
    text-align:             center;
}

div.random_products_right {
    float:                  right;
    margin-top:             -187px;
}

table.products_table {
    text-align:             center;
    margin-top:             -10px;
}

table.products_table td {
    width:                  150px;
    padding:                5px;
    margin:                 1px;
    height:                 200px;
}

table.products_table td div.text {
    height:                 50px;
}

table.products_table td div.image {
    height:                 100px;
}

table.products_table td:hover {
    background-color:       #c9ccd7;
    border:                 1px solid black;
    width:                  148px;
}

/* CSS for the purpose of the rounded corners
================================================*/

/* Basic styling, used when JavaScript is unsupported */
.cbb {
    margin-top:35px;
    margin-left:auto;
    margin-right:auto;
    width:666px;
    border:1px solid #666;
    background:#fff;
    padding-left:10px;
}

.cbb h1 {
    margin:0 -10px;
    padding:0.3em 10px;
    background:#efece6;
    font:bold 1.2em/1 Arial, Helvetica, sans-serif;
}

/* Normal styling, used when JacaScript is supported */
.cb {
/*      margin:0.5em 0;*/
    margin-top:35px;
    margin-left:auto;
    margin-right:auto;
    width:700px;
}

/* Top corners and border */
.bt {
    height:17px;
    margin:0 0 0 18px;
    background:url(../images/box.png) no-repeat 100% 0;
}

.bt div {
    position:relative;
    left:-18px;
    width:18px;
    height:17px;
    background:url(../images/box.png) no-repeat 0 0;
    font-size:0;
    line-height:0;
}

/* Bottom corners and border */
.bb {
    height:14px;
    margin:0 0 0 12px;
    background:url(../images/box.png) no-repeat 100% 100%;
}

.bb div {
    position:relative;
    left:-12px;
    width:12px;
    height:14px;
    background:url(../images/box.png) no-repeat 0 100%;
    font-size:0;
    line-height:0;
}

/* Left border */
.i1 {
    padding:0 0 0 12px;
    background:url(../images/borders.png) repeat-y 0 0;
}

/* Right border */
.i2 {
    padding:0 12px 0 0;
    background:url(../images/borders.png) repeat-y 100% 0;
}

/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
    display:block;
    margin:0;
    padding:1px 10px;
    background:#fff;
}

/* Make the content wrapper auto clearing so it will contain floats (see http://positioniseverything.net/easyclearing.html). */
.i3:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.i3 {display:inline-block;}
.i3 {display:block;}
/* Default CSS ends here */