* {	margin: 0;}

html,body {width: 100%; height: 100%; background-color: #141414; color:#000000; margin: 0 auto; padding: 0; text-align: center;}
img {border: 0;}

a, a:visited, a:link, a:active {text-decoration: none;}
a:hover, a:visited:hover {text-decoration: underline;}

/* layout styles */
#container {position:relative; min-height:100%; _height:100%; /* for IE6 as it doesnt understand min-height */}

#header {width: 900px; height: 225px; background: url('../images/bg_header.jpg'); padding: 0; margin: 0 auto; text-align: left; clear: both; line-height: 0px; cursor:pointer}
.header-right {margin-top:0px; margin-left:291px;}
#header-menu {width: 609px; height: 46px; background: url('../images/bg_menu.png'); margin-left:291px; padding: 0;}

#header-menu ul {margin:21px 21px; padding: 0; list-style:none; display:inline; text-decoration: none;}
#header-menu li a {float:left; padding:21px 14px; font-family:Dax Tr; font-size: 13; color:#f3f3f3;}
#header-menu li a:hover {color:#e10000;}

#title {width: 900px; height: 37px; background: url('../images/title_back.jpg'); padding: 0; margin: 0 auto; text-align: left; line-height: 0px;}
#title-text {padding-top:14px; margin-left:292px; text-align: left; font-family:Dax Tr; font-size: 22; color:#212121;}

#content {
	width:900px;
	padding: 20px 20px 5px 5px; 
	margin: 0 auto; 
	text-align:center; 
	font-family:Arial;
	font-size:12px;
	color:#e0e0e0;
}
#projects {
	width:900px;
	padding: 0px 0px 0px 0px; 
	margin: 0 auto; 
	font-family:Arial;
	font-size:18px;
	color:#e0e0e0;
	text-align:left;
}
.project {
	width:550px;
	height:135px;
	padding: 0px 0px 0px 0px;
	margin: 0 auto;
	border-style: solid;
	border-width: 1px;
}
.project-name {
	width:300px;
	float:right;
	text-align:center;
	padding: 60px 0px 0px 0px;
}
.project-name a {text-decoration: underline;color:#f3f3f3;}
.project-name a:hover {color:#e10000;}
#content-left {
	position:relative;	
	float:left;
	width:400px;
	text-align:center;
}
#content-left a {text-decoration: underline;color:#f3f3f3;}
#content-left a:hover {color:#e10000;}
#content-right {
	width:500px;
	float:right;
	text-align:left;
}
#content-right a {text-decoration: underline;color:#f3f3f3;}
#content-right a:hover {color:#e10000;}

.clear { display: block; height: 1px; clear: both;}

#footer {width: 900px; height: 37px; background-color:#333333; padding: 0; margin: 0 auto; text-align:center; line-height: 0px; font-family:Dax Tr; font-size: 22; color:#ffffff; padding-top:24px;}
#footer a {color:#ffffff}
#footer a:hover {color:red}
#products { width:900px; text-align:center; padding: 20px 20px 5px 5px; margin: 0 auto; }
#makeMeScrollable
{
	width:900px;
	height: 120px;
	position: relative;
}

#makeMeScrollable div.scrollableArea *
{
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
}
/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* 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: 75px;
	height: 120px;
	/* 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;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  When positioning the mouse over one of the hot spots, the cursor should change.
	I've noticed that this varies from browser to browser though. */
	cursor: url(../images/cursors/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: 75px;
	height: 120px;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/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: 900px;
	height: 120px;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 120px;
}