html, body {
height: 100%;
}

body {
margin:0px;
padding:0px;
background:#e6e6e6;
font-family: Helvetica, Arial, sans-serif;
font-size:80%;
}


div, p, a, img, h1, h2, h3, h4, h5, h6, table, tr, td, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

.small {font-size: 90%}
.bold {font-weight: bold;}
.hidden {display:none;}

a {
color: #f26722; 
font-weight: bold;
text-decoration: none;
outline:none;
border:0;
}

a:hover {text-decoration:underline;}



#outer{
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#container {
text-align: center;
position:relative;
vertical-align:middle;
display:table-cell;
height: 521px;
}

#inner {
position:relative;
width: 100%;
height: 529px;
text-align: center;
margin-left:auto;
margin-right:auto;
margin-top:-20px;
background: url(images/bg_inner.gif) repeat-x top left;
}

.main {
position:relative;
width: 960px;
height: 529px;
text-align: center;
margin: 0 auto 0 auto;
background: url(images/bg_main.gif) no-repeat top left;
}

* html #container{top:50%}
* html #inner{top:-50%;position:relative; margin-top: 0px;}
* + html #inner{top:5%;position:relative; margin-top: 30px;}


.display {
position: absolute;
display:block;
width: 491px;
height:357px;
left:235px;
top: 50px;
margin: 0;
padding: 0;
text-align:left;
}

.display h2 {
display:block;
width: 475px;
height:40px;
font-size: 1%;
text-indent: -5000px;
margin: 0 0 20px 0;
}

.display h2#h2_index {background: url(images/h2_index.gif) no-repeat top left;}
.display h2#h2_print {background: url(images/h2_print.gif) no-repeat top left;}
.display h2#h2_illustration {background: url(images/h2_illustration.gif) no-repeat top left;}
.display h2#h2_web {background: url(images/h2_web.gif) no-repeat top left;}
.display h2#h2_motion {background: url(images/h2_motion.gif) no-repeat top left;}
.display h2#h2_experience {background: url(images/h2_experience.gif) no-repeat top left;}

.display p {
color: #888;
font-size:120%;
line-height:160%;
padding: 0 40px 0 45px;
}

.display b {
display:block;
font-size: 90%;
color: #9b9b9b;
padding: 20px 40px 0 45px;
}




.description {
position: absolute;
right:0px;
top:246px;
width:171px;
height:120px;
text-align:left;
font-size: 90%;
_font-size:90%;
}

.description h4{
margin: 6px 0 0 0;
font-size:120%;
}

.description p{
margin: 5px 0 0 0;
font-size: 90%;
}



.navigation {
position: absolute;
left:0px;
top:246px;
width:171px;
height:120px;
}

.navigation ul {
list-style-type: none;
width:171px;
}


.navigation ul li a {
display:block;
height:24px;
width:171px;
text-indent: -5000px;
}


.navigation ul li a#print {background: url(images/menu_print.gif) no-repeat top left;}
.navigation ul li a#illustration {background: url(images/menu_illustration.gif) no-repeat top left;}
.navigation ul li a#web {background: url(images/menu_web.gif) no-repeat top left;}
.navigation ul li a#motion {background: url(images/menu_motion.gif) no-repeat top left;}
.navigation ul li a#experience {background: url(images/menu_experience.gif) no-repeat top left;}

.navigation ul li a#print:hover, .navigation ul li a#illustration:hover, .navigation ul li a#web:hover, .navigation ul li a#motion:hover, .navigation ul li a#experience:hover {background-position: 0 -24px;}

.navigation ul li a#print.on, .navigation ul li a#illustration.on, .navigation ul li a#web.on, .navigation ul li a#motion.on, .navigation ul li a#experience.on {background-position: 0 -24px;}


.sub_navigation {
position: absolute;
left:235px;
top:456px;
width:464px;
height:57px;
padding:0 0 0 13px;
_padding: 0 0 0 7px;
_width:468px;

margin:0;

}


.sub_navigation a {
display:block;
float:left;
height: 55px;
width: 65px;
margin: 0 4px 0 4px;
border: 1px solid #c1c1c1;
}



.sub_navigation a img {
padding: 0;
float:left;
}

.footer {
position: absolute;
left:171px;
bottom:-50px;
width:618px;
height:40px;
}

.footer a#menu_home {
display:block;
margin: 0 auto;
height: 40px;
width: 40px;
background: url(images/menu_home.gif) no-repeat top left;
font-size: 1%;
text-indent: -5000px;
}

.footer a#menu_home:hover {background-position: 0 -40px;}

.main#index .display b {color:#e24545;}
.main#print .display b, .main#print .description h4, .main#print a {color:#e12e97;}
.main#print .sub_navigation {border-right: 5px solid #e12e97; border-left: 5px solid #e12e97;}
.main#print .sub_navigation a:hover {border: 1px solid #e12e97;}
.main#illustration .display b, .main#illustration .description h4, .main#illustration a {color:#a42ee1;}
.main#illustration .sub_navigation {border-right: 5px solid #a42ee1; border-left: 5px solid #a42ee1;}
.main#illustration .sub_navigation a:hover {border: 1px solid #a42ee1;}
.main#web .display b, .main#web .description h4, .main#web a {color:#2ea4e1;}
.main#web .sub_navigation {border-right: 5px solid #2ea4e1; border-left: 5px solid #2ea4e1;}
.main#web .sub_navigation a:hover {border: 1px solid #2ea4e1;}
.main#motion .display b, .main#motion .description h4, .main#motion a {color:#3cb878;}
.main#motion .sub_navigation {border-right: 5px solid #3cb878; border-left: 5px solid #3cb878;}
.main#motion .sub_navigation a:hover {border: 1px solid #3cb878;}
.main#experience b.orange, .main#experience a {color:#f88722;}
.main#experience .display {height:430px;}

.main#experience table {line-height: 120%; font-size: 90%; _font-size:70%; padding: 0 30px 0 45px; margin: 10px 0 0 0; color: #9b9b9b;}
.main#experience table tr {vertical-align: top}
.main#experience table tr td b {padding: 0; margin: 0; display:inline;}
.main#experience table tr td a {padding: 0; margin: 0 0 -5px 0;}

* + html .main#experience table {font-size:70%;}

#image_flash_index {
margin: 50px 0 0 60px;
}