body{background-color:#fff; color:#555}

#bd{padding:8px 80px 40px 80px; background-color:#fff; font-size:123.1%;}
#hd{padding:4px 80px 4px 80px; margin-top:18px; background-color:#5CA9F3; font-size:131%;}
#ft{padding:30px 80px 4px 80px; color:#999; font-size:93%; border-top:1px solid #ccc}

.rGray{padding:5px 0 5px 0; border-bottom:1px solid #CCC; color:#333; font-size:100%}

fieldset{border: 3px solid #ccc; padding-bottom:18px;}
fieldset legend{font-weight:bold; margin-left:4px; padding:12px 8px; color:#999}

/* head/foot */
.datetime{ color:#FFF; font-size:138.5%; font-weight:bold;}
.companyname{color:#FBDB29; margin-bottom:8px; font-weight:bold;}
.borderbottom{background-color:#CCC; padding:2px 48px 0px 48px; height:22px;}
.footer{margin-top:4px; color:#999; text-align:center;}
.topright{text-align:right; color:#FFFFFF;}

/* text */
h1 {font-size:300%; text-align:center; font:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; color:#333333; letter-spacing:-2px;}
h2 {font-size:300%; font:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; color:#333333; letter-spacing:-2px;}

h4 {font-size:170%; font-weight:bold; color:#666; letter-spacing:-1px; margin-bottom:4px;}
.subhead {font-size:170%; font-weight:bold; color:#666; letter-spacing:-1px;}
p {color:#5D5D5D; margin-bottom:16px;}
td {font:Arial, Helvetica, sans-serif}
.date {color:#999; margin-bottom:4px; font-size:75%;}


.title{font-size:138.5%; font-weight:bold; margin-top:-1px;}
.subtitle{margin-bottom:10px; font-size:93%;}
.deletetitle{margin-bottom:12px; color:#FF0000; font-size:138.5%; font-weight:bold;}
.alert{color:#FF0000; font-weight:bold}
.confirm{color:#339900; font-weight:bold}
.inoutGreen{color:#339900; font-size:146.5%; font-weight:bold}
.inoutBlack{font-size:146.5%; font-weight:bold}
.dkgreen{color:#006600;}
.white{color:#fff;}
.purple{color:#9933FF;}
.green{color:#009900;}
.blue{color:#3333FF;}
.red{color:#FF0000;}
.gray{color:#999;}
.notice{color:#009900; font-weight:bold; margin-bottom:12px;}
.tablekey{margin-top:12px; font-size:85%; text-align:right;}

/* positions */
.h1pos{margin-bottom:16px;}
.marginbottom16{margin-bottom:16px;}
.marginbottom24{margin-bottom:24px;}
.marginbottom40{margin-bottom:40px;}
.marginbottom50{margin-bottom:50px;}
.marginbottom60{margin-bottom:60px;}


.titlePos{margin-bottom:16px;}
.linktabsPos{margin-bottom:16px;}
.subtitlePos{margin-bottom:4px;}
.listPos{margin-top:12px;}
.menuPos{margin-top:24px; margin-left:114px;}
.peditPos{margin-top:24px;}
.printPos{text-align:right; padding:30px 0 0 0;}

/* forms */
.rLabel{padding-right:20px; font-size:93%; color:#333; font:Arial, Helvetica, sans-serif}
.rLabel2{padding:8px 20px 0 0; font-size:93%}
.btn{margin-top:20px; width:80px; margin-bottom:16px; padding-bottom:2px; *padding-bottom:0px;}
.outbtn{ background-color:#FF6600; margin-top:20px; width:240px; height:60px; margin-bottom:16px; font-size:150%; padding-bottom:3px; *padding-bottom:0px;}
.pbtn2{margin-top:20px; width:120px; height:30px; margin-bottom:16px; font-size:150%; padding-bottom:3px; *padding-bottom:0px;}
.btnwide{margin-top:20px; width:110px; padding-bottom:2px; *padding-bottom:0px;}
.ffsearch{width:100px;}
.ff10{width:26px;}
.ff15{width:37px;}
.ff20{width:50px; margin:0 8px 0 0;}
.ff25{width:60px; margin:0 8px 0 0;}
.ff30{width:85px; margin:0 8px 0 0;}
.ff40{width:100px; margin:0 8px 0 0;}
.ff50{width:146px; margin:0 8px 0 0;}
.ff100{width:300px; margin:0 8px 0 0;}
.ff150{width:368px; margin:0 8px 0 0;}
.ff200{width:488px; margin:0 8px 0 0;}
.ff540{width:540px; margin:0 8px 0 0;}
.fftime{width:50px;}

/* lists */
.hBlue{padding:2px 0 3px 0; background-color:#BADFFF; color:#006699; font-weight:bold; font-size:93%}
.hBlue2{padding:2px 0 3px 0; background-color:#BADFFF; color:#006699; font-weight:bold; font-size:85%}
.hGreen{padding:2px 0 3px 0; background-color:#BBEABA; color:#388032; font-weight:bold; font-size:85%}
.hOrange{padding:2px 0 3px 0; background-color:#FFD895; color:#996600; font-weight:bold; font-size:85%}
.hSlate{padding:2px 0 3px 0; background-color:#CDDAEE; color:#4A658D; font-weight:bold; font-size:85%}
.hViolet{padding:2px 0 3px 0; background-color:#CCCCED; color:#8A4FE4; font-weight:bold; font-size:85%}
.hGray{padding:2px 0 3px 0; background-color:#DDDDDD; color:#656565; font-weight:bold; font-size:85%}
.fGray{padding:2px 0 3px 0; background-color:#DDDDDD; color:#656565;}
.rLineForm{ margin-bottom:40px; border-bottom:1px solid #CCC; font-size:85%}
.rLine{padding:4px 0 4px 0; border-bottom:1px solid #CCC; font-size:85%}
.rLineC{padding:4px 0 4px 0; border-bottom:1px solid #CCC; font-size:85%; text-align:center}
.rLine2{border-bottom:1px solid #CCC;}
.rLine3{padding-bottom:12px; border-bottom:1px solid #CCC;}
.rowpad{height:32px;}
.rowpad2{height:28px; padding:8px 0 0 0;}
.ip{margin-left:8px;}

.rToday{padding:4px 0 4px 0; border-bottom:1px solid #E3FFD6; font-size:85%}
.rWhite{padding:3px 0 3px 0; font-size:85%}
.totaltitle{font-weight:bold; padding-right:24px;}
.lheight{line-height:20px; font-size:85%}

/* home */
.home_title{ color:#666; padding:0 1em 1.5em 0;}
.home_settings{background-color:#F99151; width:160px; float:left; margin-right:24px;}
.home_users{background-color:#528EFB; width:160px; float:left; margin-right:24px;}
.home_reports{background-color:#55B850; width:160px; float:left; margin-right:24px;}
.home_label{margin-top:.95em; font-weight:bold}
.icon{float:left;}
.home_rowpad{padding:0 0 30px 0;}
a.homelink{text-decoration:none; color:#FFF;}
a.homelink:hover{text-decoration:underline; color:#FFF;}

/* links */

h3 {font-size:170%; font-weight:bold; letter-spacing:-1px; margin-bottom:4px;}
a.blogtitle{text-decoration:none; color:#009900;}
a.blogtitle:hover{text-decoration:underline; color:#009900;}

a.toplink{text-decoration:none; color:#FFF;}
a.toplink:hover{text-decoration:underline; color:#FFF;}

a.link{text-decoration:none; color:#0033FF;}
a.link:hover{text-decoration:underline; color:#009900;}

a.linkorange{text-decoration:none; color:#F66600;}
a.linkorange:hover{text-decoration:underline; color:#009900;}

a.linkBold{text-decoration:none; color:#0033FF; font-weight:bold}
a.linkBold:hover{text-decoration:underline; color:#009900;}

a.add{text-decoration:none; color:#006600; }
a.add:hover{text-decoration:underline; color:#009900;}
a.delete{text-decoration:none; color:#FF3300;}
a.delete:hover{text-decoration:underline; color:#009900;}


/* punch buttons */
input.inbutton{margin:12px 0; border:none; height:40px; width:200px; background:url('https://secure.webtimeclock.com/_images/punch_buttons/punch_in_on.gif') no-repeat;}
input.inbutton:hover{margin:12px 0; border:none; height:40px; width:200px; background:url('https://secure.webtimeclock.com/_images/punch_buttons/punch_in_hover.gif') no-repeat;}
input.outbutton{margin:12px 0; border:none; height:40px; width:200px; background:url('https://secure.webtimeclock.com/_images/punch_buttons/punch_out_on.gif') no-repeat;}
input.outbutton:hover{margin:12px 0; border:none; height:40px; width:200px; background:url('https://secure.webtimeclock.com/_images/punch_buttons/punch_out_hover.gif') no-repeat;}
.graybutton{margin:12px 0;}





.tabHome ul {list-style:none;}
.tabHome li {float:left; font-size:93%;}
.tabHome a {margin-right:14px; padding:3px 12px 3px 0px; color:#fff; background-color:#B0B0B0; text-decoration:none; display:block; text-align:center; font-weight:bold;}
.tabHome a:hover {color:#fff; background-color:#CBCACA; text-decoration:underline;}

.tabOff ul {list-style:none;}
.tabOff li {float:left; font-size:93%;}
.tabOff a {margin-right:14px; padding:3px 12px 3px 0px; color:#fff; text-decoration:none; display:block; text-align:center; font-weight:bold;}
.tabOff a:hover {color:#fff; text-decoration:underline;}

.tabOn ul {list-style:none;}
.tabOn li {float:left; font-size:93%;}
.tabOn a {margin-right:14px; padding:3px 12px 3px 0px; color:#FFFF00; text-decoration:none; display:block;  text-align:center; font-weight:bold;}
.tabOn a:hover {color:#FFFF00; text-decoration:underline;}

/* scroll buttons */
.scroll ul {list-style:none;}
.scroll li {float:left; font-size:12px;}
.scroll a {width:16px; *width:18px; height:16px; *height:18px; color:#333; border:1px solid #999; margin:0 0px; 

text-decoration:none; display:block; background-color:#FFF; text-align:center; font-weight:bold;}
.scroll a:hover {color:#FFF; border:1px solid #33CC00; background-color:#33CC00;}
.scrollOff {border:1px solid #999; margin:0 0px; background-color:#FFF; width:16px; *width:18px; height:16px; *height:18px;}