/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

body 	{		margin:0; 
				padding:0; 
				font-family: Arial, Helvetica, sans-serif;
				font-size:12px;
				color:#000;
				background-color:#fff;
}
p  {	display:block; line-height: 18px; }
.red { color:f30;display:inline;}


a {	font-size:10px; text-decoration:none;color:#000;}
a:hover {text-decoration:underline;}

div.container {		position: absolute;
				width: 950px;
				height: 430px;
				left: 50%;
				top: 50%;		
				margin-left: -475px;
				margin-top: -215px;
				border-top: 0px #000 solid;
				padding-top:20px;
				/*background-color:#666;*/
}

div.left {		position: relative;
				float:left;
				width: 100px;
				height: 400px;
				/*background-color:#f30;*/
}

div.right {		position: relative;
				float:right;
				width: 840px;
				height: 400px;
				border-top: 1px #000 solid;
				border-bottom: 0px #000 solid;
				/*background-color:#ffff33;*/
}

div.right_home {position: relative;
				float:right;
				width: 840px;
				height: 400px;
				border-top: 1px #000 solid;
				border-bottom: 1px #000 solid;
				/*background-color:#ffff33;*/
}

div.nav {		float:right;
				width: 100px;
				height: 400px;
				/*background-color:#fff;*/
				/*border: 1px #000 solid;*/
				text-align:right;
}

div.portfolio {	float:right;
				margin-top:60px;
				width: 100%;
				text-align:right;
}


div.nav h1 {	font-family: Times New Roman, Times, serif; font-size: 36px; color: #ff0000; font-style: italic;font-weight:normal;}
div.nav h2 {	margin-top:-25px;font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #ff0000;font-weight:normal;}
div.nav a {		font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; text-decoration: none}
div.nav a:hover {		font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; text-decoration: underline;}
h3		{padding-left:5px;}


#makeMeScrollable
{
	width:840px;
	float:right;
	min-height: 340px;
	position: relative;
	border-top:0px #000 solid;

}

#makeMeScrollable div.scrollableArea *
{
	position: relative;
	float: left;	
	margin: 0;
	padding-bottom: 0px;
	border-top:0px #000 solid;
	background-color:#fff;
}	

#makeMeScrollable div.scrollableArea_inner *
{
	border:1px #000 solid;
}
#makeMeScrollable div.scrollableArea_top_title
{
	float:left;min-height:340px;border:0px #000 solid;clear:left; /* here is the image width setting */
}
#makeMeScrollable div.scrollableArea_top
{
	float:left;margin-left:-220px;min-height:340px;border:0px #000 solid;clear:left; /* here is the image width setting */
}
#makeMeScrollable div.scrollableArea_top2
{
	float:left;width:300px;min-height:340px;border:0px #000 solid;clear:left;
}
#makeMeScrollable div.scrollableArea_top2 p
{
	padding-top:10px;line-height: 18px;color:#000;
}
#makeMeScrollable div.scrollableArea_top2 .red
{
	color:#f30;
}
#makeMeScrollable div.scrollableArea_top2 h3
{
	padding-top:63px;font-weight:bold;margin-left:-5px;
}
#makeMeScrollable div.scrollableArea_bottom
{
	float:left;width:100%;height:15px;border-top:1px #000 solid;margin-top:0px;background-color:#fff;
}

#makeMeScrollable div.scrollableArea_bottom p
{
	padding:10px 0 0 50px;color:#000;font-size:10px;
}
#makeMeScrollable div.scrollableArea_bottom2
{
	float:left;width:100%;height:15px;border-top:0px #000 solid;margin-top:10px;
}
#makeMeScrollable div.scrollableArea_bottom2 p
{
	padding:0 0 0 50px;color:#000;font-size:10px;font-style:italic;
}

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 15%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(images/big_transparent.gif);
	background-repeat: repeat;
	/*background-position: center center;*/
	background-position: center 120px;
	position: absolute;
	z-index: 200;
	left: 0px;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(images/cursor_arrow_left.png), url(images/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 15%;
	height: 100%;
	background-image: url(images/big_transparent.gif);
	background-repeat: repeat;
	/*background-position: center center;*/
	background-position: center 120px;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(images/cursor_arrow_right.png), url(images/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}

div.test
{
float:left;
width:100%;
height:400px;
}

div.test1
{
float:left;
width:303px;
background-color:#0C3;
height:400px;
display:inline;
}

div.test1 img
{
border-bottom:1px #000 solid;
}

div.test2
{
float:left;
width:303px;
background-color:#903;
height:60px;
display:inline;
}

div.test1 p {
	width:inherit;
	padding:10px 0 0 50px;
	text-align:left;
	font-size:10px;
	position:relative;
	line-height: 18px;
}

div.row				{	float:left; width:100%;min-height:95px;margin-bottom:35px;clear:both;}
div.row_top			{	float:left; width:100%;height:1px;margin-bottom:19px;clear:both;}
div.row_inner_lefta	{	float:left; width:75px; height:95px;}
div.row_inner_leftb	{	float:left; width:85px; height:95px;}
div.row_inner_leftc	{	float:left; width:120px; height:95px;line-height:95px;}
div.row_inner_mida	{	float:left; width:74px; height:95px;}
div.row_inner_midb	{	float:left; width:85px; height:95px;}
div.row_inner_midc	{	float:left; width:120px; height:95px;line-height:95px;}
div.row_inner_righta {	float:left; width:74px; height:95px;}
div.row_inner_rightb {	float:left; width:85px; height:95px;}
div.row_inner_rightc {	float:left; width:120px; height:95px;line-height:95px;}


.picture { background-color: #999; font: 11px Arial, sans-serif; }
.picture img {border-top:1px #000 solid;border-bottom:1px #000 solid;}
.caption p.copy1 {float:left;height:30px;margin:20px 0 0 50px;color:#000;clear:left;}
.caption p.copy2 {color:#f30;}