/*hide ">>" symbol from menu if requested device screen size is >767px */
.nav-arrow
 {
    display:none;
 }
    	
 /*implemented in footer and top/bottom rotating banner, set it visible for default*/
.m_noshow { display:block; }
 
 
 #menu dropdown_2columns
 {
     display:block;
 }
 
 /*used in productdetail page...to show productdetails after image in next line...in full page image is showing in left then content is in right side.
 for mobile image and content like product title, code pricing should display in difrent line left aligned*/
 .titleimg
 {
     float:left;
     margin-right: 10px;
 }
 
 /*style sheet for mobile device*/
 @media  only screen and (max-width :767px)
 { 
     /*set sub menu in single column*/
     
   #menu div.level1SubMenus
   {
       float:none;
      
   }
   
   #menu li a 
   {
       font-size:17px;
   }
   
   #menu div li a 
   {
       font-size:15px;
   }
   
   #menu div.specialMenus ul li 
   {
       float:none;
       width: 100%;
   }
   
   
   /*align top header element to left*/
   .functional ul 
   {
       float:none;
   }
   .functional 
   {
       float:left;
       margin-left:7px;
   }
   
   header .onecol {
        margin-left: 7px;
    }
   
   .search 
   {
       float:left;
   }
   /*set footer as left align*/
   .address
   {
       text-align:left;
   }  
   .copyright 
   {
    text-align: left;
   }
   
 /*hide top/bottom rotating baner, footer for mobile device*/    
 .m_noshow { display:none; }
 
 /*set width auto for root page container*/
 .wrapper{width:auto; background-image:none;}
 
 .container { width: auto;}
 
 /*set ">>" sign visible for mobile device*/
 .nav-arrow{display:block;}
    	
 /*reduce size of menu container root div for mobile....for Iphone 99% */ 	
.onecol,  .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol, .fourteencol, .sixteencol, .eighteencol {
width: 99%;
float: none;
padding-left: 5px;
padding-right: 5px;
margin-left: 0px;
margin-right: 0px;
}

.colgray {background-color: rgb(160, 160, 160);
}


#menu {
padding: 0;
height: auto;
width: inherit;
float: left;
margin-left: 0px;
margin-right: 0px;
z-index: 1000;
position: relative;
background: url(/images/bg_main_nav.jpg) no-repeat;
list-style: none;
margin: 10px auto;
}

#menu > li {
border: 1px solid #ccc;
float: none;
padding: 8px 5px;
margin: 0;
background: #fff;
display: block;
position: relative;
border-radius: 5px;
text-align: left;
background: #4c4c4c;
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313));
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
}


#menu li a {
color: #FFFFFF;
display: block;
font-weight: normal;
margin: 0 0 5px;
outline: 0 none;
text-decoration: none;
}

.relative {
position: relative;
}

.dropdown_2columns {
display: none;
background: url("http://www.sme.org/MEMagazine/images/bg_menu_new.png") repeat-x scroll 0 0 transparent;
background: url("http://dev.sme.org/images/bg_menu_new.png") repeat scroll 0 0 transparent;
z-index: 999;
height: auto;
left: -6px;
top: 5px;
width: 97%;
}

.nav-arrow {display:inline; position: absolute; right: 10px; top: 7px; color:#FFF; font-size:180%; font-weight:normal;cursor:pointer;}


/*For Sme/ProductDetail page only */
/*Start-----Ticket#   Date:18-11-2013*/

tab_container
{
float: none;
}

.tab_box 
{
width: 97%;
}

ul.tabs li 
{
float: none;
}

.product_buttons 
{
float: left;
width: 100%;
}

ul.privacy li 
{
display: none;
}

.tab_content 
{
    width: auto;
}
.box {

width: 97%;
}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol, .eighteencol {
width: 98%;
margin-left: 2px;
}

 /*used in productdetail page...to show productdetails after image in next line...in full page image is showing in left then content is in right side.
 for mobile image and content like product title, code pricing should display in difrent line left aligned*/
 .titleimg
 {
     float:none;
     margin-right: 10px;
 }
/*End-----Ticket#   Date:18-11-2013*/
}