/* First section: Layout framework */

#container 	{
			position: relative;
			width: 760px;
			border: 0px;
			margin: 0px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px;
			background: white;
			
			}
 body { behavior:url('cssfocusandhover.htc');} 
#top 		{
	padding: 0;
	padding-bottom: 10px;
	margin-bottom: 0;
	background-image: url(../images/otl_logo.gif);
	background-repeat: no-repeat;
	background-position: left top;
	text-align: left;
	}

#column1 	{
	float: left;
/*	top: 120px;  */
	width: 190px;
	min-width: 190px;
	}
		
#column2 {
float: left;
/*	position: absolute; */
	top: 120px;
	left: 190px;
	width: 190px;
	}

#column3 {
float: left;
/*	position: absolute; */
	top: 120px;
	left: 380px;
	width: 190px;
	}

#column4 	{
 float: left; 
/*	position: absolute; */
	top: 120px;
	left: 570px;
	width: 190px;
 }
 
 #widethreecolumns {
padding-left; 10px;
/*	position: absolute; */
	top: 120px;
	left: 190px;
	width: 570px;
	}
	
	/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
   
   #widethreecolumns {
	float: left;
/*	position: absolute; */
	top: 120px;
	left: 190px;
	width: 570px;
	}
   
   /* End IE5-Mac hack */
   
   
	
	#widetwocolumns {
  float: left; 
/*	position: absolute; */
	top: 120px;
	left: 190px;
	width: 380px;
	display: inline;
	}
	
	#portfolio_nav {
	padding-left: 15px;
	float: left;
	top: 120px;  
	width: 190px;
	}
	
	#portfolio_images {
	text-align: right;
	margin: 0;
	}
	

#footer 	{
			clear: both;
			padding: 0;
			margin-top: 0;
		
			
			
			
			}
			
.clear {
clear: both;

}

.column_box	{
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;

}

.column_box_2	{
margin-left: 190px;
margin-right: 190px;
margin-top: 30px;

}
	/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
   
  .column_box_2	{
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;

} 
   

  /* End IE5-Mac hack */
.portfolio_box	{
margin-left: 0px;
margin-right: 0px;
margin-top: 30px;
margin-bottom: 0px;
}
	

/* H1 logo solution */


h1 {
position: absolute;
  width: 350px;
  height: 80px;
  background-image: url("../images/otl_logo.gif");
  background-repeat: no-repeat;
}
	
h1 a {
position: absolute;
  display: block;
  width: 350px;
  height: 80px;
  text-indent: -1000em;
}


/* end H1 logo solution */

			
			
/* Third Section: Common Layout Tags  

body		{
			background-image: url(../images/background.gif);
			background-repeat: repeat-x;
			background-position: top;
			}
			
			*/

/*Fourth Section: TYPOGRAPHY */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .9em;
	background: url(../images/background_strip.gif);
	background-repeat: no-repeat;
	background-position: top center;
}


h2	{
	font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	color: #318FA1;
	font-weight: normal;
	line-height: 1.5em;
	
	}

h2 a	{
	font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif;
	
	color: #318FA1;
	font-weight: normal;
	
	}

h3		{
	font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #666666;
	font-weight: normal;
	line-height: 1.4em;
	
	}

h4	{

}

p a {
text-decoration: none;
border-bottom: 1px solid #E6E6E6;
color: #3D72A0;
}

p a:hover {
text-decoration: none;
border-bottom: 1px solid #A4A5A5;
color: #30597D;
}

ul  {
list-style-type: square

margin-top: 3px;
margin-bottom: 5px;

}

li.column_box {
margin-left: -10px;
margin-bottom: 5px;}

p a.punchline {
font-style: emphasis;
}

.bodystyle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .9em;
	color: #808080;
	line-height: 1.6em;
}

.subhead {
font-family: Arial, Helvetica, sans-serif;
	font-size: .9em;
	color: #318FA1;
	line-height: 1.6em;
	}

.small {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
}

.medium {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.big {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}

.xbig {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
}

.expanded {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 24px;
	letter-spacing: 2px;
}

.justified {
	font-family: Arial, Helvetica, sans-serif;
	text-align: justify;
}

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

#runningfooter {
font-family: Arial, Helvetica, sans-serif;
text-align: right;
font-size: .7em;
line-height: 3em;
color: #C0C0C0;
padding-right: 10px;
}


/* NEW Navigation System  */



#navcontainer ul
{
font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
padding-top: 54px;
padding-bottom: 25px;
padding-right: 10px;
list-style-type: none;
text-align: left;
}

#navcontainer ul li { font-size: .9em; float: right; display: inline; }

/*
#navcontainer ul li a
{
text-decoration: none;
 margin: .2em .5em; 
color: #808080;
background-color: white;
border-bottom: 4px solid white;
}

#navcontainer ul li a:hover
{
border-bottom: 4px solid #087D8C;
}
/


/* END NEW Navigation System  */


/* OLD Navigation System  


<div id="navcontainer">
					<a class="home" href="index.htm" title="Client Home">Client Home</a>&nbsp;|&nbsp;
					<a class="port" href="portfolio/portfolio_main.htm" title="Design Portfolio">Portfolio</a>&nbsp;|&nbsp;
					<a class="serv" href="services.htm" title="Services">Services</a>&nbsp;|&nbsp;
					<a class="news" href="news.htm" title="OTL News">News</a>&nbsp;|&nbsp;
					<a class="faq" href="faq.htm" title="Frequently Asked Questions">FAQ</a>&nbsp;|&nbsp;
					<a class="con" href="contact.htm" title="Contact OTL">Contact</a>
			</div>



#navcontainer
{

padding-bottom: 20px;
padding-right: 10px;
}

*/


#navcontainer ul li a.home:link, #navcontainer ul li a.home:visited, #navcontainer ul li a.port:link, #navcontainer ul li a.port:visited, #navcontainer ul li a.serv:link, #navcontainer ul li a.serv:visited, #navcontainer ul li a.news:link, #navcontainer ul li a.news:visited, #navcontainer ul li a.faq:link, #navcontainer ul li a.faq:visited, #navcontainer ul li a.con:link, #navcontainer ul li a.con:visited
{
margin: .2em .5em; 
text-align: right;

border-bottom: 4px solid white;
color: #666666;
}

#navcontainer ul li a.home:hover
{
border-bottom: 4px solid #087D8C;

color: #666666;
}

#navcontainer ul li a.port:hover
{
border-bottom: 4px solid #120057;
background: transparent;

color: #666666;
}

#navcontainer ul li a.serv:hover
{
border-bottom: 4px solid #DB691D;
background: transparent;

color: #666666;
}

#navcontainer ul li a.news:hover
{
border-bottom: 4px solid #7C1D1F;
background: transparent;

color: #666666;
}

#navcontainer ul li a.faq:hover
{
border-bottom: 4px solid #D2177A;
background: transparent;

color: #666666;
}

#navcontainer ul li a.con:hover
{
border-bottom: 4px solid #B0734A;
background: transparent;

color: #666666;
}

#home  #navcontainer .home {
  border-bottom: 4px solid #087D8C;
background: transparent;

color: #666666;
  }
  
#port #navcontainer  .port {
border-bottom: 4px solid #120057;
background: transparent;
color: #666666;
}
#serv #navcontainer  .serv {
  border-bottom: 4px solid #DB691D;
background: transparent;
color: #666666;
}
#news #navcontainer .news {
  border-bottom: 4px solid #7C1D1F;
background: transparent;
color: #666666;
}
#faq #navcontainer .faq{
  border-bottom: 4px solid #D2177A;
background: transparent;
color: #666666;
}

#con #navcontainer .con {
  border-bottom: 4px solid #B0734A;
background: transparent;
color: #666666;
  }
  

/* Commented Backslash Hack
   hides rule from IE5-Mac \*/




#navcontainer ul li a.home:link, #navcontainer ul li a.home:visited, #navcontainer ul li a.port:link, #navcontainer ul li a.port:visited, #navcontainer ul li a.serv:link, #navcontainer ul li a.serv:visited, #navcontainer ul li a.news:link, #navcontainer ul li a.news:visited, #navcontainer ul li a.faq:link, #navcontainer ul li a.faq:visited, #navcontainer ul li a.con:link, #navcontainer ul li a.con:visited
{
margin: .2em .5em; 
text-align: right;
display: block;
border-bottom: 4px solid white;
color: #666666;
}

#navcontainer ul li a.home:hover
{
border-bottom: 4px solid #087D8C;
background: transparent;
display: block;
color: #666666;
}

#navcontainer ul li a.port:hover
{
border-bottom: 4px solid #120057;
background: transparent;
display: block;
color: #666666;
}

#navcontainer ul li a.serv:hover
{
border-bottom: 4px solid #DB691D;
background: transparent;
display: block;
color: #666666;
}

#navcontainer ul li a.news:hover
{
border-bottom: 4px solid #7C1D1F;
background: transparent;
display: block;
color: #666666;
}

#navcontainer ul li a.faq:hover
{
border-bottom: 4px solid #D2177A;
background: transparent;
display: block;
color: #666666;
}

#navcontainer ul li a.con:hover
{
border-bottom: 4px solid #B0734A;
background: transparent;
display: block;
color: #666666;
}

#home  #navcontainer .home {
  border-bottom: 4px solid #087D8C;
background: transparent;
display: block;
color: #666666;
}
#port #navcontainer  .port{
  border-bottom: 4px solid #120057;
background: transparent;
display: block;
color: #666666;
}
#serv #navcontainer  .serv{
  border-bottom: 4px solid #DB691D;
background: transparent;
display: block;
color: #666666;
}
#news #navcontainer .news{
  border-bottom: 4px solid #7C1D1F;
background: transparent;
display: block;
color: #666666;
}
#faq #navcontainer .faq{
  border-bottom: 4px solid #D2177A;
background: transparent;
display: block;
color: #666666;
}
#con #navcontainer .con {
  border-bottom: 4px solid #B0734A;
background: transparent;
display: block;
color: #666666;
  }


/* End IE5-Mac hack */






/* Begin Tab CSS */








/* Begin whatever:hover hack */
/* This hack is described at: http://www.xs4all.nl/~peterned/csshover.html */
 body {
	behavior:url("csshover.htc"); 
} 
/* End whatever:hover hack */

/* Begin preload hack */
h4 {
  background: url('../images/tabs/norm_left_hover.gif') no-repeat top left;
  background-position:-1000px -1000px;
}
h5 {
  background:url('../images/tabs/norm_right_hover.gif') no-repeat top left;
  background-position:-1000px -1000px;
}

/* End preload hack */

#menu {

  float: left; 
  width:100%; 
  font:Arial, Helvetica, sans-serif;
  line-height: normal;
  padding: 0px
  margin: 0px;
  padding-bottom:10px;

  
  background-image:url("../images/tabs/tab_background.gif");
			background-position: center top;
			background-repeat: no-repeat;
}

#menuwrapper {
/*	width: 250px; */




	
	}
#menu ul {
  margin:0;
  padding:0px 20px 0px 20px;
  list-style:none;
  }
#menu li {
  float:left;
  background:url("../images/tabs/norm_left.gif") no-repeat left bottom;
  margin:0;
  margin-left:2px;
  padding:0 0 0 9px;
}

#menu a {
  float:left;
  display:block;
  background:url("../images/tabs/norm_right.gif") no-repeat right bottom;
  padding: 5px 12px 4px 6px;
  text-decoration:none;
  font: 1em Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  font-weight: normal;
  color: #999999;
  }
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#menu a {float:none;}
/* End IE5-Mac hack */

div#menu li:hover {
  background:url("../images/tabs/norm_left_hover.gif") no-repeat left bottom;
}
div#menu li:hover a {
  color:#505050;	
  background:url("../images/tabs/norm_right_hover.gif") no-repeat right bottom;
 
}

#menu #current {
  background-image:url("../images/tabs/norm_left_on.gif");
  }
#menu #current a {
  background-image:url("../images/tabs/norm_right_on.gif");
  color:#808080;
  padding-bottom:5px;
 }

/* End Tab CSS */