/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 css template created by Lucas Deaver
 © 2010 Walter Cameron Advertising

 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

* { margin:0; padding:0; outline:none;}
.clearAll { clear:both; font-size:1px; line-height:1px; height:.01em;}



/* -- shell -- */
body { font-family:Arial, Helvetica, sans-serif; background-color:#165468; background:#165468 url(../images/back-header-short.png) repeat-x;}

#content-outer, #header-outer, #footer-outer { }
#content-inner, #header-inner, #footer-inner, #hero { margin:0 auto; width:980px; position:relative;}

#header-outer             { } 
.header #header-inner     { height:160px;}
.headerNav        		  { top:118px; height:42px;}
 
#content-outer            { }
#content-inner            { background:url(../images/back-contentWht.png) repeat-y;}
#content-inner .top       { width:980px; height:26px; background:url(../images/back-hero-bot.png) no-repeat;}
#content-inner .bot       { height:26px; background:url(../images/back-contentWhtBot.png) no-repeat; clear:both;}


/* -- content -- */
.block-1                { float:left; display:inline; width:580px;}
.block-1 .content       { margin:10px 0 30px 64px; width:512px;}

.block-2                { float:right; display:inline; margin:10px 26px 20px 0;}
.block-2 .content p { color:#b0d0e1;}
.block-2, .block-2 .content { width:358px;}



/* -- sidebars -- */
.block-3           { margin:0; position:relative;/* border:1px solid red;*/}

.block-3 .top3     { height:15px; background:url(../images/sidebar-top.png) no-repeat; font-size:1px;}
.block-3 .bot3     { height:19px; background:url(../images/sidebar-bot.png) no-repeat; font-size:1px;}
.block-3 .content3 { background:url(../images/sidebar-mid.png) repeat-y; padding:10px 82px 0 32px;}
.block-3 p         { }
.block-3 h4        { color:#b0d0e1;}
.block-3 img       { margin:0 0 8px 0;}
.block-3 .icon     { position:absolute; width:82px; height:100px; top:15px; right:0; background-repeat:no-repeat;}

.block-4                { width:330px; background:url(../images/ico-dividerFadeLine.png) top right no-repeat; margin:0 0 0 26px;}
.block-4 .top4          { }
.block-4 .bot4          { width:330px; height:64px; background:url(../images/ico-dividerFadeLine.png) top right no-repeat;}
.block-4 .content4      { }
.block-4 h4             { color:#e4d07f; padding:30px 90px 30px 60px; background:url(../images/ico-carrot-GreenArrow.png) 15px 24px no-repeat;}
.block-4 p              { }
.block-4 strong         { font-size:20px; color:#FFFFFF;}



/* -- thumbnail slideshow --*/
.gallery        { margin:0 0 0 30px;}
.gallery p      { padding:8px 20px 10px 20px; clear:both;}
.thumbs         { margin:0 0 10px 11px;}
.thumbs a       { float:left; height:83px; width:83px; border:1px solid #38849c; margin:0 0 9px 9px;}
.thumbs a:hover { border:1px solid #FFF;}
.thumbs a img   { border:none;}


/* -- home page - put class "home" in body tag to put these in effect--*/
body.home                  { background:#165468 url(../images/back-header-tall.png) repeat-x;}
.home #content-inner .top  { width:980px; height:26px; background:url(../images/back-hero-botTeal.png) no-repeat;}
.home #hero, .home #hero .content, .home #heroLeft, .home #heroRt  { height:300px;}
.home #hero .content img {margin:6px 0 0 20px;}
.home #content-inner       { background:none;}
.home #content-inner .bot  { display:none;}
.home .block-1             { float:right; width:600px;}
.home .block-2             { float:left; width:320px;}
.home .block-1 .content    { margin:10px 45px 30px 0; width:550px;}
.home .block-2 .content    { margin:10px 0 20px 45px; width:300px;}
.home p         { color: #b0d0e1;}
.home h1        { color: #e4d07f;}
.home h2        { color: #b0d0e1;}
.home h3        { color: #e4d07f;}
.home h4        { color: #b0d0e1;}
.home ul        { color: #b0d0e1;}



/* -- hero -- */
#hero, #heroLeft, #heroRt { height:235px;}
.Hheight-1, .Hheight-1 #heroRt, .Hheight-1 #heroLeft  { height:300px;}
.Hheight-2, .Hheight-2 #heroRt, .Hheight-2 #heroLeft  { height:235px;}
#hero .content      { background:url(../images/back-hero-mid.png) repeat-y; padding:0 21px 0 21px;}
#heroLeft           { float:left; width:360px;/* margin-left:21px;*/ display:inline;}
#heroRt             { float:right; width:548px;/* margin-right:21px;*/ background-repeat:no-repeat; display:inline;}
#hero h1            { width:350px; color:#FFFFFF; text-align:left; font-size:40px; line-height:44px; padding:10px 20px 10px 34px; font-weight:normal; position:absolute; left:21px; bottom:0;}



/* -- footer -- */
#footer-outer                       { }
#footer-inner                       { clear:both;}
#footer-inner .content              { height:100px; margin:20px 0 0 0; padding:20px 40px 0 40px; background:url(../images/back-footer.png) no-repeat; color:#4c8e96;}
#footer-inner .content .block-1     { background:none; width:300px; float:left;}
#footer-inner .content .block-2     { background:none; width:540px; float:right;}
#footer-inner .content .block-2 p   { font-size:11px; line-height:13px; text-align:right; padding:0 0 6px 0; color:#4c8e96;}
#footer-inner .content .block-2 p a       { color:#63b9c3; text-decoration:none;}
#footer-inner .content .block-2 p a:hover { color:#a3e6ee; text-decoration:underline;}
.logo { float:left; vertical-align:top; margin:0 14px 0 0;}



/* -- header -- */
.header                              { }
.header #header-logo, #header-logo a { width:595px; height:57px;}
.header #header-logo                 { position:absolute; top:32px; left:52px; z-index:5; background:url(../images/logo-loop-loc-industrial.png) no-repeat;}
.header #header-logo a               { display:block;}
/*#header-tagline                    { }*/

#header-bar              { position:absolute; top:0; right:52px; height:41px; width:250px;}
/*#header-bar p          { color:#a2a2a2; font-size:12px; line-height:15px; text-align:right; padding:30px 90px 0 0;}
#header-bar p a          { color:#a2a2a2; text-decoration:none;}*/
a.cart       { width:127px; height:41px; background:url(../images/btn-viewCart.png) 0 0 no-repeat; float:right;}
a.cart:hover { background-position:0 -41px;}



/* -- navigation -- */
#main-nav-outer          { height:42px; position:absolute; z-index:1000; width:100%;}
#main-nav                { height:48px; margin:0 auto; width:980px; background:url(../images/back-navhero-top.png) no-repeat;}
#main-nav ul li          { list-style:none;}
#main-nav ul             { float:left; display:inline; position:relative;}
#main-nav ul h1          {font-weight:normal;margin:0;}
#main-nav ul a           { display:block; font-size:13px; letter-spacing:.02em; padding:8px 0 4px 15px; margin:0 20px 0 5px; color:#b8b8b8; text-decoration:none; text-transform:uppercase;}

#main-nav ul h1 a:hover  { background:url(../images/ico-navGlow.png) top center no-repeat; color:#FFFFFF;}
 
/*#main-nav ul ul 	     { left:0; top:34px; position:absolute; width:280px; border-left:1px solid #a27d3c; border-right:1px solid #a27d3c; border-bottom:1px solid #a27d3c;}
#main-nav ul:hover ul    { }
#main-nav ul ul li       { border-bottom:1px solid #2e2413; border-top:1px solid #a27d3c; background:#2d2312 url(../images/btn-brown-fat.png) 0 0 repeat-x; padding:6px;}		
#main-nav ul ul li:hover { background:#372a12 url(../images/btn-brown-thin.png) 0 -37px repeat-x; text-decoration:none;}	
#main-nav ul ul li a     { font-size:14px;}			
#main-nav span           { display:block; float:right;}*/



/* -- globals -- */
p         { font-size:13px; line-height:20px; color: #2c2c2c; padding-bottom:18px; letter-spacing:.02em;}
h1        { font-size:23px; line-height:26px; color: #b1812b; margin-bottom:4px;}
h2        { font-size:18px; line-height:20px; color: #2b778f; font-weight:normal; padding-bottom:6px;}
h3        { font-size:15px; line-height:18px; color: #b1812b; padding-bottom:3px;}
h4        { font-size:16px; line-height:22px; color: #2c2c2c; font-weight:normal; padding-bottom:16px; letter-spacing:.02em;}
h5        { }
ul        { color:#136680; padding-bottom:16px;}
li        { margin: 0 0 6px 6px; padding:0 0 0 14px; font-size:13px; line-height:20px; background:url(../images/ico-bullet.png) 0 6px no-repeat; list-style:none;}

ul strong { color:#b1812b;}
h1 span, h3 span { color:#da8d03;}

p, #content-inner h1, h2, h3, h4, #content-inner ul { position:relative; z-index:2;}
.block-1 p strong { font-size:15px; color:#2b778f;}
h3 strong         { font-size:18px; color:#da8d03;}

p a, li a { color:#ebd990;}
a         { font-family:Arial, Helvetica, sans-serif; letter-spacing:.02em;}
a:link    { color:#3579b3; text-decoration:none;}
a:visited { color:#3579b3; text-decoration:none;}
a:hover   { color:#2385da; text-decoration:underline;}
a:active  { color:#2385da; text-decoration:underline;}

.color-1   { color:#2b778f;}/*teal*/
.color-2   { color:#b1812b;}/*gold*/
.color-3   { color:#e4d07f;}/*yellow*/
.color-4   { color:#b0d0e1;}/*lt blue*/
.color-wht { color:#fff;}

.TalignRight  { text-align:right}
.TalignCenter { text-align:center;}
.floatMe      { float:left; margin-right:8px; display:block;}
.ital         { font-style:italic;}

.rule-1outer  { position:relative; margin: 12px 0 40px 0; clear:both; height:1px;}
.rule-1inner  { position:absolute; height:56px; width:532px; top:0; left:0; background:url(../images/ico-dividerFade-lt.jpg) no-repeat; z-index:1;}

.rule-2       { border-bottom:1px solid #2b778f; margin-bottom:12px; font-size:1px; width:100%; height:6px;}

img.alignLeft  { float:left; margin:0 20px 10px 0;}
img.alignRight { float:right; margin:0 0 10px 20px;}

.specs   { margin-bottom:16px;}
.specs p { border-top:1px solid #2b778f; padding:6px 0 6px 0;}

.banner  { float:right; margin:10px 34px 0 0;}

.formErrorField   { background:#ffa3a3; /* border:4px solid #CC0000;*/}
.formErrorText    { color:#CC0000; padding:2px 0 4px 10px; font-weight:bold;}

.threeBoxs  { width:33%; float:left; text-align:center;}
.threeBoxs img { margin:0 0 5px 0; border:3px solid #2b778f;}



/* -- buttons -- */
.btn-main                 { margin:5px 0 10px 10px; float:right; display:inline;}
.btn-main a               { text-decoration:none;}
.btn-main a, .btn-main span, .btn-main a b { display:block; height:30px; float:left; background-repeat:no-repeat;}
.btn-main a:hover b, .btn-main a:active b, .btn-main a:hover span, .btn-main a:active span { background-position: 0 -36px; cursor:pointer;}

.btn-main a span          { background-image:url(../images/btn-mainR.png); width:10px; height:36px; display:block; float:left;}
.btn-main a b             { color:#b0d0e1; font-size:13px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; text-transform:uppercase; padding:6px 8px 0 20px; background-image:url(../images/btn-mainL.png);}

/* -- Green Button -- */
.btn-green                { margin:5px 0 10px 10px; float:right; display:inline;}
.btn-green a              { text-decoration:none;}
.btn-green a, .btn-green span, .btn-green a b { display:block; height:33px; float:left; background-repeat:no-repeat;}
.btn-green a:hover b, .btn-green a:active b, .btn-green a:hover span, .btn-green a:active span { background-position: 0 -41px; cursor:pointer;}

.btn-green a span         { background-image:url(../images/btn-greenR.png); width:10px; height:41px; display:block; float:left;}
.btn-green a b            { color:#FFF; font-size:13px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; text-transform:uppercase; padding:8px 8px 0 20px; background-image:url(../images/btn-greenL.png);}

/* -- Submit Button -- */
.submit        { display:block; height:36px; width:96px; background: url(../images/btn-submit.png) 0 0 no-repeat; border:none;}
.submit:hover  { background: url(../images/btn-submit.png) 0 -36px no-repeat; cursor:pointer;}

/* -- AddCart Button -- */
.addtocart        { display:block; height:41px; width:137px; background: url(../images/btn-addToCart.png) 0 0 no-repeat; border:none;}
.addtocart:hover  { background: url(../images/btn-addToCart.png) 0 -41px no-repeat; cursor:pointer;}


/* -- forms -- */
.formArea            { }
.formCol-1, .formCol-2 { padding:6px 4px; float:left;}
.formCol-1            { width:150px; text-align:right;}
.formCol-2            { width:312px;}
.formCol-2 span          { float:left;}
.formArea span          { font-size:12px; line-height:14px; padding:6px 0 0 0; display:block;}
.formArea input, .formArea textarea { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:14px;}
.form-field          { border:1px solid #999999; padding:5px;}
.form-fieldfull      { width:300px}
.form-fieldhalf      { width:240px}
.form-fieldMid       { width:70px;}
.form-fieldsmall     { width:20px;}
.formCol-2 textarea  { height:60px;}
.formDrop            { margin:4px 15px 0 0;}
input                { float:left; margin-right:15px;}
select               { margin:1px 20px 0 0; float:left;}
option               { padding:2px 6px;}


/* -- feature -- */
.feature      { width:100%; background:url(../images/ico-dividerFadeLine.png) top center no-repeat; padding:40px 0 40px 0;}
.feature img  { float:left;}
.feature h3, .feature p { padding-left:290px;}

/* -- home page icons -- */
.iconButton, .iconButton a { float:left; width:130px; height:132px; display:inline;}
.iconButton         { margin:0 6px 15px 0;}
.iconButton a       { background-repeat:no-repeat; background-position:0 0;}
.iconButton a:hover { background-position:0 -132px;}


/* -- cart tables ---*/
table           { width:100%; border-bottom:2px solid #2b778f; margin-bottom:30px;}
table td        { padding:5px;/* border-bottom:1px solid #2b778f;*/}
table p         { margin:0; padding:0;}
.borderBot-1    { border-bottom:1px solid #2b778f;}
.borderBot-2    { border-bottom:3px solid #2b778f;}
.price p strong { font-size:20px; color:#2b778f;}
.price          { width:140px;}