/* new styles */
*{box-sizing: border-box !important;}
html,body{height:100%;}
body{
  background-position:  0 120px;;
}
#topnav,#mainnav,#middleimage,#mainwraper,#footertext{
  width:100%;
  max-width:940px;
  margin:0 auto;
}
#wraperall{position:relative;min-height:100%;min-width:250px;padding-bottom:49px;box-sizing:border-box;}

#topcontainer{background:#fff;line-height:30px;}

body.home #navcontainer,#navcontainer.dark,#middleimagecontainer,#footercontainer{background:#2C2C2C;}
#footercontainer{position:absolute;bottom:0;width:100%;}
#footercontainer a{line-height: 39px;height: 39px;color:#fff;font-family: "TheSans-OT7Bold",Arial,"FreeSans","Garuda",Helvetica,"Bitstream Vera Sans",sans-serif;text-decoration:none;margin-right:20px}
#footercontainer a:hover{text-decoration:underline;}
#navcontainer,body{position:relative;}

#logo{float:left;width:220px;text-align:center;}
#logo img{margin:0 auto;}
#mainnav{padding:0 20px 0 0;}
#mainmenu{float:right;margin-top:15px;clear:right;}

.loginmenu, #topnav_user, #topnav_chat{float:right;}
.loginmenu{margin-left:0.5em;}

.rightpane{padding-left:0.2em;}
.leftpane{padding-right:0.2em;}
.contentpane{padding: 0 0.8em !important;}

.langselect .separator{padding:0 4px 0 4px;}

#middleimagecontainer{
  margin-bottom: 85px;
  padding-bottom: 1px;
}
#middleimagecontainer p{margin:0;}
#middleimage{
  z-index: 1;
  position: relative;
  margin: 0px auto -85px;
  padding-top:1em;
}
#middleimage img{
  border-radius: 0px 25px;
  max-width:100% !important;
  height:auto;
}

img {
    vertical-align: middle;
}

.cf:before,
.cf:after {
    content:" ";
    display:block;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

#mainmenu ul li{
  float:left;
}
#mainmenu ul li ul{
  display:none;
}

.mainmenuitem .arrow{
	text-decoration: none;
	padding-bottom: 2px;
	padding-left: 3px;
	/*padding-right: 5px;*/
}

#mainnav a{
  font-family:"TheSans-OT7Bold",Arial,"FreeSans","Garuda",Helvetica,"Bitstream Vera Sans",sans-serif;
  font-size:14px;
  display: block;
  padding-right: 5px;
  position: relative;
  z-index: 104;
  text-decoration:none;
  text-transform:uppercase;
}
#mainmenu a,#mainmenu li ul.submenu{
  -webkit-border-radius: 4px 0 4px 0;
  -moz-border-radius: 4px 0 4px 0;
  -ms-border-radius: 4px 0 4px 0;
  -o-border-radius: 4px 0 4px 0;
  border-radius: 4px 0 4px 0;
}
#mainmenu li ul.submenu a{font-size:12px;}
#mainmenu li ul.submenu{background:#F2F2F2;}
.home #mainmenu li ul.submenu,#navcontainer.dark #mainmenu li ul.submenu{background:#2c2c2c;}
#mainmenu a{
  transition: 0.2s ease-in-out;
  transition-property: color, background;
  color: #2c2c2c;
  line-height: 27px;
}
#mainmenu a:hover, #mainmenu a.mainmenuitemselected ,#mainmenu li ul.submenu a.submainitemselected{
  background: none #2c2c2c;
  color: #ffffff;
}
.home #mainmenu a,#navcontainer.dark #mainmenu a{
  transition: 0.2s ease-in-out;
  transition-property: color, background;
  color: #ffffff;
}
.home #mainmenu a:hover, .home #mainmenu a.mainmenuitemselected,.home #mainmenu li ul.submenu a.submainitemselected ,
#navcontainer.dark #mainmenu a:hover ,#navcontainer.dark  #mainmenu a.mainmenuitemselected,#navcontainer.dark #mainmenu li ul.submenu a.submainitemselected
{
  background: none #2c2c2c;
  color: #9D9D9D;
}

#topnav,
#topnav a{
  font-family:"TheSans-OT7Bold",Arial,"FreeSans","Garuda",Helvetica,"Bitstream Vera Sans",sans-serif;
  font-size:12px;
  color:#F00;
  text-decoration:none;
}

.langselect{float:left;}
.langselect,.langselect a{color:#2C2C2C;font-family:"TheSans-OT5Plain";}
.selected_region{font-family: "FS-Rufus-Regular";}

.searchlink{background-repeat:no-repeat;background-position:right ;padding-right:20px;}

h1.pagetitle,h1.homepage{
  font-weight: normal;
  line-height: 120%;
  padding: 15px 0px 0px 0px;
}

h2{font-size:14px;}

#mainwraper{
  background-position: bottom right;
  background-repeat: no-repeat;
  border-radius: 10px 10px 0 0 ;
}
body.home #mainwraper{margin-top:105px;}

body.mainpage #maincontainer,body.home #maincontainer{padding:10px 10px 0 10px;}
body.mainpage #mainwraper{margin-top:15px !important;}


.button{border:1px solid;border-radius:6px;text-align:center;padding-right:10px;}
a.button .right{padding-right:0 !important;}

.cartlink{background: no-repeat center left;padding-left:20px;padding-right:10px;}

.chatbutton,.supportbutton{margin-left:15px;padding:0 6px 0 6px;border-radius:3px;width:auto !important;display:inline-block !important;}
a.supportbutton{margin-right:20px;background:#F00;color:#fff !important;}
a.chatbutton{background:#DDD;color:#F00;}

.normal,.normal a{color:#2C2C2C !important;}


/* FORMS */

.formtable{margin:0 !important;}
.formtable th{
  font-weight: normal !important;
  font-size: 11px;
  text-transform:uppercase;
}
.formtable th.sectionlabel{
  font-family: "FS-Rufus-Italic" !important;
  font-weight: normal !important;
  font-size: 18px;
  color: #2C2C2C;
  padding: 10px 0px 0px;
  margin: 0px;
  text-transform: none;
  line-height: 120%;
}
.formtable th, .formtable td{line-height:35px !important;}
.formtable th.labellabel, .formtable td.labelinput{line-height:20px !important;}

input,select,textarea{border:0;background:#F2F2F2;}

input[type=checkbox],input[type=radio]{width:15px;height:15px;padding:2px;border-radius:3px;}

input[type=text],input[type=password],textarea,select{
  box-sizing:content-box;
  -ms-box-sizing:content-box;
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box; 
  border-radius: 4px;
  padding:3px 5px 3px 10px;
  font-family: "TheSans-OT7Bold";
  font-weight: normal;
  font-size: 15px;
  color: #2C2C2C;
  line-height: 120%;
  width: 250px !important;
}
input[type=text],input[type=password],textarea{}
.formbuttons .button{
  font-size:130%;
  padding: 5px 10px 5px 10px;
}
input.pakitemqty{width:40px !important;font-size: 13px;padding:2px 4px 1px 2px;background:#E6E6E6 !important;border-radius:0 !important;}
.gridlist .qty input{
  width:30px !important;
  font-size:13px;
}
input.pagingInput{width:25px !important;font-size:12px !important;}

#srchform{
  margin:auto auto;
  width:650px;
  padding-top:150px;
}
#srchinput{
  float:left;
  margin-right:20px;
  border-radius:0;
  border:0;
  background:transparent;
  font-family: "TheSans-OT2ExtraLight";
  font-weight: normal;
  color: #FFF;
  border-bottom:1px solid #808080;
}
#srchform input[type=submit]{
  font-family: "TheSans-OT2ExtraLight";
  border:0;
  background:transparent;
  float:left;
  color:#fff;
  font-size:18px;
  margin-top:40px;
}
#srchoverlay{
  position:absolute;
  width:100%;
  height:400px;
  background:#2C2C2C;
  z-index:3;
}
.visible{
  transition-property: visibility,opacity;
  transition-duration: 0.5s;
  opacity: 1;
}
.hidden{
  /*opacity: 0;
  visibility: hidden;*/
  visibility: hidden;
  transition-property: visibility,opacity;
  transition-duration: 0.5s;
  opacity: 0.1;
}
#dimoverlay{background:#fff;opacity:0.7;z-index:2;width:100%;height:100%;position:absolute;top:300px;display:none;}
/*,#maincontainer,#mainwraper #navcontainer,#middleimagecontainer #middleimage #topnav,#mainnav,#logo */


/* end new styles */

.bottommenu{
  text-align: left;
}
.bottommenu a{
  margin-top:5px;
  margin-right:5px;
  margin-bottom:5px;
}

/*  DDL menu styles */
#mainmenu{
	padding-left: 0px;
}
#mainmenu ul.mainmenu, #mainmenu ul.submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}
#mainmenu ul.mainmenu li {
	position: relative;
	float: left;
}

#mainmenu li ul.submenu {
	position: absolute;
	top: 25px;
	left: 0px;
	display: none;
}
#mainmenu li:hover ul.submenu { display: block; }
#mainmenu ul.mainmenu li a {
	display: block;
	border-bottom: 0;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}
#mainmenu ul.mainmenu li a,#mainmenu ul.mainmenu li.separator{
	line-height: 25px;
}
#mainmenu li ul.submenu a.submainitem,#mainmenu li ul.submenu a.submainitemselected{
	display:block;
	line-height: 20px;
}
#mainmenu li ul.submenu li,#mainmenu li ul.submenu a{
  text-align: left !important;
}
#mainmenu li ul.submenu li{
	white-space: nowrap;
	clear:both;
	width:100%;
	padding: 0;
}
ul.submenu li,ul.submenu li a{
  width: 160px;
}
/* formatting */
.rubric{
  padding-bottom: 2px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.leftpane h1:first-child,.rightpane h1:first-child{margin-top:0;}
.contentpane h1:first-child{margin-top:0px !important;padding-top:0 !important;}



.middleimage p{margin-bottom: 0px !important;}

.loginmenu .separator{padding: 0 10px 0 10px;}
a.linkimage{
  text-decoration: none !important;
}
.mainmenu{
  width: 100%;
}

a.button2 {
	background-repeat: no-repeat;
	padding-left: 20px;
	display: block;
	line-height: 24px;
	float: left;
	text-decoration: none !important;
	margin-right: 10px;
	margin-bottom: 3px;
	color: #FFFFFF;
}
a.button2 .right{
	background-repeat: no-repeat;
	padding-right: 20px;
	display: block;
	line-height: 23px;
	height: 24px;
	float: left;
	background-position: right;
	cursor:pointer;
	color: #FFFFFF;
}
.txtsearch{
  background: url(/images/search_bg.gif);
  width: 200px;
  height: 28px;
  line-height: 24px;
  padding-left: 10px;
  border: 0px;
  background-repeat: no-repeat;
}
.searchbutton{
  background-repeat: no-repeat;
  background-posiotion: top left;
}
ul.leftmenu{margin-bottom:1em !important;}
ul.leftmenu li{line-height:1.1em !important;}
ul.leftmenu ul li{margin-top:0.6em !important;}
.pakimage img{max-width:120px;}
@media all and (max-width: 1000px) {
    .langselect{margin-left:0.5em;}
}
@media all and (max-width: 800px) {
    #topnav_chat,#topnav_user{float:none;}
    .leftpane,.rightpane{float:none;width:100% !important;}
    div.leftpane{border:0 !important;width:100% !important;}.
    div.rightpane{border:0 !important;width:100% !important;}
    .leftmenu ul{display:none;}
    .leftmenu a{display:block;}
    .leftmenu > li:hover ul{display:block;}
    .leftmenu > li > a:after{content:" »";}
    .leftmenu > li > a{white-space: nowrap;}
}
@media all and (max-width: 650px) {
    #srchform{width:100%;}
    #mainnav{background-size: 150px auto;}
    #logo{width:170px;}
    #logo img{width:130px;height:auto;}
    #mainnav{padding:0;}
    #srchinput{width:250px !important;font-size: 2em !important;}
    #srchsubmit{margin-top:20px !important;}
    #srchform {padding-top: 90px;}
    
    .button{white-space: nowrap;}
    
    .RecyclePakOrderForm,.RecyclePakOrderForm > tr,.RecyclePakOrderForm > tr > td,.RecyclePakOrderForm > tr > th,
    .RecyclePakOrderForm >tbody > tr,.RecyclePakOrderForm >tbody > tr > td,.RecyclePakOrderForm >tbody > tr > th
    {
        display:block !important;width:100%;
    }
    .pakimage img{width:90%;max-width:90%;}
    .pakimage{margin-top:2.5em;}
}
@media all and (max-width: 550px) {
    .formcontainer{width:100%;}
    .formtable,.formtable tbody,.formtable tr,.formtable td{display:block;width:100%;}
    .formtable tr{clear:both;}
    .checkboxlabel{float:left;padding-right:0.4em;}
    .checkboxinput{padding-top:5px;}
    .formtable th,.formtable td{line-height:1em !important;}
    .formtable th{padding-top:0.7em;}
    .formtable th:empty,.formtable td:empty{display:none !important;}
}
@media all and (min-width: 800px) {
   .leftpane, .rightpane{width:24%;} 
   .leftpane, .rightpane,.contentpane{display:table-cell;}
}
@media all and (min-width: 550px) {
    #srchinput{
      float:left;
      width:400px !important;
      font-size: 3em;
    }
}
@media all and (max-width: 410px) {
    div#middleimage{
      margin:0 auto -35px !important;
    }
}
@media all and (max-width: 325px) {
    .supportbutton{
      margin-left:0px !important;
      
    }
    .chatbutton{margin-right:30px;}
}
@media all and (max-width: 940px) {
    #footercontainer{padding-left:0.5em;}
    .loginmenu{padding-right:0.5em;}
}