html {overflow: hidden; margin: 0px; padding: 0px;}

body { 
background: #000; 
cursor: default; 
margin: 0px;
padding: 0px;
}


a {text-decoration: none; cursor: default; }
td {margin: 0px; padding: 0px;}
tr {margin: 0px; padding: 0px;}
img {border: none;}
/*---------------------------------------------------
Image Scrollbar Definitions
-----------------------------------------------------*/


/* hide from incapable browsers */
div#scrollbar { 
display:none;

}

/* below in external file */

#scrollbar a {color: #000;}
div#scrollbar { 
position: absolute; 
bottom: 30px;
left: 0px; 
    width:100%; height:23px;
    display:block; /* display:none initially */
    font-size:1px;  /* so no gap or misplacement due to image vertical alignment */
  }

div#track { 
    position:absolute; left:70px; top:0;
    width:95%; height:23px; 
    background: url(images/track.jpg) top left repeat-x; 

  }
div#dragBar {
    position:absolute; left:1px; top:1px;
    width:62px; height:18px; 
    background: url(images/bar.png) top left no-repeat; 

  }  

div#right { 
position:absolute; right:0px; top:0;
width: 70px; 
height: 23px; 
background: url(images/right.jpg) top left no-repeat; 
display: block; 

}

div#left { 
position:absolute; left:0px; top: 0px;
width: 70px; 
height: 23px; 
background: url(images/left.jpg) top left no-repeat; 
display: block; 
}

div#left a {display: block; height: 23px;}
div#right a {display: block; height: 23px;}

/* for safari, to prevent selection problem  */
div#scrollbar, div#track, div#dragBar, div#left, div#right {
    -moz-user-select: none;
    -khtml-user-select: none;
}

/* so no gap or misplacement due to image vertical alignment
font-size:1px in scrollbar has same effect (less likely to be removed, resulting in support issues) */
div#scrollbar img {
    display:block; 
    } 


/*---------------------------------------------------
Wraps and Header Wrap Info
-----------------------------------------------------*/

#mainwrap { 
width: 100%: 
}

#contentwrap {}

.clear {clear: both; display: block; }

.photo { 
margin: 0px 3px 0px 0px; 
padding: 3px 3px 3px 3px; 
background: #060606;
}

/*---------------------------------------------------
Middle Elements
-----------------------------------------------------*/

#header1 {margin 0 auto; margin-top: 80px; }

#indexbg {
background: url(index.jpg) top left no-repeat; 
margin: 0 auto; 
width: 724px; 
height: 366px; 
}

#indextop { 
background: url(images/top.png) top left no-repeat; 
margin: 0 auto; 
width: 724px; 
height: 366px; 
}

#indexing { 
background: transparent url(images/portfolio.jpg) top left no-repeat; 
height: 45px; 
width: 724px; 
margin: 0 auto;}

#indexing span { 
font-size: 1.0em;
visibility: hidden; 
}

#indexing ul{
padding: 0px; margin: 0px;
}

#indexing li {
display: block; 	
list-style: none;
margin: 0;
padding: 0;
}

#indexing a { 
display: block; 
height: 45px;
text-decoration: none;
}

#indexnavi {
background: transparent url(images/portfolio.jpg) top left no-repeat;
margin: 0;
padding: 0;
position: relative; 
width: 724px; 
}

#indexnavi li {position: absolute;}

#index1 {
top: 0px;
left: 72px;
width: 216px; 
}

#index2 {
top: 0px;
left: 426px;
width: 216px; 
}

#index1 a:hover { background: url(images/portfolio.jpg) -72px -45px no-repeat; }
#index2 a:hover { background: url(images/portfolio.jpg) -426px -45px no-repeat;}


/*---------------------------------------------------
Actual Text Elements
-----------------------------------------------------*/

#scrollit { 
margin: 80px auto; 
background: transparent url(images/about.jpg) top left no-repeat;
width: 700px; 
height: 421px; 
overflow: auto; 
}

#scrolltext {
color: #3b3b38; 
text-align: justify; 
font: 12px sans-serif; 
line-height: 22px; 
padding: 0px 10px 0px 10px; 
width: 660px; 
letter-spacing: 0.1em; 
}

#scrollit h1 { 
color: #a6a6a1; 
font: italic 22pt georgia; 
letter-spacing: 0.03em;  
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px; 
letter-spacing: 0.001em; 
text-transform: lowercase; 
}


#scrollit li { list-style-type: disc;}
#scrollit p {text-indent: 10px; margin: 5px 0px 10px 0px;}

#scrollit a:visited{ color:#7f7f78;}
#scrollit a:link { color:#7f7f78;}
#scrollit a:active { color:#7f7f78;}
#scrollit a:hover { color:#5e5e56;}


#scrollit input, select, option, textarea { 
color: #5e5e56;
background: #000;
font: 9px verdana;
padding: 1px;
margin: 0px; 
border: 1px solid #5e5e56; 
letter-spacing: 0.3ex; 
}

/*---------------------------------------------------
Main Content Elements
-----------------------------------------------------*/

#text { 
white-space: nowrap; 
position: absolute; 
}

#text img {margin-top: 60px; display: inline; vertical-align: top;}

/*---------------------------------------------------
Top Navigation Information
-----------------------------------------------------*/

#subset { 
margin: 0px 0px 0px 0px;
padding: 0; 
width: 500px; 
position: absolute; 
top: 40px; 
left: 20px; 
z-index: 4; 
float: left; 
color: #fff; 
font: bold 14px arial; 
}

#subset li {list-style: circle; float: left; margin-right: 10px; margin-left: 10px; }
#subset a:active {color: #fff;}
#subset a:link {color: #fff;}
#subset a:visited {color: #fff;}
#subset a:hover {border-bottom: 1px solid #000; color: #7d7d7d; }

#head2 {
background: transparent url(images/header.jpg) top right repeat-x;
height: 65px; 
position: absolute;
top: 0px; 
width: 100%; 
z-index: 3; 
}

#head2 span { 
font-size: 1.0em;
visibility: hidden; 
}

#head2 ul{
padding: 0px; margin: 0px;
}

#head2_navi {width: 600px;}

#head2 li {
display: block; 	
list-style: none;
margin: 0;
padding: 0;
}

#head2 a { 
display: block; 
height: 65px;
text-decoration: none;
}

#navi {
background: transparent url(images/header.jpg) top right no-repeat;
margin: 0;
padding: 0;
position: relative; 
width: 600px; 
float: left; 
z-index: 2; 
}

#navi li {position: absolute;}

#navi2 { 
margin: 0px 0px 0px 0px;
padding: 0; 
width: 161px; 
height: 65px; 
position: relative; 
float: right; 
}

#link1 {
top: 0px;
left: 0px;
width: 128px; 
background: url(images/header.jpg) 0px -81px no-repeat;
}

#link2 {
top: 0px;
left: 128px;
width: 129px; 
background: url(images/header.jpg) -128px -81px no-repeat;
}

#link3 {
top: 0px;
left: 257px;
width: 129px; 
background: url(images/header.jpg) -257px -81px no-repeat;
}

#link4 {
top: 0px;
left: 0px;
width: 175px; 
background: url(images/header.jpg) 0px -243px no-repeat;
}

#link5 {
top: 0px;
left: 175px;
width: 169px; 
background: url(images/header.jpg) -175px -243px no-repeat;
}

#link6 {
top: 0px;
left: 344px;
width: 111px; 
background: url(images/header.jpg) -344px -243px no-repeat;
}

#link7 {
top: 0px;
left: 455px;
width: 139px; 
background: url(images/header.jpg) -455px -243px no-repeat;
}


#logoit {
top: 0px;
left: 0px;
width: 160px;
background: url(images/sidelogo.jpg) 0px 0px no-repeat;
}

#link1 a:hover { background: url(images/header.jpg) 0px -162px no-repeat; }
#link2 a:hover { background: url(images/header.jpg) -128px -162px no-repeat;}
#link3 a:hover { background: url(images/header.jpg) -257px -162px no-repeat;} 
#link4 a:hover { background: url(images/header.jpg) 0px -324px no-repeat;}
#link5 a:hover { background: url(images/header.jpg) -175px -324px no-repeat;} 
#link6 a:hover { background: url(images/header.jpg) -344px -324px no-repeat;}
#link7 a:hover { background: url(images/header.jpg) -455px -324px no-repeat;} 
#logoit a:hover { background: url(images/sidelogo.jpg) 0px -81px no-repeat;}


/*---------------------------------------------------
Footer Navigation Information
-----------------------------------------------------*/

#footer {
background: transparent url(images/bottomrepeat.jpg) top left repeat-x; 
height: 32px; 
position:absolute;
bottom:0; 
left:0;
width: 100%; 
}

#footer span { 
font-size: 1.0em;
visibility: hidden; 
}

#footer ul{
padding: 0px; margin: 0px;
}

#footer li {
display: block; 	
list-style: none;
margin: 0;
padding: 0; 
}

#footer a { 
display: block; 
height: 32px;
text-decoration: none;
}

#navi3 {
background: transparent url(images/bottomnavi.jpg) top left no-repeat;
margin: 0;
padding: 0;
position: relative; 
width: 250px; 
height: 32px; 
float: left; 
}

#navi3 li {position: absolute;}

#navi4 { 
background: transparent url(images/bottomsub.jpg) top left no-repeat; 
width: 210px; 
height: 32px; 
margin: 0;
padding: 0; 
position: relative; 
float: right; 
}


#navi4 li {position: absolute;}

#bottom1 {
top: 0px;
left: 0px;
width: 72px; 
}

#bottom2 {
top: 0px;
left: 72px;
width: 71px; 
}

#bottom3 {
top: 0px;
left: 143px;
width: 107px; 
}

#bottomit1 {
top: 0px;
left: 0px;
width: 86px; 
}

#bottomit2 {
top: 0px;
left: 112px;
width: 97px; 
}
#bottom1 a:hover { background: url(images/bottomnavi.jpg) 0px -32px no-repeat; }
#bottom2 a:hover { background: url(images/bottomnavi.jpg) -72px -32px no-repeat;}
#bottom3 a:hover { background: url(images/bottomnavi.jpg) -143px -32px no-repeat;} 
#bottomit1 a:hover { background: url(images/bottomsub.jpg) 0px -32px no-repeat;}
#bottomit2 a:hover { background: url(images/bottomsub.jpg) -112px -32px no-repeat;}