/* CSS Document */
* { margin: 0; padding: 0; }
#wrapper { position: absolute; border: 1px solid #000; width: 650px; left: 50%; margin-left: -325px; top: 40px; }

#wrapper h1 { text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #000; color: #FFFFFF; background-color: #000; }
#wrapper h1 span { font-size: smaller; color: #0066FF; }

#wrapper h2 { font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin: 70px 10px 0; border-bottom: 1px solid #000; }
#wrapper h2 span { color: #666600; text-decoration: none; }

.form h3 { position: absolute; font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; background-color: #000; padding: 5px 5px; left: -1px;  top: -29px;  }
.form h3 span { color: #FFFFFF; }

#intro-pic p { position: absolute; width: 200px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; text-align: center; line-height: 1.2em; border: 1px solid #000; padding: 10px; }
#intro-pic p span { color: #0099FF; font-weight: bold; }

#intro-pic p#para1 { left: -120px; top: -80px; }
#intro-pic p#para1 span.number { display: block; position: absolute; top: -20px; left: -20px; background: transparent url(../images/numbers_pixel.gif) no-repeat left top; width: 39px; height: 38px; }
#intro-pic p#para2 { left: 270px; top: -80px; }
#intro-pic p#para2 span.number { display: block; position: absolute; top: -20px; left: -20px; background: transparent url(../images/numbers_pixel.gif) no-repeat -40px 0; width: 39px; height: 38px; }
#intro-pic p#para3 { left: -120px; top: 300px; }
#intro-pic p#para3 span.number { display: block; position: absolute; top: -20px; left: -20px; background: transparent url(../images/numbers_pixel.gif) no-repeat -80px 0; width: 39px; height: 38px; }

#welcome-tracerout { position: absolute; top: 70px; left: 10px; width: 630px; height: 35px; background: #fff url(../images/application-traceroute.gif) top left; }
#build-tracerout { position: absolute; top: 70px; left: 10px; width: 630px; height: 35px; background: #fff url(../images/application-traceroute.gif) 0 -44px; }
#cust-tracerout { position: absolute; top: 70px; left: 10px; width: 630px; height: 35px; background: #fff url(../images/application-traceroute.gif) 0 -88px; }
#conf-tracerout { position: absolute; top: 70px; left: 10px; width: 630px; height: 35px; background: #fff url(../images/application-traceroute.gif) 0 -132px; }

#intro-pic { position: relative; background: transparent url(../images/building.gif) no-repeat left top; width: 358px; height: 300px; margin: 110px auto 10px; }

#intro-pic #right-col { position: absolute; height: 280px; border-right: 1px dotted #000000; right: -30px; bottom: -20px; }
#intro-pic #right-col span { display: block; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #663300; position: absolute; left: 15px; width: 100px; top: 125px; }

#intro-pic #bottom-row { position: absolute; width: 280px; height: 1px; border-bottom: 1px dotted #000000; bottom: -20px; right: -30px; }
#intro-pic #bottom-row span { display: block; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #663300; position: absolute; left: 125px; width: 100px; top: 15px; } 

#navbar { position: relative; height: 10px; background-color: #000000; bottom: 0; width: 100%; margin-top: 180px; }
#navbar a { display: block; }

#navbar a#previous-button { position: absolute; background: #fff url(../images/previous-button.gif) no-repeat left top; width: 79px; height: 25px; top: -50px; left: 20% }
#navbar a#continue-button { position: absolute; background: #fff url(../images/continue-button.gif) no-repeat left top; width: 79px; height: 25px; top: -50px; left: 60%; }

#navbar a#finish-button { position: absolute; background: #fff url(../images/finish-button.gif) no-repeat left top; width: 79px; height: 25px; left: 50%; margin-left: -40px; top: -50px; }

#navbar a#start-button { position: absolute; background: #fff url(../images/create-button.gif) no-repeat left top; width: 115px; height: 25px; top: -50px; left: 20%; }
#navbar a#view-button { position: absolute; background: #fff url(../images/view-button.gif) no-repeat left top; width: 115px; height: 25px; top: -50px; left: 60%; }

a#generate-button { display: block; position: absolute; background: #fff url(../images/generate-button.gif) no-repeat left top; width: 115px; height: 25px; top: 90px; right: 95px; }
a#addnewmap-button { display: block; background: #fff url(../images/addnewmap-button.gif) no-repeat left top; width: 115px; height: 25px; }
a#uploadmaps-button { display: block; background: #fff url(../images/uploadmaps-button.gif) no-repeat left top; width: 115px; height: 25px; float: left; padding-left: 20px; }

.form { position: relative; border: 1px solid #000000; margin: 50px 10px 0; }

table#floor input.text { width: 400px; height: 10px; font-size: 10px; color: #000; font-weight: bold; }
table#floor td input.text { width: 400px; height: 10px; font-size: 10px; color: #000; font-weight: bold; }

table td.label { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bolder; color: #0066FF; vertical-align: middle; }
table td input.text { width: 400px; height: 15px; font-size: 10px; padding-top: 5px; color: #000; font-weight: bold; }
table td input.smalltext { width: 50px; height: 15px; text-align: center; font-size: 10px; padding-top: 5px; color: #996600; font-weight: bold; }
table td input.file { width: 530px; height: 20px; font-size: 12px; }
span.info { font-size: 11px; padding-left: 10px; font-family: "Courier New", Courier, monospace; }
span.warning { color: #C30; }

p.default { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; text-align: center; padding: 5px 0; }
a.block { display:block; width: 20px; height: 20px; background-color: #000000; color: #FFFFFF; text-align: center; }
a.link { display: block; width: 20px; height: 20px; background: #fff url(../images/open-link.gif) no-repeat center center; color: #FFFFFF; }

table#presentation { position: relative; margin: 50px; margin-top: -1px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
table#presentation tr { position: relative; padding: 10px; }

table#presentation tr td { position: relative; display: block; border: 1px solid #000; }
table#presentation tr td div { width: 16px; height: 16px; background-color: #000; color: #fff; position: relative; width: 100%; height: 100%; margin-right: 20px; margin-bottom: 40px; padding-right: 40px; }

table#presentation tr td div.colspan { width: 16px; height: 16px; background-color: #000; color: #fff; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }

table#presentation tr td div.rowspan { width: 16px; height: 16px; background-color: #000; color: #fff; width: 100%; margin: 0; padding: 0; }

table#presentation tr td div span { display: block; position: absolute; left: 0; top: 2px; width: 50px;  }

a.anchoravailable { position: absolute; left: 50%; margin-left: -10px; top: 50%; margin-top: -10px; width: 20px; height: 20px; background: url(../images/ico_available.gif) no-repeat top left; }
a.anchoravailable:hover { background: url(../images/ico_available_hover.gif) no-repeat top left; }

a.anchorunavailable { position: absolute; left: 50%; margin-left: -10px; top: 50%; margin-top: -10px; width: 20px; height: 20px; background: url(../images/ico_sold.gif) no-repeat top left; }
a.anchorunavailable:hover { background: url(../images/ico_sold_hover.gif) no-repeat top left; }

a.anchorpayable { position: absolute; left: 50%; margin-left: -10px; top: 50%; margin-top: -10px; width: 20px; height: 20px; background: url(../images/ico_payed.gif) no-repeat top left; }
a.anchorpayable:hover { background: url(../images/ico_payed_hover copy.GIF) no-repeat top left; }