/* Schalk Burger - www.schalkburger.za.net */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }

body {
background:#eeeeee url(images/bgr.png);
font-size:62.5%;
font-family:Arial, sans-serif;
}

#wrap {
width:909px;
margin:0 auto;
height:100%;
}

#menutop {
width:889px;
height:52px;
margin:0 auto;
background:url(images/menutop.jpg) no-repeat;
text-align:center;
}

a:link, a:visited , a:active{
color:#0B5A6B;
}

a:hover {
text-decoration:none;
color:#06323C;
}

#menutop a {
font-weight:bold;
color:#a5c7d2;
text-decoration:none;
}

#menutop a:hover {
color:#fff;
text-decoration:none;
}

#menutop ul {
padding:15px 0 0 0;
font-weight:bold;
color:#a5c7d2;
font-size:1.4em;
}

#menutop ul li {
display:inline;
padding-right:25px;
}

#menutop ul li.current{
color:#fff;
}

#content_top {
background:url(images/content_top.jpg) top center no-repeat;
height:29px;
}

/* Content start */

#content {
background:url(images/content.jpg) top center repeat-y;
margin:0 auto;
height:100%;
}

#header {
width:870px;
height:261px;
background:url(images/header.jpg) no-repeat;
margin:0 auto;
position:relative;
}

#header h1 {
color:#000;
position:absolute;
font-size:1.5em;
line-height:1.4em;
left:50px;
bottom:60px;
}

#header_small {
width:859px;
height:149px;
background:url(images/header_small.jpg) no-repeat;
margin:0 auto;
position:relative;
}

#header_small h1 {
color:#000;
position:absolute;
font-size:1.5em;
line-height:1.4em;
left:215px;
bottom:40px;
}

#header_small img {
position:absolute;
right:20px;
bottom:50px;
}


#subheader {
width:863px;
height:167px;
margin:0 auto;
background:url(images/subheader.jpg) no-repeat;
position:relative;
}

#subheader h1 {
color:#357e87;
font-size:1.8em;
position:absolute;
left:50px;
top:20px;
}

#subheader ul {
position:absolute;
left:50px;
top:50px;
font-size:1.3em;
list-style-type:none;
}

#subheader li {
padding:7px 0 7px 18px;
background:url(images/subbullet.gif) no-repeat 0 0.5em;
}

#subheader img {
position:absolute;
right:50px;
top:50px;
}

#maincontent {
width:815px;
padding:30px 0 30px 25px;
margin:0 auto;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 1px solid #eaeaea;
overflow: auto;
}

#maincontent h2 {
color:#312179;
font-size:1.8em;
padding:10px 0 15px 0;
}

#maincontent h2 a {
color:#312179;
padding:10px 0 15px 0;
text-decoration:none;
}

#maincontent p {
color:#595858;
font-size:1.3em;
width:700px;
line-height:1.4em;
padding-bottom:20px;
}

#maincontent_left p {
color:#595858;
font-size:1.3em;
width:350px;
line-height:1.4em;
padding-bottom:20px;
}

#maincontent_left {
width:412px;
float:left;
}

#maincontent_left ul{
float:left;
margin:10px 0 35px 20px;
padding:0;
width:412px;
font-size:1.2em;
color:#595858;
list-style-type:none;
}
#maincontent_left ul li{
padding:7px 0 7px 18px;
background:url(images/checkbullet.gif) no-repeat 0 0.5em;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:172px;
}

#maincontent_right {
width:402px;
float:left;
}

#maincontent_right p {
color:#595858;
font-size:1.3em;
width:350px;
line-height:1.4em;
padding-bottom:20px;
}

#maincontent_right  ul{
font-size:1.2em;
list-style-type:none;
}

#maincontent_right ul li {
padding:7px 0 7px 25px;
background:url(images/checkbullet.gif) no-repeat 0 0.5em;
}

#content_bottom {
width:800px;
height:340px;
background:url(images/content_bottom.jpg) top center no-repeat;
padding:30px 0 0 85px;
margin:0 auto;
overflow: auto;
}

#content_bottom p {
color:#595858;
font-size:1.3em;
width:350px;
line-height:1.4em;
padding-bottom:20px;
}

#content_bottom p#proof {
color:#216e79;
font-size:1.8em;
font-weight:bold;
padding:40px 0 0 0;
}

#content_bottom h2 {
color:#217932;
font-size:1.8em;
padding:0 0 15px 0;
}

#content_bottom_left {
width:350px;
float:left;
}

#content_bottom_right {
width:402px;
float:left;
}

#SignUp p{
width: 150px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
height: 1%;
}

#SignUp label{
font-weight: bold;
float: left;
margin-left: -55px; /*width of left column*/
width: 50px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

#SignUp input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

#SignUp textarea{
width: 250px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

#content_foot {
background:url(images/content_foot.jpg) top center no-repeat;
height:29px;
}

#footer {
width:868px;
background:url(images/paymentgateways.jpg) right 15px no-repeat;
margin:0 auto;
color:#cecdcd;
height:90px;
position:relative;
font-size:1.5em;
line-height:1.6em;
padding:20px 0 0 35px;
}

#footer a {
color:#878585;
}

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

/* Additional */

.left {float: left;}
.right {float: right;}
img.left {margin: 0 30px 0 0px;}
img.right {margin: 0 10px 0 0px;}

.smicon {
float:left;margin:10px 10px 0 0;
}

#maincontent table.portfolio {
width:700px;
}

#maincontent table.portfolio p {
width:400px;
}

table.portfolio td {
vertical-align:top;
}

#order p, #contact_support p{
width: 150px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

ul#error {
list-style-type:none;
}

#maincontent_left ul#error li {
list-style-type:disc;
background:none;
float:none;
width:300px;
}

#order label, #contact_support label{
font-size:1.2em;
float: left;
margin-left: 0px; /*width of left column*/
width: 80px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
padding:8px 0;
}

#order  input[type="text"], #contact_support input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
margin:5px 0;
padding:5px 0;
}

#order textarea, #contact_support textarea{
width: 250px;
height: 150px;
}

#order .button, #contact_support .button {
margin-top:20px;
margin-left:280px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

body#orderform {
background:#fff;
}

#orderwrap {
padding:25px 0 0 30px;
width:410px;
height:450px;
background:#fff url(images/orderbgr.jpg) no-repeat;;
}

#orderwrap h1 {
color:#3B8A8F;
font-size:1.8em;
padding:0px 0 30px 0;
}

#orderwrap #order label {
font-size:1.2em;
}

#orderwrap ul#error {
list-style-type:none;
font-size:1.2em;
line-height:1.5em;
}

/* Highslide box custom */

.no-move .highslide-header .highslide-move, .highslide-credits , .highslide-credits a, #hsId0 {
display: none;
}

.highslide-footer .highslide-resize {
display:none;
}

.draggable-header .highslide-header .highslide-header {
background:#fff;
height:10px;
padding:10px 0px 0 0;
}

.draggable-header .highslide-header .highslide-close a {
padding:0;
position:absolute;
right:5px;
top:2px;
z-index:5;
}

.highslide-dimming {
background: black;
}

.highslide-container div .highslide-footer .highslide-resize  {
display:none;
}