/* 
    Document   : __NAME__
    Created on : __DATE__, __TIME__
    Author     : __USER__
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root { 
    display: block;
}

body
{
	color: #ccc;
	font-family: "Trebuchet MS", "Lucida Grande", Arial, Helvetica, sans-serif;
	margin: 0 auto;
	padding: 0;
	font-size: 0.6em;
	background: #111 url('../images/bg/gradient1.gif') top left repeat-x;
}

p
{
    font-family: arial, helvetica, sans-serif; 
}

.link a
{
	float: right; 
	margin-right: 10px; 
	font-weight: bold;
	font-size: 16px;
	color: red;
}

.back_link a
{
	margin-right: 10px; 
	font-weight: bold;
	font-size: 12px;
	color: yellow; 
}

.text
{
        font-weight: bold;
}

.corp_text
{
        font-size: 14px;
        font-weight: bold;
}

.profile
{
        font-size: 14px;
        font-weight: bold;
        margin-left: 15px;
}

.name
{
   color: #fff;
   font-family: "Trebuchet MS", "Lucida Grande", Arial, Helvetica, sans-serif;
   font-size: 36px;
   font-weight: bolder;
   margin: 0 10px;
   padding: 0.08em 0
}

.photography
{
   color: silver;
   font-size: 24px;
   font-weight: bold;
   margin: 0 5px;
   padding: 0.08em 0
}

.title
{
    font-family: arial, helvetica, sans-serif; 
    font-size: 14pt; 
    font-weight: bolder; 
    margin-left: 15px; 
}

.gallery
{
    float: left; 
    margin: 10px; 
    padding: 5px; 
}

.image
{
    border:0; 
    margin-left:5px 
}

.lightbox a
{
    font-size: 12px; 
    color: yellow;
}

.caption
{
    line-height: 1.5em;
    font-size: 12px; 
    padding-left: 10px;
    font-weight: bold;
}

#menu
{
   position: absolute; 
   top: 0; 
   left: 500px;
}

#menu ul
{
   margin: 0; 
   padding: 0; 
   list-style-type: none;
}

#menu li 
{
   float: left; 
   margin-right: 1px; 
   display: block; 
   width: 100px; 
   border: 1px solid #000;
}

#menu li.list1 
{
   background: transparent url(../images/home.png);
}

#menu li.list2 
{
   background: transparent url(../images/showcase.png);
}

#menu li.list3 
{
   background: transparent url(../images/library.png);
}
 
#menu li.list4 
{
   background: transparent url(../images/corporate.png);
}

#menu li.list5 
{
   background: transparent url(../images/contactus.png);
}

#menu a 
{
   display: block; 
   width: 100px; 
   padding-top: 24px; 
   height: 0; 
   color: #000; 
   text-decoration: none; 
   overflow: hidden;
}

#menu a#item1 
{
   background: transparent url(../images/homeHover.png) -29px -50px no-repeat;
}
 
#menu a#item2 
{
   background: transparent url(../images/showcaseHover.png) -115px 0px no-repeat;
}

#menu a#item3 
{
   background: transparent url(../images/libraryHover.png) -115px -25px no-repeat;
}
            
#menu a#item4 
{
   background: transparent url(../images/corporateHover.png) -115px -25px no-repeat;
}

#menu a#item5 
{
   background: transparent url(../images/contactusHover.png) -115px -25px no-repeat;
}

#menu a#item1:hover 
{
   background-position: top right; z-index:50;
}

#menu a#item2:hover 
{
   background-position: top right; z-index:50;
}

#menu a#item3:hover 
{
   background-position: top right; z-index:50;
}
 
#menu a#item4:hover 
{
   background-position: top right; z-index:50;
}

#menu a#item5:hover 
{
   background-position: top right; z-index:50;
}

.content
{
    margin: 10px 20px;
}

.content a
{
    color: #fff;
}


.content p.linkage
{
    margin-top: 2em;
	text-align: right;
	font-size: 1.7em;
	color: #ddd;
}

.content p.linkage a 
{ 
   color: #fff; 
}

/*.content p.linkage a
{
	color: #fff;
	background: url('../images/bg/biglink_off.gif') center right no-repeat;
	padding: 10px 20px;
	text-decoration: none;
}

.content p.linkage a:hover
{
	background: url('../images/bg/biglink_on.gif') center right no-repeat;
	font-style: italic;
}*/

#myGallery
{
	text-align: left;
	margin: 0 auto;
}

#photo_strip 
{
   width:630px; margin-left:15px;
}

#container 
{
   margin:0; padding:0; height:250px; overflow:auto; color:#222; background-color:#222;
}

#container ul 
{
   margin:0; padding:0; list-style:none; white-space:nowrap; display:table-row;
}

#container ul li 
{
   display:table-cell; padding:0 15px; background-color:#222; vertical-align:top;
}

#container ul li img 
{
   border:1px solid #555; margin: 30px 0 10px 0;
}

#photo_strip h1 
{
   text-align:center; padding:0; margin:0; width:630px; height:38px; line-height:35px; color:silver; background-color:#222; font-weight:normal; font-size:20px; border-bottom:1px solid #888;
}

#container p 
{
   color: white;
   font-size: 13px;
   margin: 0;
   padding: 5px 0
}

#holder 
{
   position:relative; background:transparent url(pic1b.gif) 175px 54px no-repeat; margin-bottom:10px; z-index:1;
}

#scrollbox 
{
   width:400px; height:80px; background:#f4f4f4; overflow:auto; border:1px solid #aaa; margin-left:175px;
}

#gallery {position:absolute; width:1050px;}
#vthumbs {left:820px;}
#vthumbs a {margin:0 0 5px 5px; width:135px; height:200px; border:1px solid #000;}
#vthumbs a img {width:135px; height:200px; border:0;}
#vthumbs a:hover {border-color:#ddd;}
#vthumbs a:hover img {position:absolute; width:auto; height:auto; left:250px; top:0; border:1px solid #333;}

#hthumbs {left:820px;}
#hthumbs a {margin:0 0 5px 5px; width:200px; height:135px; border:1px solid #000;}
#hthumbs a img {width:200px; height:135px; border:0;}
#hthumbs a:hover {border-color:#ddd;}
#hthumbs a:hover img {position:absolute; width:auto; height:auto; left:250px; top:0; border:1px solid #333;}

#slant {padding:0; margin:0; list-style:none;}
#slant li {float:left; text-align:center; margin-right:-20px;} 
#slant a {display:block; text-decoration:none;}
#slant a em {font-style:normal; display:block; padding:0 0px; height:25px; font-weight: bold; background:#ccc; float:left; cursor:pointer; color:#000; line-height:24px;}

#slant a b, a span {cursor:pointer; display:block; width:0; overflow:hidden; float:left; background:#ccc;}

#slant a span {height:0; border-top:25px solid #ccc; border-right:25px solid #333}

#slant a b.p1,
#slant a b.p2,
#slant a b.p3,
#slant a b.p4,
#slant a b.p5 {border-top:5px solid #333; border-right:5px solid #ccc;}

#slant a b.p1 {height:0; margin-top:20px;}
#slant a b.p2 {height:5px; margin-top:15px;}
#slant a b.p3 {height:10px; margin-top:10px;}
#slant a b.p4 {height:15px; margin-top:5px;}
#slant a b.p5 {height:20px;}

#slant a b.p6,
#slant a b.p7,
#slant a b.p8,
#slant a b.p9,
#slant a b.p10 {border-bottom:5px solid #333; border-left:5px solid #ccc;}

#slant a b.p6 {height:20px;}
#slant a b.p7 {height:15px;}
#slant a b.p8 {height:10px;}
#slant a b.p9 {height:5px;}
#slant a b.p10 {height:0;}

#slant a:hover {background:#000;}

#slant a:hover em, #slant a.selected em {color:#fff; background:#000;}

#slant a:hover b.p1, #slant a.selected b.p1,
#slant a:hover b.p2, #slant a.selected b.p2,
#slant a:hover b.p3, #slant a.selected b.p3,
#slant a:hover b.p4, #slant a.selected b.p4,
#slant a:hover b.p5, #slant a.selected b.p5 {border-right-color:#000; background: #000;}

#slant a:hover b.p6, #slant a.selected b.p6,
#slant a:hover b.p7, #slant a.selected b.p7,
#slant a:hover b.p8, #slant a.selected b.p8,
#slant a:hover b.p9, #slant a.selected b.p9,
#slant a:hover b.p10, #slant a.selected b.p10 {border-left-color:#000; background: #000;}

#slant a:hover span, #slant a.selected span {border-top-color:#000;}

#slant a.selected:hover b, #slant a.selected:hover em, #slant a.selected:hover span {cursor:default;}

#iemenu a, #menu a:visited {
  text-align:center; 
  text-decoration:none; 
  color:black; 
  background-color:silver; 
  border:0.1em solid silver; 
  font-size: 12px;
  font-weight: bold;
  padding: 5px;
  }
#iemenu a:hover {
  color:white;
  background-color:black; 
  border-color:silver;
  }