/* 2Wire GUI stylesheet */

/* General page styles */
html { 
	margin: 0px;
	padding: 0px;
	}


body, div, td, th, h2, h3, h4 { /* redundant rules for bad browsers  */  
  font-family: Verdana, Lucida Sans Unicode, Lucida Grande, Lucida, Helvetica, san-serif;
	font-size:    11pt;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small;
	color: #333;
}  

body {
	background: #ffffff;
	color: #333;
	padding: 1em 20px 3em 20px;
	margin: 0;
}

body {
  text-align: center;
  }

/* Div specific styles */

#container {
  margin: 0 auto;
  /*width: 770px;*/
  width: 820px;
  text-align: left;
  }

#logo {
	background-image: url(/images/logo.jpg);
	background-repeat: no-repeat;
  background-position: right top;	
	height: 38px;
	margin: 10px 0px 10px 0px;
}

/* Header styles */

h1,h2 {
	font-family: Verdana, Georgia, serif;
	font-weight: normal;
	color: #666666;
}

h1 {
	font-size: 180%;
	margin: 0;
}

h1 a { text-decoration: none; color: #005293; }
h1 a:hover { border-bottom: 1px dotted #666; color: #000; }

h2 {
	/*font-size: 140%;*/
	font-size: 120%;
	color: #666666;
	padding-bottom: 5px;
	border-bottom: 1px solid #CCC;
	margin: 30px 0px 10px 0px;
}

h3 {
	font-size: 110%;
}

h3.underline {
    font-size: 110%;
    padding-bottom: 5px;
    border-bottom: 1px solid #CCC;
    margin: 10px 0px 10px 0px;
}

/*  Link styles */

a { color: #005293; }
a:hover { color: #333; }
a:active { color: #000; }

/* Paragraph styles */

p { line-height: 140%; }

p.note {
	background: #EEE;
	padding: 4px;
	font-family: tahoma;
	font-size: 85%;
	line-height: 130%;
	margin-top: 0;
}

p.warning {

padding: 0px 0px 30px 60px; /* setting up padding so that the entire icon shows */
background: transparent url('/icons/icon_warning.gif') left top no-repeat;
}

p.pcharge {

padding: 0px 0px 30px 60px; /* setting up padding so that the entire icon shows */
background: transparent url('/icons/pcharge_big.gif') left top no-repeat;
}

p.bcharge {

padding: 0px 0px 30px 60px; /* setting up padding so that the entire icon shows */
background: transparent url('/icons/bcharge_big.gif') left top no-repeat;
}

p.fcharge {

padding: 0px 0px 30px 60px; /* setting up padding so that the entire icon shows */
background: transparent url('/icons/adv_c_large.gif') left top no-repeat;
}
p.undocharge {

padding: 0px 0px 30px 60px; /* setting up padding so that the entire icon shows */
background: transparent url('/icons/undo_large.gif') left top no-repeat;
}


p.reseller {

padding: 0px 0px 30px 60px; /* setting up padding so that the entire icon shows */
background: transparent url('/icons/reseller.gif') left top no-repeat;
}

p.customer {

padding: 0px 0px 30px 60px; /* setting up padding so that the entire icon shows */
background: transparent url('/icons/customers.gif') left top no-repeat;
}

p.distributor {

padding: 0px 0px 30px 60px; /* setting up padding so that the entire icon shows */
background: transparent url('/icons/distributor.gif') left top no-repeat;
}

p.agent {

padding: 0px 0px 30px 60px; /* setting up padding so that the entire icon shows */
background: transparent url('/icons/agents.gif') left top no-repeat;
}

p.product {

padding: 0px 0px 30px 60px; /* setting up padding so that the entire icon shows */
background: transparent url('/icons/product.gif') left top no-repeat;
}

p.rate {

padding: 0px 0px 30px 60px; /* setting up padding so that the entire icon shows */
background: transparent url('/icons/dollar.gif') left top no-repeat;
}

p.cos {

padding: 0px 0px 30px 60px; /* setting up padding so that the entire icon shows */
background: transparent url('/icons/cos.gif') left top no-repeat;
}

p.warningred {
	color: #cc0000;
}

/* Table styles */

table.centerdata td {
  text-align:  center;
}

table.centerdata td.rowlabel {
  text-align:  left;
}

table.coloredtable {
  border: 1px solid #aaa;
}

table.coloredtable th {
  /*background-color: #ccc;*/
  background-color: #cfe6f3;
}

th {
	text-decoration : underline;
}

td {
  padding: 0.2em;
}

td.tablesidebold {
	font-weight: bold;
	white-space: nowrap;
  padding-right: 30px;
}

td.tablesidelabel {
  font-weight: bold;
  white-space: nowrap;
  width: 170px;
}

td.indent {
	padding-left: 40px;
}

tr.odd {
	  /*background-color: #DDDDDD;*/
	  background-color: #ecf1f3;

}

tr.even {
	
  /*  Currently clearing this out, so that it displays the background color */
}

/* Styling the hr tag */
hr {
	border: none 0;
	border-top: 1px dashed #CCC;/*the border*/
	width: 100%;
	height: 1px;/*whatever the total width of the border-top and border-bottom equal*/
}

/* Styling the classes */

.leftcontent {
	width: 60%;
	float: left;
margin: 0px;
padding: 0px;
}

.rightcontent {
	width: 30%;
	float: right;
	
}


.leftcolumn {
  width: 45%;
  float: left;
}

.rightcolumn {
  width: 45%;
  float:right;
}

.clearend {
	clear:both;
}

input.rightbutton {
	display:inline;
	float:right;
margin-top: -23px;
}

img.centerimg {
	vertical-align: middle;
}

.middle {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

a img {
  border:none;
}

/* Setting up the sidebox */
.sidebox {
	margin-bottom: 30px;
	border: 1px solid #CCC;
}

/* Setting up the sidebox header */
div.sidebox h2 {
font-family: Verdana, Georgia, serif;
font-weight: normal;
font-size: 140%;
margin-top: 0px;
padding: 10px 20px;
white-space: nowrap;
}

/* Setting up the sidebox paragraphs */
div.sidebox p {
	margin: 5px;
}

/* Setting up the quickservice list */
ul.quickservice {
  list-style-type: none;
  padding: 0;
  margin: 5px;
}

ul.quickservice li img{
  padding:5px;
}

/* Setting up the fake buttons from list */
ul.buttonlist {
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

ul.buttonlist li {
display: inline;
list-style-type: none;
}

ul.buttonlist a { padding: 3px 10px; }

ul.buttonlist a:link, ul.buttonlist a:visited
{
color: #555;
background-color: #ccc;
text-decoration: none;
}

ul.buttonlist a:hover
{
color: #fff;
background-color: #aaa;
text-decoration: none;
}

ul.buttonlist span {
  padding: 3px;
  color: #fff;
  background-color: #aaa;
  text-decoration: none;
}


/* Setting up the fake buttons from hrefs */
.fakebutton {
	margin-bottom: 3px;
	margin-top: 3px;
}

.fakebutton a {
	padding: 4px;
	text-decoration: none;
	display: inline;
	color: #000000;
	background-color: #f0f0f0;
	border-top: 2px #ffffff solid;
	border-left: 2px #ffffff solid;
	border-bottom: 2px #848484 solid;
	border-right: 2px #848484 solid;
}

.fakebutton a:active {
	background-color: #f0f0f0;
	border-top: 2px #848484 solid;
	border-left: 2px #848484 solid;
	border-bottom: 2px #ffffff solid;
	border-right: 2px #ffffff solid;
}

.clearhack { display: inline; } /*Clears Box Model Hack in IE5*/

/* Error and Success message styling */

#errorlist {
  border: 2px solid #cc0000;
	padding: 10px;
}

#errorlist h3{
  font-size: 18px;
  padding-left: 20px;
  background: transparent url('/images/exclamation.gif') left no-repeat;
  margin-top: 0px;
}

#successlist {
  border: 2px solid #00cc00;
	padding: 10px;
}

#successlist h3{
  font-size: 18px;
  padding-left: 20px;
  background: transparent url('/images/info.gif') left no-repeat;
  margin-top: 0px;
}

/*  Show and Hide Sibling styling */
/*  Make sure to keep the .shrinker style above the .showsibling style, so that the cascade works properly on replacement. */

.shrinker {background: url(/images/arrow_up_gray.gif) no-repeat right center;}
.showsibling {background: url(/images/arrow_down_gray.gif) no-repeat right center;}


/* the div that holds the date picker calendar */
.dpDiv {
	}


/* the table (within the div) that holds the date picker calendar */
.dpTable {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	color: #505050;
	background-color: #ece9d8;
	border: 1px solid #AAAAAA;
	}


/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
	}


/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
	}


/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
	}


/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
	}


/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
	border: 1px solid #ece9d8;
	}


/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	}


/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
	background-color: #aca998;
	border: 1px solid #888888;
	cursor: pointer;
	color: red;
	}


/* the table cell that holds the name of the month and the year */
.dpTitleTD {
	}


/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
	}


/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
	}


/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	color: white;
	}


/* additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 12px;
	color: gray;
	font-weight: bold;
	}


/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {
	color: 4060ff;
	font-weight: bold;
	}


/* the forward/backward buttons at the top */
.dpButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	padding: 0px;
	}


/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	}