/******   tribet holdings ltd -  css  *****/

/*****

i apologise if you're looking at this-
my css skills are so bad that the
code below will possibly make your eyes bleed,
or at least cause severe vomiting...

site design: the.x.man  basic web design
http://www.thexman.net.nz/web-design/
jono[at]thexman[dot]net[dot]nz

*****/



/*****  main elements  *****/


* {
  margin: 0;
  padding: 0;
}

* :focus {
  outline: 0;
}

img {
  border: 0;
}

a {
  text-decoration: none;
}

.hide {
  display: none;
}

body {
  text-align: center;
  cursor: default;
  font: normal 62.5% "Trebuchet MS", Tahoma;
  background: #9598b2;
  margin: 0 auto;
}

#wrapper {
  width: 712px;
  text-align: left;
  margin: 3px auto;
}

#container {
  position: relative;
  top: 0;
  left: 0;
  width: 712px;
}


/*****  h1, h2, h3  *****/


h1 {
  position: absolute;
  overflow: hidden;
  top: 14px;
  left: 8px;
  width: 443px;
  height: 76px;
  background: url(../background/h1.gif) 50% 0 no-repeat;
}

h1 span {
  display: block;
  position: relative;
  z-index: 1;
  margin: -250px 0 0 0;
}

h2 {
  color: #e2e5f4;
  font: 1.6em "Trebuchet MS";
  text-align: center;
  margin: 99px 261px 0 8px;
}

h3 {
  display: block;
  font: 1.3em "Trebuchet MS";
  text-align: center;
  color: #e2e5f4;
  margin: 12px 0 12px 20px;
}

h3.quote {
  font-style: italic;
}


/*****  header  *****/


#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 712px;
  height: 177px;
  background: url(../background/header.gif);
}

a#current {
  display: none;
}

a.home {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 30px;
  height: 30px;
  background: url(../background/home.gif);
  z-index: 10;
}

a.home:hover {
  background: url(../background/home.gif) -30px 0;
}


/*****  menu  *****/


ul {
  position: absolute;
  top: 121px;
  left: 6px;
  width: 446px;
  height: 44px;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  line-height: 44px;
  list-style: none;
}

li {
  display:  block;
  float: left;
  height: 44px;
  width: 110px;
  margin: 0 1px 0 0;
}

li#current a, li#current a:hover {
  color: #e2e5f4;
  cursor: default;
}

li a {
  color: #9598b2;
}

li a:hover {
  color: #fff;
}


/*****  content  *****/


#content {
  position: absolute;
  top: 177px;
  left: 0;
  width: 712px;
  font-size: 1.2em;
  color: #9598b2;
  background: url(../background/content.gif) repeat-y;
}

p {
  text-align: justify;
  margin: 6px 20px;
}

.intro {
  width: 419px;
  text-align: center;
}

.about {
  width: 419px;
}

a.content,
a.textLink {
  color: #9598b2;
  border-bottom: 1px dotted #4a516e;
}

a.content:hover,
a.textLink:hover {
  color: #fff;
  border-bottom: 1px solid #9598b2;
}

.feature {
  display: block;
  width: 419px;
  height: 293px;
  background: url(../background/hoty.jpg);
  margin: 19px 20px 6px 20px;
}

html>body .feature {
  margin: 27px 20px 6px 20px;
}

.feature p {
  color: #e2e5f4;
  padding: 6px 0 0 0;
  margin: 0 10px;
}

.feature a {
  font-weight: bold;
  font-style: italic;
  color: #9598b2;
}

.feature a:hover {
  color: #fff;
}

abbr {
  border-bottom: 1px dotted #9598b2;
}


/*****  skyline  *****/


.skyline {
  float: right;
  width: 241px;
  color: #9598b2;
  border: 1px solid #4a516e;
  border-right: 0;
  border-left: 0;
  background: url(../background/panelRight.gif) repeat-y;
  padding: 0 0 6px 0;
  margin: 12px 10px 6px 0;
}

html>body .skyline {
  padding: 0;
  margin: 12px 20px 12px 12px;
}

.skyline p {
  color: #e2e5f4;
  text-align: center;
  margin: 6px 0 0 0;
}

html>body .skyline p {
  margin: 6px 0;
}

a.skylineLink {
  display: block;
  width: 205px;
  height: 77px;
  background: url(../background/skyline.gif);
  margin: 6px 18px;
}

a.skylineLink:hover {
  background: url(../background/skyline.gif) 0 -77px;
}

p.skylineThumb {
  float: left;
  color: #9598b2;
  line-height: 15px;
  padding: 0 0 0 1px;
  margin: 6px 1px 6px 3px;
}

html>body p.skylineThumb {
  padding: 0;
  margin: 6px -2px 6px 7px;
}

p.skylineThumb img {
  margin: 0 0 3px 0;
}

.preamble {
  margin: 6px 0 0 0;
}

html>body .preamble {
  margin: 6px 0;
}

html>body hr {
  clear: both;
  width: 241px;
  height: 12px;
  border: 1px solid #4a516e;
  border-right: 0;
  border-left: 0;
  background: #232838;
  padding: 0;
  margin: 0 -7px;
}


/*****  footer  *****/


#footer {
  clear: both;
  width: 712px;
  height: 44px;
  font-size: .8em;
  color: #4a516e;
  background: #9598b2 url(../background/footer.gif) no-repeat;
}

#site-design {
  position: relative;
  top: -107px;
  left: -10px;
  width: 85px;
  height: 150px;
  margin: 0 0 -135px 0;
}

a.site-design {
  display: block;
  width: 11px;
  height: 107px;
  background: url(../background/site-design.gif);
}

a.site-design:hover {
  background: url(../background/site-design.gif) -11px 0;
}

.copyright {
  text-align: center;
  margin: 0 0 -100px 0;
}

#footer a {
  color: #4a516e;
}

#footer a:hover {
  color: #9598b2;
}