@import url('/custom.css');

html {
    /*overflow-x:hidden;*/
}

html,input, textarea, .dtree, select, pre, .ui-button-text {
    font-family: "HP Simplified", "HPSimplified", "Helvetica", "Arial", "sans-serif";
}

input[type="password"] {
    font-family: "Helvetica", "Arial", "sans-serif";
    height: 18px;
}

input[type="text"],
input[type="password"] {
    border:thin solid #B2B2B2;
}

input[type="text"]:focus,
input[type="password"]:focus { 
    outline: none;
    border-color: #0096D6;
}

body {
    padding:0;
    margin:0;
	/*background-color:#cccccc;*/
	font-size: 1em;
}

body.i {
    padding-top:15px;
}

body#body_title {
    /*font-size: 15px;*/
    background: #0096D6;
    border: 0;
}

body.inner_firmware {
	width:300px;
	height:30px;
	/*background-color:#cccccc;*/
}

textarea {
    border:1px solid #D2D2D2;
}

textarea.log {
    /*font-size:0.8125em;*/
    margin-top:10px;
    margin-left:10px;
    width:600px;
    height:400px;
    padding:5px;
}

/*chrome: input type is password, the background will become yellow.*/
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;
}

input.enable {
    visibility:visible;
    display:inline;
}

input.disable {
    visibility:hidden;
    display:none;
}

table.tbl_center {
    border:0px solid #000;
    text-align:center;
}

table#login_top {
    height: 90px;
    width: 100%;
    background-color:#0096D6;
    font-size:1.3em;
    color:#FFFFFF;
}
table#login_top_content {
    padding:0 40px 0 40px;
}

table#login_top_content td:first-child {
    width:132px;
    /*padding-left:40px;*/
}
table#login_top_content td#top_system_name {
    /*padding-right:40px; */
    text-align:right; 
    width:100%;
}

table#frame {
    border-collapse:collapse;
    border:0px solid #000; /* debug */
    width:100%;
    margin:0 auto;
}

table#table_logo {
    color:#ffffff;
    border:0px solid #000;
    height:90px;
    /*width:800px;*/
    width:100%;
    margin-left: auto; 
    margin-right: auto;
    font-size:0.8em;
    padding:0 40px 0 40px;
}

table#table_logo td#td_logo_image {
     width:132px;
/*     height:90px;*/
}
    
table#table_logo span#model_name {
    font-weight:bold;
    font-size:1.8em;
}

table#table_top {
    border-collapse:collapse;
}

table#frame tr#tr_top {
	height:90px;
}

table#frame td#td_top {
    /*background-image:url("/images/topframe.jpg");*/
    padding:0;
    margin:0;
    background-color:#003366;
}

table#table_menu {
    margin-top:0px;
    margin-bottom:0;
    border-collapse:collapse;
    border:0px solid #000;
    /*width:967px;*/
    margin-right: auto; 
    margin-left: auto;
}

td#td_mainmenu {
    border:0px solid #00f; /* debug */
    height:30px;
    vertical-align:middle;
}

td#td_mainmenu table {
    margin-left:20px;
    margin-bottom:0;
    border-collapse:collapse;
}

td.mainmenu {
    padding:0px 10px;
}

td.mainmenu a,
td.mainmenu a:link,
td.mainmenu a:visited
{
    text-decoration:none;
    color:#FFFFFF;
    font-weight:bolder;
    /*font-size:0.8125em;*/
}

a.current {color:#000000!important; background-color:#999999!important;} 
td.mainmenu a:active,
td.mainmenu a:hover
{
    color:#000000;
    background-color:#787878;
}

td.mainmenu a:link
{
	background-color:#666666;
}

td.mainmenu a:hover
{
	background-color:#787878;
}

td.submenu {
    padding:5px 10px;
}

td.submenu a,
td.submenu a:visited
{
    text-decoration:none;
    color:#FFFFFF;
    /*font-size:0.8125em;*/
}

a.current_submenu {color:#000000!important; background-color:#CCCCCC!important;} 
td.submenu a:active,
td.submenu a:hover
{
    color:#000000;
}

td.submenu a:link
{
	background-color:#999999;
}

td.submenu a:hover
{
	background-color:#ABABAB;
}

td.submenu a:active
{
	/*background-color:#cccccc;*/
}

td#td_submenu {
    border:0px solid #000; /* debug */
    padding-left:10px;
    height:30px;
    vertical-align:middle;
}

td#td_submenu table {
    margin-left:20px;
    border-collapse:collapse;
}

td#td_button {
    border:0px solid #000;
    height:20px;
    text-align:right;
}

td.editing {
    background-color:#0096D6!important;
    color:#ffffff!important;
}

table#table_button {
    width:100%;
    height:20px;
    margin-left:auto;
    margin-top:0;
    margin-right:20px;
    padding:0;
    border-collapse:collapse;
}

table#table_button table {
    margin-left:100px;
    border-collapse:collapse;
}

table#table_button td {
    padding:0;
    margin:0;
    word-wrap:break-word;
    word-break:break-all;
}

table#table_button input {
    width:66px;
    padding:0;
    margin:0;
}

td#td_content {
    padding:0;
    margin:0;
    text-align:center;
    /*background-color:#cccccc;*/
}

table#table_content {
    border-collapse:collapse;
/*    font-size:0.8125em;*/
    /*margin: 0px auto auto auto;*/
    width: 720px;
    margin-left:28px;
}

td.td_left {
    /*width:150px;*/
    text-align:right;
    vertical-align:top;
}

td.td_right {
/*    width:768px;*/
    text-align:left;
	margin-left:0px;
	/*padding-left:28px;*/
	padding-right:0px;
}

td#td_bottom {
    /*height:auto;
    padding:0;
    margin:0;*/
}

tr#tr_save {
    text-align:right;
}

td#td_save {
    text-align:right;
    padding-left:15px;
    padding-bottom:10px;
    margin-left:15px;
}

td#td_save input {
    /*margin-right:10px;*/
}

td#td_cancel {
   text-align:left;
   padding:15px;
   margin:15px;
}

tr#tr_apply {
    text-align:center;
}

td#td_apply {
    text-align:center;
    padding-top:10px;
	padding-bottom:10px;
}

table.centerapply{
	margin-left:auto;
	margin-right:auto;
}

h2 {
/*   	background-color:#999999;
    color:#343434;*/
    font-size:1.2em;
    height:22px;
    margin:0;
    padding:5px 5px 4px 0;
    text-align:left;
/*    visibility:hidden;*/
}

h3 {
    clear:both;
    color:#000000;
    font-size:1.2em;
    /*font-weight:bolder;*/
    margin:0 0 0 auto;
    padding-right:4px;
    /*padding-left:28px;*/
    text-align:left;
    vertical-align:middle;
    visibility:hidden;
}

h4 {
    /*font-size:16px;*/
    color:#893d3c;
    margin-left:10px;
    margin-bottom:0;
}

h5 {
    /*font-size:16px;*/
    color:#fff;
    padding:0 0 0 10px;
    margin:0 0 0 30px;
    text-align:left;
}

iframe#content {
    width:900px;
    height:500px;
    /*background-color:#cccccc;*/
    margin:0 auto;
    margin-bottom:10px;
    /*overflow:hidden;*/
}

div.hr_top {
    border-width:1px 0 0 0;
    border-style:solid;
    border-color:#C3E6F5;
    height:1px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
/*    margin-top:10px;*/
    margin-bottom:0;
}

div.hr_content {
    border-width:1px 0 0 0;
    border-style:solid;
    border-color:#D2D2D2;
    height:5px;
    width:100%;
/*    margin-left:10px;*/
    margin-right:auto;
    margin-top:2px;
    margin-bottom:0;
}

/*tr.l2tp,
h4,
span {
    visibility:hidden;
}*/

span.comment {
    color:#a44;
    font-weight:bold;
}

span.rule_num {
    font-size:0.8125em;
    margin-top:10px;
    margin-left:3.7em;
}

.warning {
    background-color:#ece798;
    border:1px solid #fff;
    color:#f00;
    font-size:0.8em;
    font-weight:bolder;
    /*padding:3px;*/
}

span#reboot_warning {
    margin-left:10px;
    color:#f00;
    font-size:14px;
    font-weight:bolder;
}

table.center {
    width:100%;
    position:fixed; /*no slider bar in login page*/
}

table.center td {
    text-align:center;
    vertical-align:middle;
}

table.inner,
table.inner_conbime {
    /*background-color:#cccccc;*/
    /*word-wrap:break-word;
    word-break:break-all;*/
}

table.inner {
    margin:0px 10px 0px 0;
}

table.inner td {
    /*font-size:0.8125em;*/
}

table.status {
    word-wrap:break-word;
    word-break:break-all;
}

.rulelist
{
    border:2px solid #999999;
    border-collapse: collapse;
    border-spacing: 0px;
    /*font-size:14px;*/
    width:670px;
    word-wrap:break-word;
    /*word-break:break-all;*/
    overflow:hidden;
    margin-left: 3em!important;
    margin-top: 10px!important;
    margin-bottom: 5px!important;
    /*background-color:#cccccc;*/
    /*border-collapse:separate;*/
}

.rulelist td {
    padding:5px;
    background-color:#ffffff;
    border:2px solid #E1E1E1;
}

.rulelist th {
	white-space: nowrap;
	word-break: normal;
	background-color:#999999;
	border:2px solid #E1E1E1;
}

.rulelist th#order {
    width:50px;
}

.rulelist th#operation {
    width:40px;
    white-space: nowrap;
}

.borderline {
    border:2px solid #999999;
    /*background-color:#cccccc;*/
    padding:5px;
    width:600px;
    border-collapse:separate;
}

table.note {
    border-collapse:collapse;
    margin:0px auto auto auto;
    width:339px;
}
table.note td{
    font-size:0.7em;
    color:#9A9A9A;
    text-align:left;
}

table.login {
    border:2px solid #999999;
    /*background-image:url('/images/bg_login.jpg');
    background-repeat:no-repeat;*/
    border-collapse:collapse;
    margin:auto auto;
    width:339px;
    height:250px;
}

table.login table {
    margin:auto auto;
/*    margin-top:45px;*/
    width:280px;
    font-weight:bold;
}

table.login table#login_title {
    width:280px;
    margin-top:10px;
    white-space: nowrap;
}

table.login table#login_title td{
    /*color:#FFFFFF;*/
    text-align:center;
    font-size:1.2em;
}
table.login table#login_input {

}

table.login td {
    padding:5px 0px 5px 0px;
/*    color:#836c7e;*/
    text-align:right;
}

table.login td input {
    width:170px;
}

table.login td.btn_center {
    text-align:right;
    vertical-align:middle;
    color:#FFFFFF;
}

td.vitem_separation {
	width:100px;
	width:120px\9;/*IE*/
}

td.vitem_front {
    text-align:center;
    width:3em;
}

td.vitem_menu {
    /*color:#000;*/
    /*font-size:0.8125em;*/
    text-align:left;
    padding:3px 0px 5px 0px;
    width:250px;
    /*background-color:#cccccc;*/
    white-space: nowrap;
}
td.vitem_conbime {
    padding:3px 0px 5px 0px;
}
td.vitem_conbime input {
    text-align:center;
    width:3em;
}

td.vitem_conbime_left {
    text-align:center;
    padding:3px 0px 5px 0px;
    width:3em;
}

td.vitem_conbime_right {
    text-align:left;
    padding:3px 0px 5px 0px;
    width:300px;
}

td.vitem_content {
    color:#000;
    /*font-size:14px;*/
    text-align:left;
    width:100px;
}

.inner th,
.inner_conbime th,
td.item_menu {
    background-color:#999999;
    color:#000;
    /*font-size:10pt;*/
    text-align:left;
    padding:5px;
}

td.item_menu#expire {
    width:220px;
}

td.item_menu#mac {
    width:180px;
}

td.item_menu#ip {
    width:180px;
}

td.item_combo {
    /*background-color:#cccccc;*/
    text-align:center;
    padding:5px;
}

.redbar {
    background-color:#178918;
    border:1px solid #fff;
}

div#fullscreen {
    /*background-color:#cccccc;*/
    visibility:hidden;
    filter:alpha(Opacity=0);
    -moz-opacity:0;
    opacity:0;
    position:absolute;
    top:0;
    left:0;
    width:99%;
    height:99%;
    text-align:center;
    vertical-align:middle;
    margin-top:auto;
    margin-bottom:auto;
}

div#fullscreen_text {
    z-index:200;
    visibility:hidden;
    font-size:64px;
    position:absolute;
    top:0;
    left:0;
    width:99%;
    height:99%;
    text-align:center;
    vertical-align:middle;
    margin-top:auto;
    margin-bottom:auto;
    /*background-image:url(/images/progress.gif);
    background-repeat:no-repeat;
    background-position:center center;*/
}

input.ip,
input.netmask,
input.mac {
    width:24px!important;
}

input.port {
    width:64px!important;
}

input.macxvi {
}

.description {
    /*font-size:0.8125em;*/
    margin-top:9px;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
}

table.tablemenu {
    margin-left: auto;
    margin-right: auto;
}

input[type="text"],input[type="password"] { width:150px; }
input[type='button'] { width:80px; font-weight:bold;}

/*question, save, cancel button*/
td#help {
    text-align:right;
}

img.all_button {
    cursor:pointer;
    border:0px;
}
img.active_button {cursor:pointer;border:0px;}
img.inactive_button {cursor:wait;border:0px;}
img.notallow_button {cursor:not-allowed;border:0px;}
table.inner a, td#td_save a {cursor:none;}

/*USB tree*/
.dtree {
	font-size: 12px;
	color: #666;
	white-space: nowrap;
}
.dtree img {
	border: 0px;
	vertical-align: middle;
}
.dtree a {
	color: #333;
	text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
	white-space: nowrap;
	padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
	color: #333;
	text-decoration: underline;
}
.dtree a.nodeSel {
	background-color: #c0d2ec;
}

.ui-button { background: #0096D6!important; color:#ffffff!important; border-width:0px!important;}
.ui-widget-content button.ui-state-hover {
    background: #006699!important;
}

button.cancel_button {
    background: #E5E8E8!important; color:#000000!important;
}
button.cancel_button:hover {
    background: #767676!important;
}