/*
-----------------------------------------------
Grey Box Method - Layout CSS
----------------------------------------------- */
body{background:#4c4c4c url(../images/grad1.png) 0 0 repeat-x; color:#000; font-size:11px; padding:0 0 40px}
ol, ul{list-style:none}

/* anchors
----------------------------------------------- */
a{color:#222; font-weight:bold; text-decoration:none}
a:hover{ color:#ccc}

/* 960 grid system container background
----------------------------------------------- */
.container_12{/*background:#f0f6f6; */background:url(../images/main_div_middle.png) top left repeat-y}
.container_12 div.bottom{height:10px; background:url(../images//main_div_bottom.png) bottom left no-repeat}
.container_12 .wrap .ddmenu{background:url(../images/bg_applinks.png) 0 0 no-repeat; width:100%; height:160px}

/* headings
----------------------------------------------- */
h1, h2, h3, h4, h5, h6{line-height:1.2em; margin-bottom:.3em}
h2{margin-top:1em}
h5{font-size:1.2em}
h6{font-size:1em; text-transform:uppercase}

h1 a{font-weight:normal}

/* Text
----------------------------------------------- */
.textcaption{font-size:1.2em; font-weight:bold}

/* branding
----------------------------------------------- */
h1#branding{font-weight:normal; font-size:3em; text-align:left; background:url("../images/header_bg.png"); padding:.7em 1em; margin-bottom:0}

/* page heading
----------------------------------------------- */
h2#page-heading{font-size:20px; font-family:Arial,'Times New Roman',serif; color:#000; background:#f0f6f6; font-weight:bold; padding:.5em; margin:0 0 10px 0; border-bottom:1px solid #ccc}

/* section
----------------------------------------------- */
.pageSecAdd, 
.pageSecMap, 
.pageSecAboutUsContent, 
.pageSecAboutUsSub, 
.pageSecProductContent, 
.pageSecProductWideContent, 
.pageSecProductSub, 
.formSec{float:left; margin-left:10px; margin-right:10px}

.pageSecAdd{width:300px}
.pageSecMap{width:550px}
.pageSecAboutUsContent{width:780px}
.pageSecAboutUsSub{width:140px; _width:120px; _margin-left:0; _margin-right:0}
.pageSecProductContent{width:520px; _width:500px}

.pageSecProductContentHead a.image{ float:left;  margin:3px 10px 3px 0;  padding:4px}
.pageSecProductContentHead a.image img{ float:left}
.pageSecProductWideContent{width:720px;  _width:690px}
.pageSecProductSub{width:180px; _width:170px}
.formSec{width:500px}
.productSecMain{float:left; margin-left:5px; width:180px; text-align:center}

.productSecMain .box{/*height:420px; */height:320px}

.intropage{margin-right:10px; float:right; width:350px}

/* boxes
----------------------------------------------- */
.roundbox-opp2side{-moz-border-radius-topleft:0px;  -moz-border-radius-topright:15px;  -moz-border-radius-bottomleft:15px;  -moz-border-radius-bottomright:0px;  -webkit-border-top-left-radius:0px;  -webkit-border-top-rightright-radius:15px;  -webkit-border-bottom-left-radius:15px;  -webkit-border-bottom-rightright-radius:0px}
.roundbox-downside{-moz-border-radius-topleft:0px;  -moz-border-radius-topright:0px;  -moz-border-radius-bottomright:15px;  -moz-border-radius-bottomleft:15px;  -webkit-border-top-left-radius:0px;  -webkit-border-top-rightright-radius:0px;  -webkit-border-bottom-left-radius:15px;  -webkit-border-bottom-rightright-radius:15px}
.roundbox-allside{-moz-border-radius-topleft:10px;  -moz-border-radius-topright:10px;  -moz-border-radius-bottomright:10px;  -moz-border-radius-bottomleft:10px;  -webkit-border-top-left-radius:10px;  -webkit-border-top-rightright-radius:10px;  -webkit-border-bottom-left-radius:10px;  -webkit-border-bottom-rightright-radius:10px}
.box{background:#fff; margin-bottom:20px; padding:10px 10px 1px 10px; border:1px solid #ddd}
.box h2{font-size:1em; font-weight:normal; text-transform:uppercase; color:#fff; background:#333; margin:-10px -10px 0 -10px; padding:6px 12px}
.box h2 a, 
.box h2 a.visible{color:#fff; background:#003 url("../images/switch_minus.gif") 96% 50% no-repeat; display:block; padding:6px 12px; margin:-6px -12px; border:none}
.grid_4 .box h2 a{  background-position:97% 50%}
.grid_5 .box h2 a{  background-position:98% 50%}
.wrap .box h2 a{  background-position:99% 50%}

.box h2 a.hidden, 
.box h2 a.hidden:hover{background-image:url("../images/switch_plus.gif")}
.box h2 a:hover{background-color:#036}
.block{padding-top:10px}
div.menu{ padding:0;  margin-bottom:10px}
div.menu h2{ margin:0}
div.menu .block{padding-top:0}

.screenshots ul{list-style:none}
.screenshots li{ float:left;   margin:0 0 1.5em 5px}
.screenshots li a{ display:block;  /*background:#000; */ padding:1px;  border:2px solid #9a9a9a;  text-align:center;  -webkit-border-radius:4px;  -moz-border-radius:4px}
.screenshots li a:hover{border-color:#ccc}
.screenshots li a img{ display:block;  width:68px;  height:68px;  /*background:#000; */}

.list-group{margin-right:20px}
.list-group ul{}
.list-group ul li{text-align:left; font-size:11px; line-height:1.4em; margin-bottom:.5em;     text-shadow:#111 1px 1px 0; padding-left:15px; background:url(../images/bullet_new.png) no-repeat 0 .5em}

.small-list-group ul{}
.small-list-group ul li{text-align:left; font-size:11px; line-height:1.4em; margin-bottom:.5em;     text-shadow:#111 1px 1px 0; padding-left:15px; background:url(../images/bullet_new.png) no-repeat 0 .5em}

/* paragraphs, quotes and lists
----------------------------------------------- */
p{ margin-bottom:1em}
blockquote{ font-family:'Times New Roman',serif;  font-size:1.2em;  padding-left:1em}
blockquote cite{ font-size:.9em}
ul, ol{ padding-top:0}

/* product menus
----------------------------------------------- */
ul.pmenu{list-style:none}
ul.pmenu li{margin:0}
ul.pmenu li a{display:block; padding:2px 0 2px 14px}
ul.pmenu li a:hover{ color:#06f; background:#f0f6f6}
ul.pmenu li a:active{background:#ccc}

/* menus
----------------------------------------------- */
ul.menu{list-style:none; border-top:1px solid #bbb}
ul.menu li{margin:0}
ul.menu li a{display:block; padding:4px 10px; border-bottom:1px solid #ccc}
ul.menu li a:hover{ color:#06f; background:#f0f6f6}
ul.menu li a:active{background:#ccc}

/* submenus
----------------------------------------------- */
ul.menu ul{list-style:none; margin:0}
ul.menu ul li a{padding-left:30px}

/* section menus
----------------------------------------------- */
ul.section{border-top:0; margin-bottom:0}
ul.section li{text-transform:uppercase}
ul.section li a{background:#bbb}
ul.section li a:hover{background:#aaa}
ul.section li a:active{color:#fff; background:#666}
ul.section li li a{background:#ddd; border-bottom:1px solid #f0f6f6}
ul.section li li a:hover{background:#ccc}
ul.section li li a:active{color:#000; background:#fff}
ul.section ul li{text-transform:none}
ul.section ul.current li a{background:#f0f6f6; border-bottom:1px solid #fff}
ul.section ul.current li a:hover{background:#ddd}
ul.section ul.current li a:active{background:#fff}
ul.section li a.current{color:#fff; background:#666}
ul.section li a.current:hover{background:#555}
ul.section li a.current:active{background:#444}
ul.section li a.active{background:#fff; cursor:default}
ul.section li.current >a.active, 
ul.section li.current >a.active:hover{color:#fff; background:#666; cursor:default}

/* table
----------------------------------------------- */
table{ width:100%;  border:1px solid #bbb;  margin-bottom:10px}
col.colC{ width:8em}
th, td{ padding:.2em 1em;  text-align:left}
thead th{ border-bottom:2px solid #888;  background:#bbb;  padding:.4em 1em .2em}
thead th.table-head{font-size:1em; font-weight:normal; text-transform:uppercase; color:#fff; background:#555; border:1px solid #555}
tbody th, 
tbody td{ border-top:1px solid #bbb;  border-bottom:1px solid #bbb;  background:#f0f6f6}
tbody tr.odd th, 
tbody tr.odd td{ background:#fff}
tfoot th, 
tfoot td{ border-top:2px solid #666;  background:#f0f6f6}
tfoot tr.total th, 
tfoot tr.total td{ border-top:6px double #666}
tfoot tr.total th{ text-transform:uppercase}
th.currency, 
td.currency{ text-align:right}

/* forms
----------------------------------------------- */
form{ overflow:hidden}
fieldset{ border:1px solid #bbb;  padding:10px;  position:relative;  background:#fff;  margin-bottom:10px}
legend{ font-size:1.1em;  padding:.4em .8em;  background:#fff;  border:1px solid #bbb}
fieldset.login p{ margin-bottom:1em;  margin-top:0pt}
fieldset p label{ width:98%}
fieldset p input{ width:98%}
fieldset p select{ width:99%}
fieldset.login p label{ float:left;  line-height:2em;  margin-right:3%;  text-align:right;  width:32%}
fieldset.login p input{ width:60%}
fieldset.login input.button{ margin-left:35%}
form p.notice{ font-weight:bold}
input.search.text{ width:66%}
input.search.button{ width:28%;  margin-left:2%}

/* articles
----------------------------------------------- */
.articles{ padding:0}
.articles h2{ margin:0}
#articles{ padding-top:0}
.article{ border-top:1px solid #666;  padding-top:.5em}
.box .article{ border-top:3px solid #fff;  padding:13px 10px 0 10px}
.article h2{font-size:2em; font-weight:normal; text-transform:none; color:#333; background:transparent; padding:0; margin:0; border:none}
.article h3{ margin-bottom:.2em;  font-size:1.6em}
.box .first{ border-top:none}
.article h4{ font-size:1.2em;  text-transform:uppercase;  margin-bottom:.5em}
.article a.image{ float:left;  margin:3px 10px 3px 0;  padding:4px;  border:1px solid #bbb;  background:#fff}
.article a.image:hover{ border:1px solid #666}
.article a.image img{ float:left}
.article p.meta{ color:#666;  border-top:1px dotted #999;  border-bottom:1px dotted #999;  padding:.3em 0;  margin-bottom:.8em}

/* site information
----------------------------------------------- */
#site_info{text-align:center;  color:#333;  margin-bottom:10px}

/* AJAX sliding shelf
----------------------------------------------- */
#loading{float:right; margin-right:16px}
.block{padding-bottom:1px}

/* Accordian
----------------------------------------------- */
.toggler{color:#222; margin:0; padding:2px 5px; background:#f0f6f6; border-bottom:1px solid #ddd; border-right:1px solid #ddd; border-top:1px solid #f5f5f5; border-left:1px solid #f5f5f5; font-size:1.1em; font-weight:normal}
.element h4{margin:0; padding:4px; line-height:1.2em}
.element p{margin:0; padding:4px}
.float-right{padding:10px 20px; float:right}

#accordian-block{ padding-bottom:10px}

/* JAccordian - multiple 
----------------------------------------------- */
.jaccordion{/*width:360px; */font-family:Arial}
.jaccordion div{background-color:#fff}

.jaccordion div p a{margin:0; padding:0; border:none; background:#fff}

.jaccordion p{margin-bottom:10px; border:none; text-decoration:none; margin:0px; padding:10px}
.jaccordion a{display:block; color:#444; margin:0; padding:2px 5px; background:#f0eeee; border-bottom:1px solid #ddd; border-right:1px solid #ddd; border-top:1px solid #f5f5f5; border-left:1px solid #f5f5f5}
.jaccordion a:hover{color:#ccc; background-color:white}
.jaccordion a.selected{color:#06f; background-color:#fff}
.productBoxOrderInfo{background:url(../images/info.png) 0 0 no-repeat; padding-left:25px}
.productBoxDownloadPdf{background:url(../images/pdf.gif) 0 0 no-repeat; padding-left:25px}

.clear1{height:1px; clear:both; overflow:hidden}
.clear5{height:5px; clear:both; overflow:hidden}
.clear10{height:10px; clear:both; overflow:hidden}
.clear15{height:15px; clear:both; overflow:hidden}
.clear20{height:20px; clear:both; overflow:hidden}
.clear40{height:40px; clear:both; overflow:hidden}
.clear60{height:60px; clear:both; overflow:hidden}
.clear120{height:120px; clear:both; overflow:hidden}
.clear150{height:150px; clear:both; overflow:hidden}
.clear200{height:200px; clear:both; overflow:hidden}