/* generals */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;background-color:#F7F7F7;}

body {background-color:#F7F7F7; margin:0; padding:0px; color:#9F9FA0; font:10px LinotypeUnivers,Helvetica,Verdana,"Arial Black",sans-serif; line-height:15px}

:focus {outline:0;}
ol, ul {list-style:none;}

/* links */
a {color:#9F9FA0;text-decoration:none;}
a:hover, a:active{text-decoration:none; color:#000}


div#outer{
    overflow:auto;
    height:720px;
    width:960px;
    position:absolute;
    top:0px;
    left:0px;
    text-align:left;
	background-color:#F7F7F7;
	
}

div#msg_area{
    height:160px;
    width:300px;
    position:absolute;
    top:20px;
    left:20px;
    text-align:left;
	background:url(../img/message_area.gif) no-repeat;
	color:#9F9FA0;
	font:12px LinotypeUnivers,Helvetica,Verdana,"Arial Black",sans-serif;
	text-decoration:none;
	padding-top:4px;

	
	
}

div#msg_area a{text-decoration:none}
div#msg_area a:hover, div#msg_area a:active{text-decoration:none; color:#000}

div#msg_padding{
    padding-top:px;
}

div#logo_area{
    height:68px;
    width:300px;
    position:absolute;
    top:180px;
    left:20px;
    text-align:left;
	
}

div#cts_area_1{
    height:472px;
    width:100px;
    position:absolute;
    top:248px;
    left:20px;
    text-align:left;
	
}

div#cts_area_2{
    height:472px;
    width:180px;
    position:absolute;
    top:248px;
    left:140px;
    text-align:left;
	
}

div#item_ol{
    height:720px;
    width:570px;
    position:absolute;
    top:0px;
    left:390px;
    text-align:left;
	
}

div#item_img{

    height:380px;
    width:570px;
	position:absolute;
    top:0px;
    left:0px;
    text-align:left;
	overflow: hidden;
	
}

div#item_credit{

    height:100px;
    width:570px;
	position:absolute;
    top:396px;
    left:0px;
    text-align:left;
	
}

div#item_numb{

    height:224px;
    width:570px;
	position:absolute;
    top:496px;
    left:0px;
    text-align:left;
	
}

div#site_credit{

    height:220px;
    width:180px;
	position:absolute;
    top:496px;
    left:780px;
    text-align:left;
	padding-top:4px;
	
}

/* logo */

#logo_area a {float:left; height:68px}
#logo_area a.logo {float:left;width:300px; background:url(../img/logo.gif) no-repeat}
  
/* contents 1 */
#slide
{
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100px;
  height: 472px;
  position: relative;
  overflow: hidden;
  font-family: verdana, sans-serif;
  font-size: 11px;
}
#slide li.sub
{
  float: left;
  height: 30px;
  line-height: 30px;
  width: 100px;
  text-indent: 20px;
  overflow: hidden;
  cursor: pointer;
  background: #ddd url(../img/cts_works.gif) no-repeat;
  
}

#slide li a.project
{
  float: left;
  height: 30px;
  width: 100px;
  text-indent: 20px;
  overflow: hidden;
  cursor: pointer;
  background:url(../img/cts_project.gif) no-repeat;
}

#slide li a.about
{
  float: left;
  height: 30px;
  width: 100px;
  text-indent: 20px;
  overflow: hidden;
  cursor: pointer;
  background:url(../img/cts_about.gif) no-repeat;
}

#slide li a.note
{
  float: left;
  height: 30px;
  width: 100px;
  text-indent: 20px;
  overflow: hidden;
  cursor: pointer;
  background:url(../img/cts_note.gif) no-repeat;
}


#slide li a.project:hover, #slide li a.project:active, #slide li a.about:hover, #slide li a.about:active, #slide li a.note:hover, #slide li a.note:active {background-position: 0 -32px;}



#slide li.clicked
{
  color: #800;
  background: #ddd url(../img/cts_works.gif) no-repeat;
  background-position:0 -32px;
}

#slide li.highlight
{
  color: #c00;
  background: #ddd url(../img/cts_works.gif) no-repeat;
  background-position:0 -32px;
}

/* #slide li.sub div height = (maximum sub lines * sub line height) + top level link height(variable fY in jQuery) */

#slide li.sub div
{
  background: #F7F7F7;
  height: 82px; /* defaoult 84px = #slide li a.blank */
  width: 80px;
  padding: 0 20px;
  font-family: verdana, sans-serif;
  text-indent: 0;
  
}
#slide li div ul
{
  padding: 0;
  margin: 0;
  list-style: none;
}
#slide li div ul li
{
  float: left;
  height: 24px;
  width: 100%;
}
#slide li div ul li a.new
{
  padding: 0;
  margin: 0;
  text-decoration: none;
  background: #F7F7F7 url(../img/cts_new.gif) no-repeat;
  font-size: 10px;
  display: block;
  height: 24px;
  width: 100%;

}


#slide li div ul li a.book, #slide li div ul li a.book_a
{
  padding: 0;
  margin: 0;
  text-decoration: none;
  background: #F7F7F7 url(../img/cts_book.gif) no-repeat;
  font-size: 10px;
  display: block;
  height: 24px;
  width: 100%;
  
  

}

#slide li div ul li a.graphic
{
  padding: 0;
  margin: 0;
  text-decoration: none;
  background: #F7F7F7 url(../img/cts_graphic.gif) no-repeat;
  font-size: 10px;
  display: block;
  height: 24px;
  width: 100%;
  
  

}


#slide li div ul li a.new:hover, #slide li div ul li a.book:hover, #slide li div ul li a.graphic:hover
{
  background-position:0 -26px;
}

#slide li div ul li a.new:active, #slide li div ul li a.book:active, #slide li div ul li a.graphic:active
{
  background-position:0 -26px;
}

#slide li div ul li a.book_a
{
  background-position:0 -26px;
}