html { min-height: 100%; margin-bottom: 1px; }
body { margin: 0px auto; font: 12px Arial,Tahoma; color: #000; background-color:#222; width: 100%; }
img { border: 0px; display: block; max-width: 100%; }
table { border-collapse: collapse; border-spacing:0px ; padding:0px ; }
table td { padding: 0px; vertical-align:top; }
a { text-decoration: none; color: #ae612a; }
a:hover { text-decoration: underline; color: #ddd; }
h1,h2,h3,h4{ margin: 0px 0px 10px 0px ; font-weight: bold; }
h1{ font-size: 20px; }
h2{ font-size: 16px; }
h3{ font-size: 14px; }
h4{ font-size: 12px; }
td.r{ text-align:right; }
input{
    color: black;
}
label{
    font-weight: normal;
}
.sf-menu a{
    color: white;
    font-weight: bold;
    font-size: 14px;
    border-left: 0;
    border-top: 0;
    padding: .75em 1.25em;
}
.sf-menu a:hover, .sf-menu a.current{
    color: #f39c56;
}
.topnav{
    height: 37px;
    background-image: url(/imgs/bgr_stainless.jpg);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.sf-menu{
}
.sf-menu{
}
.sf-menu ul {
    box-shadow: 0px 0 8px rgba(0,0,0,1);
    background-color: #354153;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.sf-menu > li > a{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: -3px 0 5px rgba(0,0,0,1);
}
.sf-menu ul a{
    border-right: 0;
    border-bottom: 1px solid #888;
}
.sf-menu ul li:last-child a{
    border-bottom: 0;
}
.sf-menu li, .sf-menu ul li{
    background-color: transparent;
}
.sf-arrows .sf-with-ul:after {
    border-top-color: white;
}
.sf-menu > li:hover > a, .sf-menu li.sfHover > li > a{
}
.sf-menu li:hover, .sf-menu li.sfHover{
    background-color: transparent;
}
.sf-menu li:hover a, .sf-menu li.sfHover a{
    text-decoration: none;
}
.sf-menu a.nolink{
    cursor: default;
}
#layout { position: relative; width: 900px; height: auto; text-align: left; margin:0px auto; }
#container { background-color:#000; width: 900px; text-align: left; }

#TNav { background: url('/imgs/topBkg.jpg') no-repeat; width:900px; height:81px; color: #f39c56; }
#TNav a {font: italic bold 12px Arial,Tahoma; color: #b6cae2; text-decoration: none }
#TNav a:hover, #TNav a.current{ text-decoration: underline; color: #ddd; }
#toplinks{ text-align:right ; color:white ; font-size:10px; }
#toplinks a{ font: normal normal 11px Arial; color:white ; text-decoration: underline; }

#scart {width:79px; height:5px; border:0px; padding-top:10px;}
#cservice {width:103px; height:5px; border:0px; padding-top:10px;}
#login {width:34px; height:5px; border:0px; padding-top:10px;}
#logoGraphic {width:900px; height:134px; border:0px}

#mainTable{ width:100%; margin: 8px 0px 8px 0px ; }
#LNav {color:white; font-weight:bold ; background-color:#000; width:130px; padding:0px 8px 8px 8px; }
#LNav .sub {background-color:#000; padding:0px 0px 15px 5px; }
#LNav a { display:block; font: italic bold 12px Arial,Tahoma; color: #f39c56; text-decoration: none ; padding: 1px 0px 0px 0px ; }
#LNav a:hover, #LNav a.current { text-decoration: underline; color: #ddd; }

#wTop {width:730px; height:4px; border:0px; vertical-align:bottom; padding-top:10px;}
#wBtm {width:730px; height:6px; border:0px; vertical-align:top; }

#iMetals {width:100%; padding:10px;}
#iMetals td {padding:5px;}
.metalHead {background-color:#ae612a; width:165px; height:30px; vertical-align:middle; color:#fff; font: bold 12px arial; border:1px solid #000;}
.mContainer{
 margin: 0px auto 10px auto ;
 }
.iSCat { padding:5px ; border:1px solid #000; }
.iSCat a{
 display:block;
 }
#errors{
 background-color: #333333 ;
 padding: 6px 6px 6px 15px ;
 margin-bottom: 10px ;
 color: white ;
 font-weight: bold ;
 }
#errors li{
 margin-left: 15px ;
 }
/******** content ********/
.title {font: bold 18px Arial,Tahoma; color: #000; }
#content a.home_button{ font-size:16px; padding:5px; color:white; text-align:center; font-weight:bold; display:block ; background-position:0px -0px ; }
#content a.home_button:hover{ color:white; text-decoration:none; }
.button_aluminum { background-image:url(/imgs/bgr_aluminum.jpg) ; }
.button_brass    { background-image:url(/imgs/bgr_brass.jpg) ; }
.button_stainless{ background-image:url(/imgs/bgr_stainless.jpg) ; }
.button_titanium { background-image:url(/imgs/bgr_titanium.jpg) ; }
.button_bronze   { background-image:url(/imgs/bgr_bronze.jpg) ; }
.button_copper   { background-image:url(/imgs/bgr_copper.jpg) ; }
.breadcrumbs{ margin-bottom: 15px; background-color: #ee;}

/******** side bar ********/
#top_content{ background-color:white ; xbackground: url(/imgs/w_topr.gif)  top right no-repeat #FFFFFF ; }
#top_sidebar{ background: url(/imgs/w_top2r.gif) top right no-repeat #F1F1F1 ; }
#btm_content{ background-color:white ; xbackground: url(/imgs/w_btmr.gif)  top right no-repeat #FFFFFF ; }
#btm_sidebar{ background: url(/imgs/w_btm2r.gif) top right no-repeat #F1F1F1 ; }
#sidebar{ width:192px; padding:8px ; background-color: #F1F1F1 ; background-image:url(/imgs/diamond-plate2.jpg);}
#sidebar .section{ margin: 10px 0px 10px 0px ; }

/******** forms ********/
.form{ font-size: 12px ; padding: 10px; }
.form select{ height: 18px ; width: 120px; font-size: 11px ; }
.form .small{ width: 55px ; }
.form td{ padding: 5px 10px 5px 0px ; }
.form h2{ margin: 4px 0px 0px 0px ; }
.form input{ font-size: 11px ; }
.sbutton{ padding:0px; font-size:80%; }
input.submit{ width:125px ; height: 25px ; font-size: 14px ; }

/******** cart ********/
.cart td, .cart th{ padding: 5px ; }
.paypal_form{
	text-align: right;
}

/******** main content ********/
#content { background-color:#fff; height:100%; padding:8px; font-size: 13px; }
#content a , #sidebar a{
 color:#841 ;
 }
#content a:hover , #sidebar a:hover{
 color:#888 ;
 }
x#content a:visited{
 color:#731 ;
 }

/******** browse page ********/
#browse .bl{
 display: block ;
 padding: 6px ;
}
#browse .even{ background-color: #fff ; }
#browse .odd { background-color: #fafafa; }

/******** product display ********/
#product .section{
 border-top: 0px solid #ccc ;
 padding: 0px 0px 0px 0px ;
 margin: 17px 0px 0px 0px ;
 }
.prop_table{ width: 100% ; }
.prop_table .odd{ background-color: #efefef ; }
.prop_table .even{ background-color: #fafafa ; }
.prop_table td , .prop_table th{ padding: 3px ; }
.prop_table .r{ text-align:right ; }
.prop_table .heading{ margin-bottom:5px ; }
#product .properties{
 font-size: 11px;
 }
#properties .section{
 width: 200px ;
}
/******** product guides ********/
#guide table{ margin-bottom:15px; }
#guide table td{
 padding: 3px 8px 3px 8px ;
 border: 1px solid #ccc ;
 }
/******** resources ********/
#resources td, #resources th{
 padding: 4px ;
 border-bottom: 1px solid #DFDFDF ;
 }

.narrow-header{
    display: none;
}
.narrow-nav{
    display: none;
}
@media (max-width: 800px){
    .spaced{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    body{
        font-size: 16px;
    }
    .responsive_image{
        /* this is really just a workaround for ie's abnormal handling of "max-width: 100%;" */
        max-width: 320px;
        height: auto;
    }
    /* hide items we don't want on a narrow screen */
    #LNav, .topnav, #TNav, #top_content{
        display: none;
    }
    #container, #layout{
        width: auto;
    }
    #content, #sidebar{
        display: block;
    }
    #content{
        padding-top: 25px;
        font-size: 16px;
    }
    #mainTable{
        margin: 0;
    }
    #sidebar{
        width: auto;
    }
    #footer td{
        font-size: 14px;
        display: block;
        margin-bottom: 15px;
        width: auto !important;
    }
    #btm_content{
        /* stops 1 pixel black border from appearing on right of content */
        display: none;
    }

    /* header */
    .narrow-header{
        display: block;
        background-image: url(/imgs/copper-pattern.jpg);
        background-size: cover;
        background-position: center center;
    }
    .narrow-header .controls{
        text-align: right;
    }
    .narrow-nav-container{
        position: relative;
        z-index: 1;
    }
    .narrow-nav{
        left: 0;
        right: 0;
        position: absolute;
        background-color: #354153;
        color: white;
    }
    .narrow-nav a{
        color: white;
        text-decoration: underline;
    }
    .narrow-nav .top-links a{
        margin-right: 5px;
    }
    .narrow-nav .main-links a{
        font-weight: bold;
        font-size: 18px;
        display: block;
        padding: 7px 0;
        text-decoration: none;
    }
    .section{
        border-bottom: 1px solid #888;
    }
    .narrow-nav .main-links a.current{
        color: #ae612a;
    }

    .breadcrumbs{
        background-color: #eee;
        margin: -30px -30px 15px -30px;
        padding: 15px 30px;
    }
    .breadcrumbs a{
        text-decoration: underline;
    }
}