body { font: normal 12px Arial, Helvetica, sans-serif; line-height: 16px; font: normal 12px Arial, Helvetica, sans-serif; margin: 0px; padding: 0px; }
:focus, *:focus, *:active { outline: 0; }
a, img { border: 0; outline: 0; }
.clrboth { clear: both; }
#page { width: 900px; margin: 0 auto; }
a { color: #0099FF; }
a:hover { color: #ec7635; }
.txtbold { font-weight: bold; }

/* Header */
#header { padding-top: 9px; }
#logo { float: left; width: 140px; padding-left: 20px; }
#header h1 { float: right; padding-top: 50px; text-align: center; width: 650px; color: #ec7635; font: bold 16px Helvetica, Arial, sans-serif; }

/* Menu */
#menu { float: left; margin-top: 15px; width: 100%; background: url(../images/menu-bk.jpg) repeat-x left top; }
#menu #mnu-left, #menu #mnu-right { float: left; background: url(../images/menu-left.jpg) no-repeat left top; width: 8px; height: 70px; }
#menu #mnu-right { float: right; background: url(../images/menu-right.jpg) no-repeat right top; }
#menu #mnu-cnt { float: left; width: 850px; text-align: center; }
#menu ul { float: left; width: 100%; padding: 0px; margin: 0px; padding-bottom: 7px; list-style-type: none; }
#menu ul li { float: left; height: 39px; background: url(../images/menu-sep.jpg) no-repeat right top; }
#menu ul li a { float: left; font-weight: bold; padding: 12px 10px; color: #FFFFFF; text-decoration: none; background: none; }
#menu ul li a:hover, #menu ul li a.selected { background: url(../images/menu-hgl.jpg) repeat-x left top; }
#menu p { margin: 0px; padding: 0px; color: #ec7635; font-weight: bold; }

#menu ul li { position: relative; }
#menu ul ul { border: solid 2px #afcae9; background-color: #254a78; width: 250px; position:absolute; display:none; top: 39px; left: 0px; padding-bottom: 0px; }
#menu ul ul li { height: 29px; background: none; text-align: left; border-bottom: solid 2px #2b507d; }
#menu ul li ul a { width: 210px; float:left; padding: 9px 20px; }

#menu ul ul ul { top: auto; border: solid 2px #afcae9; }	
#menu ul li ul ul { left: 180px; width: auto; }
#menu ul li ul ul a { width: 160px; float:left; }

#menu ul li:hover ul ul, #menu ul li:hover ul ul ul, #menu ul li:hover ul ul ul ul{ display:none; }
#menu ul li:hover ul, #menu ul li li:hover ul, #menu ul li li li:hover ul, #menu ul li li li li:hover ul{ display:block; }
#menu .hgl { background: url(../images/menu-hgl.jpg) repeat-x left top; }

/* Footer */
#footer { color: #254a78; background: url(../images/ftr-top.jpg) no-repeat left top; padding: 8px 0px 15px; text-align: center; }
#footer #flink { padding: 10px 0px 20px; background-color: #f3f3f3 }
#footer #flink span { padding: 9px 20px; border-bottom: solid 1px #ec7635;  }
#footer #flink a { color: #254a78; font-weight: bold; text-decoration: none; margin: 0px 6px; }
#footer #fcopy { font-size: 11px; background-color: #f3f3f3; padding-bottom: 10px; }
#footer #fcopy a { color: #254a78; text-decoration: none; }
#footer #flink a:hover, #footer #fcopy a:hover { color: #ec7635; text-decoration: underline; }
#footer #fbtm { background: url(../images/ftr-btm.jpg) no-repeat left top; height: 8px; }

/* Content */
#content { padding-top: 9px; }

/* Cleft */
#cleft { float: left; width: 225px; background: url(../images/cnt-left-bk.jpg) repeat-y left top; }
#cleft h1, #cleft h2 { margin: 0px; padding: 11px 0px 15px 15px; font-size: 13px; font-weight: bold; color: #FFFFFF; background: url(../images/cnt-left-h1-bk.jpg) no-repeat left top; }
#cleft h2 { background-image: url(../images/cnt-left-h2-bk.jpg); margin: 11px 4px; padding: 9px 0px; text-align: center; }
#cleft h2 a { color: #FFFFFF; text-decoration: none; }
#cleft h2 a:hover { text-decoration: underline; }
#cleft .img { padding: 9px 4px 0px; margin: 0px; }
#cleft ul { margin: 0px; padding: 6px 15px; list-style-type: none; background: url(../images/cnt-left-s-bk.jpg) repeat-y left top; }
#cleft ul li { padding: 3px 9px; background: url(../images/ul-bullet-nml.gif) no-repeat left 8px; }
#cleft ul li:hover { background-image: url(../images/ul-bullet-hgl.gif); }
#cleft ul li a { color: #000000; text-decoration: none; }
#cleft ul li a:hover { color: #ec7635; text-decoration: underline; }
#cleft ul ul { background: none; padding-left: 3px; width: 180px; }
#cleft ul ul li { padding: 3px 0px 3px 9px; }
#cleft .sbtm { height: 8px; padding: 0px; margin: 0px; background: url(../images/cnt-left-sbtm.jpg) no-repeat left top; }
#cleft .btm { height: 15px; padding: 0px; margin: 0px; background: url(../images/cnt-left-btm.jpg) no-repeat left bottom; }

/* cright */
#cright { float: left; width: 630px; padding: 0px 0px 0px 25px; }
#cright h1 { font-size: 25px; color: #ec7635;  }
#cright h2 { font-size: 19px; color: #254a78; font-weight: normal; }
#cright h2.bdr { border-bottom: solid 1px #ec7635; }
#cright .alcenter { text-align: center; padding-bottom: 40px; }
#cright ul { list-style-type: none; padding-left: 25px; }
#cright ul li { padding: 4px 0px 3px 15px; background: url(../images/ul-bullet-nml.gif) no-repeat left 8px; }
#cright .thumbs { float: right; padding: 2px; }
#cright .phgl { padding: 10px; text-align: center; font-weight: bold; font-size: 14px; line-height: 20px; color: #ec7635; }
#cright .flleft { float: left; padding: 3px 15px 9px 0px; }
#cright .flright { float: right; padding: 3px 0px 9px 15px; }
#cright .flleft img, #cright .flright img, #cright .bimg img { border: solid 1px #333; padding: 1px; }
#cright .nbdr img { border: 0px; padding: 0px; }
#cright .prod-logos { padding-left: 10px; padding-bottom: 20px; background-color: #e3e3e3; float: left; }
#cright .prod-logos .flleft { padding: 20px 15px 0px; }
#cright .bimg { float: left; width: 100%; background-color: #eee; }
#cright .bimg div { float: left; padding: 15px 18px 9px; width: 120px; font-size: 11px; font-weight: bold; color: #254a78; text-align: center; }
#cright .bimg div span { float: left; width: 120px; }
#cright .bimg div img { margin-bottom: 6px; }

/* Lightbox */
#jquery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 900; }
#jquery-lightbox { position: absolute; top: 10; left: 0; width: 100%; z-index: 1000; text-align: center; line-height: 0; }
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {	position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#lightbox-container-image { padding: 10px; }
#lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#lightbox-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; }
#lightbox-nav-btnPrev { left: 0; float: left; }
#lightbox-nav-btnNext { right: 0; float: right; }
#lightbox-container-image-data-box { font: 10px Verdana, Helvetica, sans-serif;	background-color: #fff;	margin: 0 auto;	line-height: 1.4em;	overflow: auto;	width: 100%; padding: 0 10px 0; }
#lightbox-container-image-data { padding: 0 10px; color: #666; }
#lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; }	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {	display: block; clear: left; padding-bottom: 1.0em; }			
#lightbox-secNav-btnClose {	width: 66px; float: right; padding-bottom: 0.7em; }

/* Download Table */
.download-tbl .rows { float: left; padding: 3px 0px; }
.download-tbl .ralt { background-color: #fbfbfb; }
.download-tbl .rhgl { background-color: #ffffd6; }
.download-tbl .hd { background-color: #CCCCCC; font-weight: bold; }
.download-tbl .col1, .download-tbl .col2, .download-tbl .col3, .download-tbl .col4, .download-tbl .col5, .download-tbl .col6
{ float: left; padding: 6px; }
.download-tbl .col1, .download-tbl .col3 { width: 60px; }
.download-tbl .col2 { width: 130px; }
.download-tbl .col4, .download-tbl .col5 { width: 100px; }
.download-tbl .col6 { width: 60px; }
.download-tbl .col6 a { padding: 3px 6px; background-color: #cde4fe; color: #294f7b; text-decoration: none; font-weight: bold; margin-left: 6px; }

/* Gallery */
#gallery a { float: left; border: solid 2px #FFFFFF; padding: 2px; margin: 10px; }
#gallery a:hover { border-color: #eb621c; }

/* contact */
.add { width: 100%; float: left; padding-bottom: 15px; }
.add .lbl { font-weight: bold; float: left; width: 70px; }
.add .cnt { float: left; }
#mnu-left{display:none}
#menu:hover #mnu-cnt{ display:block !important}
/*my responsive style goes here -----------------------------------------------------------*/
@media only screen and (min-width: 1024px) {

}
@media only screen and (min-width: 960px)and (max-width: 1023px) {

}
@media only screen and (min-width: 768px) and (max-width: 959px) {
#page{width:100% !important} 
#header ,#content {width:96%; padding:14px;float:inherit;}
#mnu-cnt ul a{padding:11px 5px !important}
#menu{width:98%}
#mnu-right{position:absolute; right:31px}
#logo{width:18%; padding:0}
#menu ul ul{width:222px !important}
#header h1{padding:0; width:81%; padding-top:35px; float:left}
#mnu-cnt{width:100% !important; float:left}
#mnu-cnt ul { float:left}
#mnu-cnt p{width:96%; min-height:70px}
#cleft {width:31%; float:left}
#cright{width:67%; float:left; padding-left:10px; overflow:hidden}
#cright p{margin:0}
#cright p img{width:100%}
#footer{width:100%}
#footer #flink span{padding:0 !important}
#footer #flink span a{margin:0}
#flink{width:99%}
.prod-logos{width:100%; padding:0 !important}
.prod-logos .flleft{width:27%; padding:15px 14px !important}
.bimg {width:100%}
.bimg > div{width:20% !important; padding:12px !important}
}


@media only screen and (min-width: 480px) and (max-width: 767px) {
#page{width:100% !important} 
#content{background:none !important}
#cleft ul{background:none;}
#cleft{background:#F3F3F3}
#header ,#footer ,#content {width:94%; padding:14px;float:inherit;}
#logo{width:60%; padding:0; margin-left:35%} 
#header h1{padding:0 !important; width:100% !important}
#cleft{float:left} 
#cright{width:100% !important; padding:0 !important}
#cright p img{width:100%}
#menu{width:100%}
#mnu-cnt{width:100% !important}
#mnu-right{position:absolute; right:14px !important;}
#menu #mnu-cnt {width:100%; float:left}
#menu #mnu-cnt ul{width:100%} 
#mnu-cnt p{width:100%;/*position:absolute; left:0; top:52%*/}

#menu #mnu-cnt ul li{width:100%; float:left; border-bottom:1px solid #2b507d } 
#mnu-cnt ul, #mnu-cnt li, #mnu-cnt li ul, #mnu-cnt li ul li{visibility:visible !important; display:block !important; position:relative !important; height:auto !important;}
#footer{width:100%; float:left; padding:0px !important}
#footer #flink{padding: 0 0 5px;}
#footer #flink span { padding:0px !important; }
#footer #flink a{font-weight:normal !important; margin:0px !important; width: 99%; float:left; padding:2px 0px !important; border-bottom:1px dotted }
#cleft{width:100%; float:left} 
#menu #mnu-left, #menu #mnu-right{height:auto}
#mnu-cnt{width:100% !important}
.prod-logos{width:100%; padding:0 !important}
.prod-logos .flleft{width:30%; padding:6px!important}
#cright{width:100%; overflow:hidden}
#cright img{width:100%}
.bimg > div {width:40% !important; min-height:115px}
.bimg img{width:100% !important}
#cright ul{padding:0}
#menu ul ul{position:relative !important }
/*footer end .........................................................................*/
#menu ul ul{top:0 !important}
#menu ul li a{width:100%; float:left; padding:10px 0; background:#254A78}
#mnu-cnt li ul{display:none !important; text-align:center !important}
#menu #mnu-cnt  li:hover ul { display: block !important;}
#menu ul li ul a{padding:10px 0 !important; width:100%; text-align:center}
#mnu-left{width:100% !important; text-align:center; padding:10px 0; color:#FFF;cursor:pointer;}
#mnu-cnt{display:none;}
#mnu-left{display:block}
 
}

@media only screen and (min-width: 320px) and (max-width: 479px){
#page{width:100% !important}
#header ,#footer ,#content {width:90%; padding:15px;float:inherit;}
#logo{width:60%; padding:0; margin-left:18%} 
#header h1{padding:0 !important; width:100% !important}
#cleft{float:left} 
#cright{width:100% !important; padding:0 !important}
#cright p img{width:100%; height:100%}
#menu{width:100%}
#mnu-cnt{width:100% !important}
#mnu-right{position:absolute; right:15px;}
#menu #mnu-cnt {width:100%; float:left; position:relative}
#menu #mnu-left, #menu #mnu-right{height:auto}
#menu #mnu-cnt ul{width:100%} 
#mnu-cnt p{width:100%;/*position:absolute; left:0; top:-17%*/}
#menu #mnu-cnt ul li{width:100%; float:left; border-bottom:1px solid #2b507d } 
#mnu-cnt ul, #mnu-cnt li, #mnu-cnt li ul, #mnu-cnt li ul li{visibility:visible !important; display:block !important; position:relative !important; height:auto !important;}
#footer{width:100%; float:left; padding:0px !important}
#footer #flink{padding: 0 0 5px;}
#footer #flink span { padding:0px !important; }
#footer #flink a{font-weight:normal !important; margin:0px !important; width: 99%; float:left; padding:2px 0px !important; border-bottom:1px dotted }
#cleft{width:100%; float:right} 
#cleft ul{padding-right:0}
#mnu-cnt{width:100% !important}
.prod-logos{width:100%; padding:0 !important}
.alcenter{padding:0 !important}
.prod-logos .flleft{width:95%; padding:5px!important}
#cright{width:100%; overflow:hidden}
#cright img{width:100%}
.bimg {width:100% !important}
.bimg img{width:100% !important}
#cright ul{padding:0}
#menu ul ul{position:relative !important }
/*footer end .........................................................................*/
#menu ul ul{top:0 !important}
#menu ul li a{width:100%; float:left; padding:10px 0; background:#254A78}
#mnu-cnt li ul{display:none !important; text-align:center !important}
#menu #mnu-cnt  li:hover ul { display: block !important;}
#menu ul li ul a{padding:10px 0 !important; width:100%; text-align:center}
#mnu-left{width:100% !important; text-align:center; padding:10px 0; color:#FFF;cursor:pointer;}
#mnu-cnt{display:none;}
#mnu-left{display:block}
 }

@media only screen and (min-width: 240px) and (max-width: 319px) {
#page{width:100% !important}
#header ,#content {width:86%; padding:15px;float:inherit;}
#logo{width:60%; padding:0; margin-left:18%} 
#header h1{padding:0 !important; width:100% !important}
#cleft{float:left} 
#cright{width:100% !important; padding:0 !important}
#cright p img{width:100%; height:100%}
.alcenter {padding:0 !important}
#menu{width:100%}
.flleft, .flright{width:100%; padding:0 !important}
#mnu-cnt{width:100% !important}
#mnu-right{position:absolute; right:16px;}
#menu #mnu-cnt {width:100%; float:left}
#menu #mnu-cnt ul{width:100%} 
#skype_c2c_menu_container{width:83%; left:15px !important;}
#mnu-cnt p{width:100%}
#menu #mnu-cnt ul li{width:100%; float:left; border-bottom:1px solid #2b507d } 
#mnu-cnt ul, #mnu-cnt li, #mnu-cnt li ul, #mnu-cnt li ul li{visibility:visible !important; display:block !important; position:relative !important; height:auto !important;}
#footer{width:100%; float:left; padding:0px !important}
#footer #flink{padding: 0 0 5px;}
#footer #flink span { padding:0px !important; }
#footer #flink a{font-weight:normal !important; margin:0px !important; width: 98%; float:left; padding:2px 0px !important; border-bottom:1px dotted }
#cleft{width:100%; float:left} 
#menu #mnu-left, #menu #mnu-right{height:auto}
#mnu-cnt{width:100% !important}
.prod-logos{width:100%; padding:0 !important}
.prod-logos .flleft{width:95%; padding:5px!important}
#cright{width:100%; overflow:hidden}
#cright img{width:100%}
.bimg {width:100% !important}
.bimg img{width:100% !important}
#cright ul{padding:0}
#menu ul ul{position:relative !important }
/*footer end .........................................................................*/
#menu ul ul{top:0 !important}
#menu ul li a{width:100%; float:left; padding:10px 0; background:#254A78}
#mnu-cnt li ul{display:none !important; text-align:center !important}
#menu #mnu-cnt  li:hover ul { display: block !important;}
#menu ul li ul a{padding:10px 0 !important; width:100%; text-align:center}
#mnu-left{width:100% !important; text-align:center; padding:10px 0; color:#FFF;cursor:pointer;}
#mnu-cnt{display:none;}
#mnu-left{display:block}
/*footer end .........................................................................*/
}