body {margin: 30px 0 0 0; }
html, body, #wrapper   { color: #666; font-size: 12px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #444444; text-align: center; height: 100% }
#wrapper  { text-align: left; width: 780px }

table {border-collapse: collapse;}
th, td {border-collapse: collapse; margin: 0;}

h1, h2, h3, h4    { color: #666; font-weight: normal; margin: 0; padding: 0 }
h1  { font-size: 25px }
h2  { font-size: 21px }
h3  { font-size: 18px }
h4   { font-size: 15px }
a   { color: #737373; font-size: 12px; text-decoration: none; text-align: left }
a:hover  { color: #f90 }
p   { color: #666; font-size: 12px; line-height: 1.6; text-align: left }
td  { font-size: 12px }
hr { color: #999; height: 1px }
img {border-color: black}


.top_cell      { background-color: #444444; height: 207px; vertical-align: top }
.mid_cell   { background-color: white; background-image: url("../img/mid-wrap.gif"); background-repeat: repeat-y; padding-top: 10px; vertical-align: top }
.bot_cell   { background-color: white; background-image: url("../img/footer.gif"); text-align: right; height: 102px; vertical-align: top }
.top_cell h1 a    { text-decoration: none; background-color: transparent; background-image: url("../img/logo.jpg"); background-repeat: no-repeat; background-attachment: scroll; text-indent: -2000em; display: block; z-index: 1000; width: 782px; height: 162px }
#ad_td  { background: white; text-align: center; border-bottom: 1px solid #ccc }
.top_grad       { background-image: url("../img/top-grad.gif"); background-repeat: repeat-x; margin-top: 0; width: 100%; height: 19px; float: left }
.top_grad h2  { color: #919191; font-size: 10px; font-style: italic; line-height: 1.8; text-align: right; margin-right: 5px }

.but       { background-image: url("../img/men-bar.gif"); background-repeat: no-repeat; width: 600px; height: 26px }
.but a          { border-left: 1px solid #ccc; line-height: 2.2; display: block; padding-right: 15px; padding-left: 15px; height: 26px; float: left }
.but a:hover         { color: #505050; background-image: url("../img/hover-top-but.gif"); background-repeat: repeat-x; height: 26px }

.cel_1   { width: 228px }
.cel_2  { width: 228px }
.cel_3   { width: 225px }
.cel_1, .cel_2, .cel_3  { display:inline; margin-top: 10px; margin-right: 16px; margin-left: 16; padding-bottom: 20px; float: left }

.frn_img {float:right;margin:0 0 8px 8px}

.square a  { background-image: url("../img/square.gif"); width: 51px; height: 50px; }
.circle a  { background-image: url("../img/circle.gif"); width: 46px; height: 45px; }
.triangle a { background-image: url("../img/triangle.gif"); width: 51px; height: 49px; }
.cheveron a  { background-image: url("../img/cheverons.gif"); width: 59px; height: 38px }
.square a, .circle a, .triangle a, .cheveron a  { float: left }

.square a:hover   { background-image: url("../img/square-col.gif") }
.circle a:hover  { background-image: url("../img/circle-col.gif") }
.triangle a:hover  { background-image: url("../img/triangle-col.gif") }
.cheveron a:hover   { background-image: url("../img/cheverons-col.gif") }

.admin_but a     { line-height: 1.7; background-image: url("../img/user_button.gif"); background-repeat: no-repeat; text-align: center; display: block; margin: 0 2px 5px; width: 90px; height: 21px; float: left }
.admin_but a:hover    { background-image: url("../img/user_button_on.gif") }

.bar     { background-image: url("../img/tutorial-pages/grad-logo.gif"); background-repeat: repeat-x; width: 780px; height: 56px; float: left }

.info_bx  { background-color: #fff; margin: 10px; width: 760; border: solid 1px #e0e0e0 }
.info_bx_pad  { padding: 8px }