body { font-family: 'Open Sans', Arial, Helvetica, sans-serif; margin:0px; padding:0px; font-size:13px; color:#333;}

h1,h2,h3,h4,h5,h6 { font-family: 'Open Sans', Arial, Helvetica, sans-serif; }

/* body { font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; font-size:13px; color:#333;} */

* { margin:0px; padding:0px;}
a, img{border:0; outline:0;}
a { text-decoration:none; }
.wrapper { width:980px; margin:auto;}
.header { background:url(../images/headerBG.gif) top left repeat-x;}
.innerHeader{width:980px; margin:0 auto; background:url(../images/headerGraphic2.png) 90px 2px no-repeat; height:108px; overflow:hidden;}
.logo{float:left; margin:5px 0px 0px 0px;}
.partSearch { float:right; width:365px; background:url(../images/searchbg.png) no-repeat left top; height:97px; margin:10px 0 0 0;}
.advac { float:right; width:140px; padding:16px 0 0 0;}
.advac a { font-size:12px; color:#828282; border-bottom:1px solid #949494;}
.textBoxCont { float:left; width:345px; padding:10px 0 0 20px;}
.inputCont { float:left; background:url(../images/textBox.gif) repeat-x left top; border:1px solid #d8d8d8; width:248px; margin:1px 0 0 0;}
.inputCont input {width:242px; border:0; background:none; font-size:13px; color:#666; padding:5px 4px 6px 4px; }
.searchBtn { float:left;}
/** menu CSS start here*/

/*UPdate CSS CSS on 31-10-2011*/
.menu { float:left; width:980px; height:35px; background:url(../images/rep.jpg) repeat-x top left;}
.menu ul { float:left; list-style:none;}
.menu ul li { float:left; padding:0 35px;  position:relative; display:block;}
.menu  ul li ul {display:none; width:654px; background:#000000;}
.menu  ul li ul li { display:block; width:286px; height:400px; padding:5px 0 0 15px; background:url(../images/arrow.png) left 6px no-repeat;}
.menu ul li:hover ul { position:absolute; display:block; background:#44474C; top:34px; left:14px; z-index:30000;  padding:0 0 10px 0;}
.menu  ul li ul li a {  font-family: 'Open Sans', Arial, Helvetica, sans-serif; text-transform:uppercase; color:#c0c0c0; display:block; font-size:10px;  line-height:12px;}
.menu  ul li ul li a:hover  { color:#FFFFFF; text-decoration:underline; border-bottom:none; }
.menu  ul li:hover li  {color:#2877ae; display:block; height:24px; }
.menu ul li a { float:left;  font-family: 'Open Sans', Arial, Helvetica, sans-serif; text-transform:uppercase; color:#aaabac; display:block; font-size:14px; font-weight:bold; line-height:32px;}
.menu ul li.active { float:left;  font-family: 'Open Sans', Arial, Helvetica, sans-serif; text-transform:uppercase; color:#FFF; display:block; font-size:14px; font-weight:bold; line-height:32px; }
.menu ul li.active span { float:left;  font-family: 'Open Sans', Arial, Helvetica, sans-serif; text-transform:uppercase; color:#FFF; display:block; font-size:14px; font-weight:bold; line-height:32px; border-bottom:2px solid #e03c32;}
.menu ul li a:hover { color:#FFFFFF; border-bottom:2px solid #e03c32;}

/* END HERE UPDATED CSS*/
.boldtxt { float:left; background:url(../images/bold-arrow.jpg) left 4px no-repeat; font-size:20px; color:#000; text-transform:uppercase; padding:0 0 10px 30px; margin:10px 0 0 0; font-weight:bold;width:890px;}
.boldtxt1 { float:left; background:url(../images/bold-arrow.jpg) left 4px no-repeat; font-size:15px; color:#000; text-transform:uppercase; padding:0 0 10px 30px; margin:10px 0 0 0; font-weight:bold;width:890px;}
.bannerCont { float:left; width:980px;  height:243px; }
.redBg { float:left; width:327px; background:url(../images/redbg.jpg) 0px top no-repeat; height:246px;}
/*.redBg h1 { float:left; color:#FFFFFF; width:252px; font-size:22px; font-weight:bold; text-transform:uppercase; padding:22px 0 0 30px;}*/
.redrfqbox { float:left; color:#FFFFFF; width:252px; font-size:22px; font-weight:bold; text-transform:uppercase; padding:22px 0 0 30px;}
.banner { float:left; }
.midCont { float:left; width:980px;}
.leftCont { float:left; width:316px; padding:8px 0 0 10px;}
.outCont { float:left;  width:300px; border-bottom:1px solid #e2e2e2; padding:10px 0 22px 0;}
.outCont p { float:left; font-size:13px; color:#424242;  line-height:18px; width:305px;}
.outCont p a { color:#3d81b6; text-decoration:underline;}
.outCont p a:hover { text-decoration:none;}
.outCont ul { float:left;  width:300px; padding:6px 0 0 0;}
.outCont ul li { float:left; color:#424242; background:url(../images/squre.jpg) no-repeat left 5px; padding:0 0 0 15px; display:block; width:280px; font-size:13px;}
.readmore { float:left; padding:20px 0 0 0;}
.imgCont { float:left;}
.redtext { float:left; font-size:18px; color:#9f1515; font-weight:bold; padding:0 0 2px 0;}
.ptext p { float:left; font-size:13px; color:#424242; width:225px; }
.rightPanel { float:left; padding:10px 0 0 0; width:651px; border:0px solid #ff0000;}
.boldred {font-size:19px; color:#9f1515; background:url(../images/nsn.jpg) 18px  3px no-repeat; padding:8px 0 20px 70px; font-weight:bold;}
.innerCont {background: url(../images/shadow.jpg) repeat-y left top; padding:0 0 0 19px; border-right:1px solid #e1e1e1;  }

/* .innerCont p {font-size:11px; padding: 8px 8px 8px 19px; color:#424242; line-height:20px; font-family:Verdana, Geneva, sans-serif;} */
.innerCont p {font-size:11px; padding: 8px 8px 8px 19px; color:#424242; line-height:20px; font-family: 'Open Sans', Arial, Helvetica, sans-serif; }

.innerCont p a{color:#2f6fad;}
.innerCont p a:hover{text-decoration:underline;}

/* .text01 {font-size:15px; color:#000000; background:url(../images/categoryHdBg.gif) top left repeat-x; padding:4px 0 4px 19px; font-weight:bold; font-family:Verdana, Geneva, sans-serif;} */
.text01 {font-size:15px; color:#000000; background:url(../images/categoryHdBg.gif) top left repeat-x; padding:4px 0 4px 19px; font-weight:bold; font-family: 'Open Sans', Arial, Helvetica, sans-serif; }

.text01  a{ color:#2f6fad;text-decoration:underline;}
.form { float:left; width:300px; padding:16px 0 0 0;}
.form fieldset { float:left; border:0px; padding:7px 0 7px 0;}
.form fieldset label { float:left; width:78px; color:#fff; font-size:12px; text-align:left; padding:7px 0 0 28px;}
.form fieldset input { float:left; width:180px; padding:0px 2px 0 2px; font-size:12px; color:#666; height:22px;}
.senrqBtn { float:left;  width:120px; padding:4px 0  0 106px;}
.seprator {border-top:1px solid #e1e1e1; display:block; height:12px; overflow:hidden; clear:both;}
.footer{min-width:980px; padding:13px 0 13px 0; background:url(../images/footer.jpg) repeat-x; overflow:hidden; text-align:center; color:#939395; line-height:20px;}
.footer a{ font-size:13px; color:#adaeaf; }
.footer a:hover{ text-decoration:underline;}
.footer ul li.bgNone {padding:0 5px; background:none;}
.footer p { color:#adaeaf; float:left; font-size:11px; padding:5px 0 0 5px;}
span.seperator{padding:0 5px;}

/* recently added */

/* category page css */

.clr{clear:both; line-height:0; height:0;}

.innerPageHd{padding:0px; margin:15px 0;}
.innerPageHd span{color:#9f1515; font-size:22px; font-weight:bold;}
.categoryBox{margin-bottom:30px;}
.categoryHd{background:url(../images/categoryHdBg.gif) top left repeat-x; padding:4px 0 4px 19px; font-weight:bold; margin-bottom:15px; font-size:16px;}
.pagination{background:url(../images/pagesimg.gif) left center no-repeat; padding-left:65px; display:block; font-size:11px; min-height:20px; line-height:20px; color:#909090;}
.pagination a{color:#2f6fad; text-decoration:none; padding:0 5px;}

/* sub category page css */

.categoryItemBox td{padding:3px 5px;}
.categoryItemBox th{padding:5px; text-align:left; background:#efefef; color:#333;}
.subCatPagination {color:#666; word-wrap: break-word; background:#fafafa;}
.subCatPagination a{color:#0099CC; text-decoration:none; word-wrap: break-word; padding:0 2px; line-height:20px;}
.martop{margin-top:20px;}

.partnbrs { float:left; left 4px no-repeat; font-size:20px; color:#000; text-transform:uppercase; padding:0 0 10px 2px; margin:10px 0 0 0; font-weight:bold;}

.textboxclass input{ float:left; border:1px solid #d8d8d8;  margin:1px 0 0 0; height:23px;}

/* css for pagination in category*/
.gridList{   font:normal 12px/12px Arial, Helvetica, sans-serif; width:980px; margin:10px auto;; }
.gridListHead{ background:#e9edec url(../images/gridBg.jpg) 0 0 repeat-x; padding:7px 19px; font:normal 16px/16px Arial, Helvetica, sans-serif; color:#323232; text-transform:uppercase; font-weight:bold; border:1p=x solid #c3c3c3;}
.gridList ul{/*border:1px solid #c2dff1;*/ margin:5px 0 0 0; padding:0 0 0 107px; position:relative;width:873px; float:left;}
.gridList ul li{ text-align:center; width:95px;margin:0px; padding:0 ;  height:26px; color:#656565; font-size:12px; list-style:none; float:left; border:1px solid #c2dff1; border-left:1px solid #c2dff1; }
.lGirB{border-right:1px solid #c2dff1; color:#C00; font-weight:bold;}

.gridList ul li a{margin:0px; padding:7px 0 ; color:#656565; text-decoration:none; display:block; background:#FFFFFF; }
.gridList ul li a:hover{ color:#000000; background:#ecf5fa;}
.pagesbg{ width:95px; height:22px; background:url(../images/pages.png) 0 0 no-repeat; position:absolute; top:0; left:0;} 

.btn_rfq{background:url(../images/btn_sendRfq.jpg) no-repeat 0 0; width:82px; height:28px; cursor:pointer; border:1px solid #990000;}
.btn_rfq:hover{background:url(../images/btn_sendRfq.jpg) no-repeat 0 -28px; width:82px; height:28px; cursor:pointer; border:1px solid #FFFF00;}

/* css for RFQ PAGE BUTTONS - 17-01-2012*/
.btn_rfq{
	background:url(../images/btn_sendRfq.jpg) no-repeat 0 0; width:82px; height:28px !important; cursor:pointer; border:1px solid #990000;
}
.btn_rfq:hover{
	background:url(../images/btn_sendRfq.jpg) no-repeat 0 -28px; width:82px; height:28px; cursor:pointer; border:1px solid #FFFF00;
}

.btn_addMorePart{
	background:url(../images/btn_addMorePart.jpg) no-repeat 0 0; width:112px; height:28px !important; cursor:pointer; border:1px solid #990000;
}
.btn_addMorePart:hover{
	background:url(../images/btn_addMorePart.jpg) no-repeat 0 -28px; width:112px; height:28px; cursor:pointer; border:1px solid #FFFF00;
}

.btn_backToCatlg{
	background:url(../images/btn_backToCatlg.jpg) no-repeat 0 0; width:149px; height:28px !important; cursor:pointer; border:1px solid #990000;
}
.btn_backToCatlg:hover{
	background:url(../images/btn_backToCatlg.jpg) no-repeat 0 -28px; width:149px; height:28px; cursor:pointer; border:1px solid #FFFF00;
}

.btn_clearAll{
	background:url(../images/btn_clearAll.jpg) no-repeat 0 0; width:82px; height:28px !important; cursor:pointer; border:1px solid #990000;
}
.btn_clearAll:hover{
	background:url(../images/btn_clearAll.jpg) no-repeat 0 -28px; width:82px; height:28px; cursor:pointer; border:1px solid #FFFF00;
}

/* Style you custom popupbox according to your requirement */
.popupbox {
 width:800px;
 height:600px;
 background-image:url(https://www.csgparts.com/images/TAC_big.jpg);
 background-repeat:no-repeat;
 display: none; /* Hidden as default */
 float: left;
 position: fixed;
 top: 40%; left: 50%;
 z-index: 99999;
 -webkit-box-shadow: 0px 0px 20px #000;
 -moz-box-shadow: 0px 0px 20px #000;
 box-shadow: 0px 0px 20px #000;
}
.popupbox2 {
 width:454px;
 height:307px;
 background-image:url(images/pu_03.png);
 background-repeat:no-repeat;
 display: none; 
 float: left;
 position: fixed;
 top: 50%; left: 50%;
 z-index: 99999;
 -webkit-box-shadow: 0px 0px 20px #000;
 -moz-box-shadow: 0px 0px 20px #000;
 box-shadow: 0px 0px 20px #000;
}
.popupbox3 {
 width:502px;
 height:302px;
 background-image:url(images/3_03.png);
 background-repeat:no-repeat;
 display: none;
 float: left;
 position: fixed;
 top: 50%; left: 50%;
 z-index: 99999;
 -webkit-box-shadow: 0px 0px 20px #000;
 -moz-box-shadow: 0px 0px 20px #000;
 box-shadow: 0px 0px 20px #000;
}
#fade { 
 display: none; /* Hidden as default */
 background: #000;
 position: fixed; left: 0; top: 0;
 width: 100%; height: 100%;
 opacity: .80;
 z-index: 9999;
}
/* for breadcrum feature*/
.breadcrum{
margin-top:5px;
/*border:1px solid #cccccc;*/
color: #000; float:left; width:100%;
}
.breadcrum a{
text-decoration:underline;
color: #3882CE;
}
.breadcrum a:hover{
text-decoration:underline;
color: #AE0200;
}
/* for breadcrum feature ends here */



/* synapse responsive css   */

@media screen and (max-width: 980px) {
  html { float: left;}
  body { width:100%;}
  .innerHeader{ width: 100%;  }
  .wrapper {  width: 100%;   float: left;} 
  #contactus p {   font-size: 16px;}

  .gridList{ width: 100%; }
  .gridList ul{ width: auto;}

 

}
@media screen and (max-width: 980px) {
  .innerHeader {  width: 98%;   padding: 0 1%;    background: transparent;   height: auto;}
  .logo {   float: none;  padding: 10px 0;  width: auto; margin:0 auto;  background: url(../images/headerGraphic2.png) 100% 0px no-repeat;
    background-size: 100% 100%;}
    .bannerCont {   width: 100%;   height: auto;}
    .redBg {  float: left;  width: 100%;  background: url(../images/redbg.jpg) 0px top no-repeat; background-size:100% 100%;   height: 246px;}
    .banner {  float: left;   width: 100%;}
    .banner img {   width: 100%;}
    .redrfqbox {  float: left; width: 100%; font-size: 22px; font-weight: bold; text-transform: uppercase;
    padding: 22px 0 0 0;   text-align: center;}
    .form {  float: none;   width: 66%;   padding: 16px 0 0 0;    margin: 0 auto;}
    .form fieldset {   float: left;   border: 0px;   padding: 10px 0 15px 0;   width: 100%;}
    .form fieldset label {  float: left;   width: 14%;   color: #fff;   font-size: 12px;  text-align: left;   padding: 7px 0 0 28px;}
    .form fieldset input {  float: left; width: 76%;  padding: 0px 2px 0 2px;  font-size: 12px;   color: #666;   height: 22px;}
    .senrqBtn {  float: none;   width: 120px;   padding: 4px 0 0 0;   margin: 0 auto;}
    .midCont {  float: left;  width: 98%;   padding: 0 1%;}
    .leftCont {   float: left;   width: 100%;   padding: 8px 0 0 0;}
    .outCont {  float: none;   width: 100%;  margin: 0 auto; display: table;  border-bottom: 1px solid #e2e2e2;  padding: 10px 0 22px 0;}
    .outCont p{ width: 100%;     font-size: 16px;}
    .rightPanel {   width: 100%;}
    .footer {   min-width: 98%; width:98%; padding:0 1%;}
    .text01{ font-size:20px; }
    .innerCont p {   font-size: 16px;     line-height: 26px;}
    .footer a {   font-size: 18px; line-height: 30px;}
    .redtext{ font-size:20px;     padding: 0 0 10px 0;}
    .ptext p{ font-size:16px;}
    .outCont ul{ width:100%;}
    .outCont ul li{ width: 98%;font-size: 16px;padding-left: 2%;}
    .menu{ display:none;     width: 100%;     height: auto;    background: none repeat-x top left #000;}
    .fa.menu-icon{ display:block!important; font-size:40px;cursor: pointer;    margin: 50px 0 0 0;    float: left;   width: auto; }
    .menu ul li, .menu ul{ width:100%; padding: 0; }
    .menu ul li a{    text-align: center; font-size: 18px;  width: 100%;  padding: 5px 0px;}
    .menu ul li.active span{ width:100%;}
    .footer{background: none #000;}
    .boldtxt{ width:auto;}
    .menu ul li:hover ul{width: 100%; top:0; left:0; position: relative;    background: transparent;}
    .menu ul li:hover li{    background: #000;   width: 100%; height: auto;    padding-left: 0;}
    .menu ul li ul li a{    font-size: 11px;    line-height: normal;}
    #contactus table {   float: left;   width: 100%;}
    #contactus tr {       display: inline-grid; width: 100%;}
    #contactus tr td.contact-image{ display: none;}

    .textboxclass input {  width: 80%!important;}
    textarea#content {   width: 80%!important;}
    input[type="image"] {   width: auto!important;}
    
    table#rfq_third_table {   float: left;   width: 100%;}
    table#rfq_third_table tr{ display: inline-grid; width: 100%;}
    #rfq_third_table .rfq_image img {   width: 50%;}
    textarea#addcomments {   width: 80%!important;}
    .rfq_image img {   width: 100%;}
    form#advancesearch table tr {   display: inline-grid;   width: 100%;}
    form#advancesearch select#fsc {   width: 80%!important;}

    #page-content-table tr {   display: inline-grid;   width: 100%;}
    iframe{ width:100%; min-width:265px;}

    .quality-page tr{    display: inline-grid;     width: 100%;}
    .quality-page tr td.rfq_image {   width: 98%!important;}
    .boldtxt1{ width:91%;}
    .sub-category-table tbody {   float: left;   width: 955px;   overflow: scroll;}
    .sub-category { float: left; width: 100%;}
     .sub-category-table {    width: 100%!important;  overflow: hidden;   float: left;    }

     .finalproductpage {   width: 96%!important;   padding: 0 2%;}
     .categoryItemBox {      width: 94%;  padding: 20px 2%!important;  margin: 0 1% !important;}
     .midCont .categoryItemBox { float:left;   width: 100%;   padding: 20px 0%!important;   margin: 0 !important;}
}


@media screen and (max-width: 950px){  
  
    .sub-category-table tbody{ width: 925px;  }

}

@media screen and (max-width: 854px){  
  
    .sub-category-table tbody{ width: 828px;  }

}

@media screen and (max-width: 823px){  
  
    .sub-category-table tbody{ width: 798px;  }

}

@media screen and (max-width: 812px){  
  
    .sub-category-table tbody{ width: 787px;  }

}

@media screen and (max-width: 768px){  
  
    .sub-category-table tbody{ width: 743px;  }

}
@media screen and (max-width: 736px){  
  
    .sub-category-table tbody{ width: 706px;  }

}


@media screen and (max-width: 724px){  
  
   .form{ width:80%; }
   #rfq_third_table .rfq_image img { width: 70%;}
   .sub-category-table tbody{ width: 699px;  }

}

@media screen and (max-width: 668px){  
  
    .sub-category-table tbody{ width: 643px;  }

}

@media screen and (max-width: 640px){  
  
    .sub-category-table tbody{ width: 615px;  }

}

@media screen and (max-width: 568px){  
  
    .sub-category-table tbody{ width: 540px;  }

}



@media screen and (max-width: 564px){  
  
   .form{ width:100%; }
   #rfq_third_table .rfq_image img { width: 100%;}

}
@media screen and (max-width: 480px){  
  
   .form fieldset label{ width:18%; padding: 7px 0 0 8px;}
   .textboxclass input {  width: 100%!important;}
    textarea#content {   width: 100%!important;}
    input[type="image"] {   width: auto!important;}
    form#advancesearch select#fsc {   width: 100%!important;}
    textarea#addcomments {   width: 100%!important;}

     .sub-category-table tbody{ width: 455px;  }
}

@media screen and (max-width: 420px){

.partSearch{width:86%; height: auto;} 
.textBoxCont {  width: 95%;   padding: 10px 0 0 5%;}
.sub-category-table tbody{ width: 390px;  }
}
@media screen and (max-width: 375px){

.sub-category-table tbody{ width: 355px;  }

}
@media screen and (max-width: 360px){

.sub-category-table tbody{ width: 330px;  }

}
@media screen and (max-width: 320px){

.sub-category-table tbody{ width: 300px;  }

}