/* CSS Template by Juuce Interactive �2008 
   Author: Samuel Larcher
*/   




/* ----------------  INITIAL START ------------- */

* { margin: 0px; padding: 0px; }

h1 { padding-bottom: 10px;}
h2 { padding-bottom: 7px;}

h3, h4, h5 { padding-bottom: 5px;}
p, ul { padding-bottom: 15px; text-align: justify; }

form label button { cursor: pointer; }

/* Special form resets and/or styles look in forms.css */

ul li { list-style: none; text-align: justify; }

/* ----------------  INITIAL END ------------- */

/* ----------------  FLASH REPLACEMENT SPECIFIC ------------- */
/* this is to zerorise margin padding when using flash replacement and headline is on top of an other one */
.content .headlineTop { padding: 0; margin: 0; }

/* ----------------  FONT  ------------- */

h1 { font: normal bold 24px Arial, Helvetica, sans-serif; color: #0397bf; }
h2 { font: normal bold 15px Arial, Helvetica, sans-serif; color: #555555; }
h3 { font: normal bold 12px Arial, Helvetica, sans-serif; color: #0397bf; }
h4 { }
a { text-decoration: underline; color: #0397bf;  }
a:hover { text-decoration: none; }

.specialH2 { background: url(../images/basics/underline.png) 0px 18px repeat-x; }
.specialH3 { padding: 0; }

/* ----------------  BASICS  ------------- */

body { background: #f3f3f3 url(../images/basics/bg.png) left top repeat-x; font: normal normal 12px Arial, Helvetica, sans-serif; color: #747474; line-height: 15px;  }

#mainWrapper { width: 550px; margin: 0 auto 0 auto; background: white url(../images/basics/mainwrapper_bg.png) left top repeat-x; padding: 15px 100px 50px 100px; }
#topWrapper { height: 62px; }
#logo { display: block; background: url(../images/basics/logo.png) left top no-repeat; width: 286px; height: 28px; position: relative; top: 20px; }
.featuredElement { background: url(../images/basics/feature_bg.png) left top no-repeat; width: 233px; height: 61px; }
.leftColumn { padding-top: 9px; width: 412px; }
.rightColumn { padding-top: 11px; width: 134px; }

.miniImageOne { padding-top: 5px; }

.content ul li, .leftColumn ul li { background: url(../images/basics/listimage.png) 0px 3px no-repeat; padding-left: 15px; padding-bottom: 5px; line-height: 18px; }


/* ----------------  BOXES FEATURED CONTAINER  ------------- */
.paraBlue { background: url(../images/basics/paraBlue.png) left top no-repeat; width: 405px; margin-top: 5px; padding-top: 5px; }
.paraBlue p { margin: 0 auto 0 auto; width: 310px; }

#paraNavigation { width: 315px; margin: 0 auto 0 auto; }
#paraNavigation a { color: #0397bf; font: normal bold 13px Arial, Helvetica, sans-serif; text-decoration: none; }
#paraNavigation a:hover { color: #007c9e; }
#paraNavigation li { display: inline; background: none; padding-left: 0; }
#paraNavigation .corporate, #paraNavigation .testimonials { margin-left: 15px; }

.contactContainer { background: url(../images/basics/contact_bg.png) left top repeat-y; width: 352px; padding-top: 10px; }
#contactTable .firstColumn {  width: 100px; text-align: right; color: white; font: normal normal 11px Arial, Helvetica, sans-serif; }
#contactTable .secondColumn { padding: 0 18px 5px 23px;  }

.inputMiddle { background: url(../images/basics/contact_input_middle.png) left top repeat-x; height: 26px; }
.inputLeft { background: url(../images/basics/contact_input_left.png) left top no-repeat; height: 26px; }
.inputRight { background: url(../images/basics/contact_input_right.png) right top no-repeat; height: 21px; padding: 5px 0 0 5px; }

.inputfield { background: none; border: none; font: normal normal 11px Arial, Helvetica, sans-serif; width: 100%; height: 21px; padding: 2px 0 0 0; }

.textField { background: url(../images/basics/textfield.png) left top no-repeat; width: 202px; padding: 5px; }
.textArea { background: none; border: none; font: normal normal 11px Arial, Helvetica, sans-serif; width: 95%; height: 80px;  }

.faqs_blue_middle { background: url(../images/basics/faqs_blue_middle.png) left top repeat-y; width: 312px; }
.faqs_blue_top { background: url(../images/basics/faqs_blue_top.png) left top no-repeat; width: 312px; }
.faqs_blue_bottom { background: url(../images/basics/faqs_blue_bottom.png) left bottom no-repeat; width: 312px; }

.faqs_gray_middle { background: url(../images/basics/faqs_gray_middle.png) left top repeat-y; width: 312px; }
.faqs_gray_top { background: url(../images/basics/faqs_gray_top.png) left top no-repeat; width: 312px; }
.faqs_gray_bottom { background: url(../images/basics/faqs_gray_bottom.png) left bottom no-repeat; width: 312px; }

.faqs_blue_middle a, .faqs_blue_middle a:hover { display: block; font: italic normal 13px Arial, Helvetica, sans-serif; color: white; text-decoration: none; padding: 5px; }
.faqs_gray_middle p { padding-left: 5px; padding-top: 5px; padding-bottom: 8px; width: 95%; }
.faqs_blue_wrapper { padding-bottom: 5px; }
.faqs_gray_wrapper { padding-bottom: 15px; }

.plaquesTitle { padding: 0 0 8px 0; font: normal bold 11px Arial, Helvetica, sans-serif; }
#deliveryCostTable { width: 400px; margin-bottom: 15px; }
#deliveryCostTable tr td { border: 1px solid #eee; background: #f8f8f8; font: normal normal 11px Arial, Helvetica, sans-serif; color: #747474; padding: 2px 0 2px 5px; }
#deliveryCostTable .first td, #deliveryCostTable .blank td { border: none; background: none; }
#deliveryCostTable .darker { background: #eee; }

.table_standard { background: url(../images/basics/table_bg.png) left top repeat-y; font: normal normal 11px Arial, Helvetica, sans-serif; color: #FFF; }
.table_standard .inputfield { background: url(../images/basics/inputfield.png) left top no-repeat; height: 30px; width: 237px; padding-left: 8px;  }
.table_standard .input { background: none; border: none; font: normal normal 11px Arial, Helvetica, sans-serif; color: black;; width: 200px; padding-bottom: 4px; }
.table_standard .textarea_bg { background: url(../images/basics/textarea_bg.png) left top no-repeat; width: 204px; height: 108px; padding-left: 8px; }
.table_standard .textarea { background: none; border: none; width: 200px; height: 90px; font: normal normal 11px Arial, Helvetica, sans-serif; color: black; }
.tableLeft { padding-top: 7px; }
.droppi { width: 100px; font: normal normal 11px Arial, Helvetica, sans-serif; color: black; }
.droppi option { padding: 1px; }
.securityCode { background: url(../images/basics/securityBG.png) left top no-repeat; width: 85px; height: 30px; padding-left: 8px; }
.orderDetails td { border: 1px solid white; padding: 3px 10px 3px 10px; }
.orderDetails { font: normal normal 11px Arial, Helvetica, sans-serif; background: #f3f3f3; }
.orderDetails_first { background: #909090; color: white; }
.orderDetails .dark { background: #909090; color: white; }

.gold { background: url(../images/basics/gold.jpg) left top no-repeat; height: 47px; width: 49px; }
 
/* ----------------  BUTTON AND FORMS  ------------- */

.buttonMiddle_left { background: url(../images/basics/button_middle.png) left top repeat-x; height: 22px; }
.buttonLeft_left { background: url(../images/basics/button_left.png) left top no-repeat; height: 22px; }
.buttonRight_left { background: url(../images/basics/button_right.png) right top no-repeat; height: 22px;  }
.buttonMiddle_left .ankerButton { display: block; font: normal normal 13px Arial, Helvetica, sans-serif; color: white; text-decoration: none; padding: 3px 0 0 23px; }
.buttonMiddle_left .submitButton { display: block; font: normal normal 13px Arial, Helvetica, sans-serif; color: white; text-decoration: none; background: none; border: none; cursor: pointer; height: 22px; width: 100%; }
.buttonMiddle_left .submitButton span { position:absolute;margin-left: 10px; margin-top:10px; }
.buttonMiddle_left .ankerButton:hover, .buttonMiddle_left .submitButton:hover { color: black; }

.buttonMiddle_right { background: url(../images/basics/button_middle.png) left top repeat-x; height: 22px; }
.buttonLeft_right { background: url(../images/basics/button_left_right.png) right top no-repeat; height: 22px; }
.buttonRight_right { background: url(../images/basics/button_right_right.png) left top no-repeat; height: 22px;  }
.buttonMiddle_right .ankerButton { display: block; font: normal normal 13px Arial, Helvetica, sans-serif; color: white; text-decoration: none; padding: 3px 0 0 10px; }
.buttonMiddle_right .submitButton { display: block; font: normal normal 13px Arial, Helvetica, sans-serif; color: white; text-decoration: none; background: none; border: none; cursor: pointer; height: 22px; width: 100%; }
.buttonMiddle_right .submitButton span { margin-left: -10px; }
.buttonMiddle_right .ankerButton:hover, .buttonMiddle_right .submitButton:hover { color: black; }

/* ----------------  MAIN NAVIGATION  ------------- */
#designYourFrame { display: block; overflow: hidden; background:url(../images/navigation/designYourFrame.png) left top no-repeat; height: 15px; width: 199px; margin: 7px auto 0 auto; }	
#requestAquote { display: block; overflow: hidden; background: url(../images/navigation/requestAquote.png) left top no-repeat; width: 157px; height: 16px; margin: 5px auto 0 auto; }
#requestAquote:hover, #requestAquote.selected { background-position: 0px -16px; }
#designYourFrame:hover, #designYourFrame.selected { background-position: 0px -15px; }

#mainNavigation { padding: 0; margin: 0; }
#mainNavigation .home { display: block; overflow: hidden; background: url(../images/navigation/home.png) 0px -15px no-repeat; width: 125px; height: 15px;  }
#mainNavigation .about { display: block; overflow: hidden; background: url(../images/navigation/about.png) 0px -15px no-repeat; width: 125px; height: 15px; }
#mainNavigation .plaques { display: block; overflow: hidden; background: url(../images/navigation/plaques.png) 0px -15px no-repeat; width: 125px; height: 15px; }
#mainNavigation .newProducts { display: block; overflow: hidden; background: url(../images/navigation/newProducts.png) 0px -15px no-repeat; width: 125px; height: 15px; }
#mainNavigation .contact { display: block; overflow: hidden; background: url(../images/navigation/contact.png) 0px -15px no-repeat; width: 125px; height: 15px; }

#mainNavigation .home:hover, #mainNavigation .about:hover, #mainNavigation .plaques:hover, #mainNavigation .newProducts:hover, #mainNavigation .contact:hover, #mainNavigation .selected { background-position: 0px 0px;  }

/* ----------------  FOOTER  ------------- */
#footer li { display: inline; }
#footer li a { font: normal normal 11px Arial, Helvetica, sans-serif; color: #636363; text-decoration: none; padding-bottom: 5px; }
#footer li a:hover { color: #007c9e; }
#footer .copyright { margin-left: 10px; }
#footer .terms { background: url(../images/basics/icon_terms.png) left top no-repeat; padding-left: 15px;  }
#footer .privacy { background: url(../images/basics/icon_privacy.png) left top no-repeat; padding-left: 15px; }
#footer .faqs { background: url(../images/basics/icon_faqs.png) left top no-repeat; padding-left: 15px; }
#footer .juuce { color: #9c9c9c; margin-left: 40px;}
#footer .terms, #footer .privacy, #footer .faqs { margin-left: 10px;  }
.footerImage { background: url(../images/basics/footerImage.png) left top no-repeat; width: 549px; height: 31px; }


/* ----------------  additions  ------------- */

#freePostage { position: absolute; margin: 70px 0 0 680px; display: block; }
#freePostage img { border: none; }



/* ----------------  SPECIALS  ------------- */

.left { float: left; }
.right { float: right; }
.clear { clear: both; }

.gray { color: #5d5d5d; }
.blue { color: #0397bf !important; }
.black { color: black; }

.fontSize10 { font-size: 10px; }
.fontSize11 { font-size: 11px; }
.fontSize12 { font-size: 12px; }
.fontSize13 { font-size: 13px; }
.fontSize14 { font-size: 14px; }

.bold { font-weight: bold; }
.normal { font-weight: normal; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }

.backgroundYellow { background: yellow; }
.backgroundRed { background: red; }
.backgroundSilver { background: silver; }
.backgroundBlack { background: black; }
.backgroundBlue { background: blue; }
.backgroundWhite { background: white; }

.padding_B_5px { padding-bottom: 5px; }
.padding_B_10px { padding-bottom: 10px; }
.padding_B_15px { padding-bottom: 15px; }
.padding_L_5px { padding-left: 5px; }
.padding_L_10px { padding-left: 10px; }
.padding_L_15px { padding-left: 15px; }

.margin_L_46px { margin-left: 46px; }

.posRelative { position: relative; }

.displayNone { display: none; }



#flash { width: 300px; height: 78px; position: absolute; margin-top: -16px; }