/*
Theme Name: ASP Plastics
Theme URI: http://juuce.com/
Description: Theme designed for ASP Plastics from <a href="http://juuce.com">Juuce Creative</a>.
Version: 1
Author: Samuel Larcher
Author URI: http://juuce.com
*/

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

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

h1 { padding-bottom: 10px; }
h2 { padding-bottom: 7px; padding-top: 20px;}
h3, h4, h5 { padding-bottom: 5px;}
p, ul { padding-bottom: 10px; }
img { border: none; }
form label button { cursor: pointer; cursor: hand; }

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

ul li { list-style: none; }

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




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

h1 { font: normal bold 23px "Trebuchet MS", Arial, Helvetica, sans-serif; color: white; }
h2 { font: normal bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif; color: white; }
h3 { font: normal bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif; color: white; padding-bottom: 10px; }
h4 { }
a { color: #0CF; }
a:hover { text-decoration: none; }

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

body { background: #3c3c3c url(../images/basics/bg_grad.jpg) left top repeat-x; font: normal normal 11px Arial, Helvetica, sans-serif; color: white; line-height: 18px; }
#gradientEffect { background: url(../images/basics/bg_main.jpg) center 100px repeat-x; }


#mainWrapper { width: 870px; margin: 0 auto 0 auto; }
#topBanner { height: 110px; }
#fotoBanner { height: 291px; overflow: hidden; }
#fotoBanner img { position: absolute; margin-left: 25px; z-index: 2; }
#contentWrapper { }
#contentWrapper .leftCol { float: left; width: 205px; padding-left: 40px; padding-top: 20px;  }
#contentWrapper .rightCol { float: right; width: 576px; padding-right: 25px; padding-top: 15px; }

#contentWrapper .history ul li { background: none; padding-left: 0; }

#contentWrapper .rightCol .contentSub { background: url(../images/basics/subcontent_top.jpg) left top no-repeat; }

#contentWrapper .rightCol .contentSubBottom { background: url(../images/basics/subcontent_bottom.jpg) left bottom no-repeat; min-height:550px; height:auto !important; height:550px; padding-bottom: 30px; }
#contentWrapper .rightCol .contentSubBottom h1 { background: url(../images/basics/subcontent_header_bg.gif) left top no-repeat; width: 562px; height: 44px; overflow: hidden; padding-left: 15px; padding-top: 7px; } 

#contentWrapper .rightCol .contentSubBottomBoxes h1 { background: url(../images/basics/subcontent_header_bg.gif) left top no-repeat; width: 562px; height: 44px; overflow: hidden; padding-left: 15px; padding-top: 7px; } 



/* ----------------  BOXES FEATURED CONTAINER  ------------- */
#headline_home { position: absolute; margin: 35px 0 0 265px; }
#award { position: absolute; margin-left: 730px; margin-top: 22px; }
#logo { position: absolute; z-index: 500; }

.testimonials { }
.testimonials .testimonialsContent { background: url(../images/basics/testimonials_bg.gif) left top no-repeat; padding: 15px; height: 240px; }
.testimonials .testimonialsContent .quote, .testimonials .testContent { font-style: italic; color: #CACACA; line-height: 18px; }
.testimonials .blogContent { padding: 15px; background-color: #2F2F2F; }

#sidebar .testimonialsContent .logo { display: none; }
#sidebar .testimonialsContent .testContent { height: 210px; padding: 0px; }
#sidebar .testimonialsContent .testContent .textContainer { width: auto; padding: 0; height: 190px; width: 175px; overflow: auto; }

.newsletter { }
.newsletter p { padding-bottom: 3px; }
input.wpsb_form_txt { background: none; border: none; background: url(../images/basics/newsletter_input.gif) left top no-repeat; width: 199px; height: 25px; font: normal normal 12px Arial, Helvetica, sans-serif; color: #333; padding: 5px 0 0 10px; }
.newsletter .agree { padding-top: 10px; }
.newsletter .agree p { padding-left: 5px; width: 170px; }
button.wpsb_form_btn { font: normal normal 12px Arial, Helvetica, sans-serif; background: none; border: none; background: url(../images/basics/button_right.gif) right top no-repeat; height: 32px; padding-right: 16px; padding-left: 8px; cursor: pointer; color: white; padding-top: 0; }
.buttonLeft { background: url(../images/basics/button_left.gif) left top no-repeat; height: 32px; padding-left: 4px; margin-top: 5px; } 
button span { position: relative; top: -2px; }

.testimonials .buttonLeft { position: absolute; margin-top: 180px; }
.testimonials .buttonLink { display: block; font: normal normal 12px Arial, Helvetica, sans-serif; background: none; border: none; background: url(../images/basics/button_right.gif) right top no-repeat; height: 25px; padding-right: 16px; padding-left: 8px; cursor: pointer; color: white; padding-top: 0; text-align: center; width: 80px; padding-top: 7px; text-decoration: none; }



.contentModule { background: url(../images/basics/module_base.png) left top no-repeat; width: 576px; height: 171px; }
.contentModule h1 { background: url(../images/basics/module_header_bg.png) left top no-repeat; width: 110px; height: 25px; font-size: 17px; text-align:center; padding-top: 5px; position: absolute; padding-bottom: 0; z-index: 500; }
.contentModule .image { width: 316px; height: 138px; position: relative; left: 15px; top: 15px; float: left; }
.contentModule .image.text { padding: 15px; width: 286px; height: 103px; padding-top: 20px; }

.contentModule .image img { position: absolute; z-index: 5; }

.contentModule .image img.specialImage { margin-top: -7px; }

.contentModule .description { width: 200px; float: right; line-height: 14px; padding-top: 13px; margin-right: 15px; height: 150px; overflow: auto; }
.contentModule .description p { padding-bottom: 5px; }
.contentModule .description ul li { padding-bottom: 2px; padding-left: 15px; background: url(../images/basics/list_dot.png) 0px 4px no-repeat; }
.contentModule .description ul { line-height: 14px; }

/* styles for content area of subpages */

.subContentPadding { padding: 18px; padding-top: 0; font-size: 12px; }
.subContentPaddingBoxes { padding: 18px; padding-bottom: 8px; padding-top: 0; font-size: 12px; }

.subContentPadding dl { clear: both; width: 500px; }
.subContentPadding dd, .subContentPadding dt { float: left; }
.subContentPadding dt { }
.subContentPadding dd { padding-left: 10px; width: 450px; padding-bottom: 10px; color: #CCC; }

.awards { color: #ccc; line-height: 22px; }
.awards .awardsName { font-size: 16px; font-weight: bold; color: white; padding-bottom: 10px; }
.awards .awardsOrg { padding-bottom: 10px; }


.contentSub .subContentPadding ul li { padding-bottom: 8px; padding-left: 15px; background: url(../images/basics/list_dot.png) 0px 4px no-repeat; }
.contentSub .subContentPadding .relevantLinks li, .rightCol .contentSub #accordion ul li { padding-bottom: 2px; }
.contentSub .contentModule .description ul li { padding-bottom: 8px; }

.contentModule.testimonials .logo { float: left; width: 150px; height: 150px; position: relative; left: 18px; top: 18px; }
.contentModule.testimonials .textContainer { width: 380px; height: 103px; padding: 15px; padding-top: 0; float: left; position: relative; top: 15px; overflow: auto; }
.contentModule.testimonials .quote, .contentModule.testimonials .who { padding-bottom: 10px; }
.contentModule.testimonials .who { color: white; }

.contentSub ul.imagelist li { background: none; padding: 0; display: inline; }
.contentSub ul.imagelist li a { padding: 0 10px 10px 0; }

.contentModule ul { line-height: 18px; }

.flashvideo { height: 320px !important; }

/* ----------------  BUTTON AND FORMS  ------------- */

/* ----------------  MAIN NAVIGATION  ------------- */
/* #navigation { height: 35px; position: absolute; margin-left: 205px; margin-top: 75px; z-index: 400; } */
#navigation { height: 35px; position: absolute; margin-left: 232px; margin-top: 75px; z-index: 400; }
#navigation ul { padding: 0; margin: 0; }
#navigation ul li { float: left; height: 35px; }
#navigation ul li a { display: block; float: left; height: 35px; overflow: hidden; text-decoration: none; cursor: pointer; cursor: hand; }

#navigation ul li a.home { background: url(../images/navigation/home.jpg) left top no-repeat; width: 77px; }
#navigation ul li a.about { background: url(../images/navigation/about.jpg) left top no-repeat; width: 79px; }
#navigation ul li a.services { background: url(../images/navigation/services.jpg) left top no-repeat; width: 67px; }
#navigation ul li a.products { background: url(../images/navigation/products.jpg) left top no-repeat; width: 69px; }
/* #navigation ul li a.system { background: url(../images/navigation/systems.jpg) left top no-repeat; width: 94px; } */
#navigation ul li a.system { background: url(../images/navigation/systems.jpg) left top no-repeat; width: 66px; }
#navigation ul li a.testimonials { background: url(../images/navigation/testimonials.jpg) left top no-repeat; width: 88px; }
#navigation ul li a.faqs { background: url(../images/navigation/faqs.jpg) left top no-repeat; width: 43px; }
#navigation ul li a.career { background: url(../images/navigation/career.jpg) left top no-repeat; width: 56px; }
#navigation ul li a.contact { background: url(../images/navigation/contact.jpg) left top no-repeat; width: 66px; }

#navigation ul li a:hover, #navigation ul li a.selected { background-position: 0px -35px; }

/* ----------------  SUB NAVI FIRST LEVEL ---------------  */

#navigation .mainNav li ul { display: block; width: 210px; position: absolute; display: none; margin-top: 35px; text-decoration: none; padding: 10px 0 10px 10px; clear: both; float: none; background: url(../images/navigation/nav_trans.png) left top repeat; z-index: 500; }
#navigation .mainNav li ul li { display: block; width: 198px; margin-left: 0px; margin-bottom: 2px; padding: 0; height: 27px; }


#navigation .mainNav li:hover ul, #navigation .mainNav li.over ul { display: block; }
#navigation .mainNav li ul li a, #navigation .mainNav li ul li a:hover { position: relative; z-index: 100; width: 190px; height: 22px; overflow: hidden; padding: 0; padding-left: 8px; padding-top: 5px; font: normal normal 12px Arial, Helvetica, sans-serif; color: white; }
#navigation .mainNav li ul li a { background: url(../images/navigation/subnav_bg.jpg) left top no-repeat; }
#navigation .mainNav li ul li a:hover { background-position: 0px -27px; }

/* ----------------  FOOTER  ------------- */
#footer { background: url(../images/basics/footer_bg.gif) left top no-repeat; width: 806px; height: 70px; margin: 25px auto 0 auto; }
#footer ul { padding: 15px 0 0 15px; width: 500px; float: left; }
#footer .copyright { width: 230px; float: right; height: 30px; padding-top: 15px; color: #616161; }
#footer .copyright .juuce { position:absolute; margin-top: -3px; }


#footer ul li { display: inline; color: #616161; }
#footer ul li a, #footer .copyright a { color: #616161; text-decoration: none; }

/* ------------------ ACCORDION ------------------- */
#accordion .ui-accordion-content { background: #575757; padding: 15px; overflow: hidden; }
#accordion .ui-accordion-header { background: url(../images/basics/accordion_header_bg.gif) left top no-repeat; padding: 6px 0 11px 15px; }
#accordion .ui-accordion-header:hover { cursor: pointer; }

.googleMap { color: black !important;}

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

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

.gray { color: #5d5d5d; }

.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; }

.posRelative { position: relative; }

.displayNone { display: none; }


img.alignright {float:right !important; }
img.alignleft, p.alignleft {float:left !important; }
img.aligncenter {display: block !important; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}