/* ####################### */
/* General settings
/* ####################### */

* {
	margin:0;
	padding:0
} 


h1, h2, h3, h4, p, ul, ul li,
img, table, th, tr, td
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: none;
}

ul
{
    list-style: none;
}

	ul li
	{
		display: inline;
	}

#main ul
{
	float: left;
	margin: 10px 0px 10px 0px;
}

	#main ul li
	{
		float: left;
		width: 490px;
		display: block;
		line-height: 1.5em;
		margin: 0px 0px 7px 0px;
		padding: 0px 0px 0px 19px;
		background: url(/graphics/various/list-bullet-logo.gif) no-repeat 0 0.2em;
		/*background: url(/graphics/various/list-bullet.gif) no-repeat 0 0.5em;*/
	}

#main ol
{
	float: left;
	width: 476px;
	padding: 0px 0px 0px 25px;
	margin: 0px 0px 10px 7px;
}

	#main ol li
	{
		line-height: 1.5em;
		margin: 0px 0px 7px 0px;
	}


#main img
{
	margin: 0px 0px 3px 0px;
}


/* ####################### */
/* Body
/* ####################### */

body
{
	background: #ececec url(/graphics/backgrounds/bg.gif) repeat-x top;
	margin: 0px auto 0px auto;
	font-family: Arial, Verdana, Helvetica;
	font-size: 0.87em;
	color: #333333;
}

	body.start
	{
		background: #ececec url(/graphics/backgrounds/bg_start.gif) repeat-x top;
	}


/* ####################### */
/* Text elements
/* ####################### */

h1, h2, h3, h4, h5
{
	float: left;
	display: block;
	width: 100%;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

h1
{
	margin: 0px 0px 20px 0px;
	font-size: 2.1em;
}

h2
{
	font-size: 1.3em;
	margin: 0px 0px 3px 0px;
}

	#sidebar h2
	{
		float: left;
		width: 193px;
		line-height: 38px;
		color: #d9f546;
		margin: 0px 0px 20px -12px;
		padding: 0px 0px 0px 12px;
		background: url(/graphics/backgrounds/bg_sidebar_header.gif) no-repeat top left;
	}

h3
{
	font-size: 1em;
	font-weight: bold;
}

	#sidebar h3
	{
		font-size: 1.2em;
		margin: 0px 0px 10px 0px;
	}

p
{
	margin-bottom: 10px;
	line-height: 1.5em;
}

	/*p.intro
	{
		font-style: italic;
	}*/


/* ####################### */
/* Links
/* ####################### */

a
{
	text-decoration: none;
	color: #333333;
}

	a.button
	{
		float: left;
		width: 139px;
		color: #d9f546;
		display: block;
		line-height: 21px;
		font-size: 12px;
		font-weight: bold;
		margin: 0px 0px 5px 0px;
		padding: 0px 0px 0px 8px;
		background: #FFFFFF url(/graphics/various/lnk_button.gif) no-repeat top left;	
	}
	
	a:hover
	{
		text-decoration: underline;
	}


/* ####################### */
/* Table
/* ####################### */

#diagram
{
	float: left;
	width: 510px;
	margin: 0px -8px 0px -9px;
	padding: 0px 8px 0px 9px;
	background: #FFFFFF url(/graphics/backgrounds/bg_diagram.gif) no-repeat bottom;
}

	#diagram h2
	{
		float: left;
		width: 500px;
		height: 37px;
		line-height: 37px;
		color: #d9f546;
		font-weight: bold;
		margin: 0px -8px 0px -9px;
		padding: 0px 8px 0px 19px;
		background: url(/graphics/backgrounds/bg_diagram_header.gif) no-repeat top;
	}
	


/* ####################### */
/* Framework / Container
/* ####################### */

#framework
{
	width: 900px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
}

#container
{
	width: 900px;
	margin: 0px 0px 0px 0px;
	float: left;
	padding: 0px 0px 0px 0px;
	position: relative;
}


/* ####################### */
/* Header
/* ####################### */

#header
{
	width: 900px;
	float: left;
	height: 98px;
}

	#header #logo
	{
		float: left;
	} 

/* ####################### */
/* Navigations
/* ####################### */

#navigation
{
	width: 575px;
	float: right;
	text-transform: uppercase;
	margin: 49px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

	#navigation ul
	{
		float: right;
	}

	#navigation li
	{
		float: left; 
		height: 36px;
		line-height: 36px;
		font-weight: bold;
		font-size: 17px;
		margin: 0px 0px 0px 10px;
		padding: 0px 0px 0px 0px;
	}
	
		#navigation li a
		{
			float: left;
			height: 36px;
			color: #FFFFFF;
			margin: 0px 12px 0px 0px;
			padding: 0px 0px 0px 0px;
		}
		
		#navigation li.selected
		{
			float: left; 
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 10px;
			background: url(/graphics/navigation/navi_item_left.gif) no-repeat top left;
		}
		
			#navigation li.selected a
			{
				float: left;
				color: #d9f546;
				margin: 0px 0px 0px 0px;
				padding: 0px 12px 0px 0px;
				background: url(/graphics/navigation/navi_item_right.gif) no-repeat top right;
			}

#left_navigation
{
	width: 128px;
	float: left;
	min-height: 10px; 
	height:auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

	/** html #left_navigation
	{
		height: 10px;
	}*/

	#left_navigation ul
	{
		width: 130px;
		float: left;
	}	
	
		#left_navigation ul li
		{
			float: left;
			width: 130px;
			display: block;
			padding: 0px 0px 0px 3px;
			margin: 0px 0px 4px 0px;
			font-size: 13px;
			font-weight: bold;
			line-height: 18px;
		}

		#left_navigation ul li.selected
		{
			padding: 3px 0px 0px 0px;
			margin: 0px 0px 0px 0px;
			background: url(/graphics/navigation/leftnavi_item.gif) no-repeat top left;
		}

			#left_navigation ul li.selected a
			{
				float: left;
				width: 122px;
				color: #d9f546;
				text-decoration: none;
				padding: 0px 0px 3px 6px;
				background: #333333 url(/graphics/navigation/leftnavi_item_a.gif) no-repeat bottom left;
			}

			#left_navigation ul .selected ul
			{
				float: left;
				width: 115px;
				margin: 3px 0px 0px 0px;
				padding: 3px 0px 3px 0px;
			}

				#left_navigation ul .selected .second li
				{
					width: 115px;
					font-size: 12px;
					line-height: 15px;
					background: none;
					padding: 3px 0px 0px 6px;
					margin: 0px 0px 3px 7px;
				}

					#left_navigation ul .selected .second li a
					{
						width: 115px;
						color: #000000;
						margin: 0px 0px 0px 0px;
						padding: 0px 0px 3px 0px;
						background: none;
					}

					#left_navigation ul .selected .second li.selected
					{
						width: 121px;
						padding: 3px 0px 0px 0px;
						background: url(/graphics/navigation/leftnavi_subitem.gif) no-repeat top left;
					} 

						#left_navigation ul .selected .second li.selected a
						{
							color: #d9f546;
							padding: 0px 0px 3px 6px;
							background: #333333 url(/graphics/navigation/leftnavi_subitem_a.gif) no-repeat bottom left;
						}
						
						#left_navigation ul .selected .second li.selected ul li
						{
							background: none;
							width: 107px;
							margin: 0px 0px 2px 0px;
							padding: 0px 0px 0px 14px;
							background: url(/graphics/navigation/leftnavi_thirditem.gif) no-repeat 0.5em;
						}
						
							#left_navigation ul .selected .second li.selected ul li a
							{
								width: 107px;
								color: #000000;
								background: none;
								font-weight: normal;
								margin: 0px 0px 0px 0px;
								padding: 0px 0px 0px 0px;
							}


/* ####################### */
/* Product slide
/* ####################### */

#overlay_left
{
	float: left;
	width: 100px;
	height: 336px;
	top: 98px;
	left: -130px;
	z-index: 180;
	position: absolute;
	background: url(/graphics/various/slider_overlay_left.png) no-repeat right;
}

#overlay_right
{
	float: right;
	width: 100px;
	height: 336px;
	top: 98px;
	right: -130px;
	z-index: 180;
	position: absolute;
	background: url(/graphics/various/slider_overlay_right.png) no-repeat left;
}

#slider
{
	float: left;
	height: 336px;
	width: 1100px;
	color: #FFFFFF;
	position: relative;
	margin: 0px -100px 30px -100px;
	padding: 0px 0px 0px 0px;
	background: url(/graphics/backgrounds/bg_slider.jpg) no-repeat bottom;
}

	#slider #prevslide
	{
		float: left;
		width: 73px;
		height: 101px;
		top: 100px;
		left: 45px;
		z-index: 200;
		position: absolute;
		background: url(/graphics/various/slider_arrow_left.png) no-repeat;
	}
	
	#slider #nextslide
	{
		float: left;
		width: 73px;
		height: 101px;
		top: 100px;
		right: 45px;
		z-index: 200;
		position: absolute;
		background: url(/graphics/various/slider_arrow_right.png) no-repeat;
	}
	
		#slider #nextslide.test
		{
			background: red;
			border: 1px solid orange;
		}
		
		#slider #nextslide.1
		{
			background: blue;
			border: 1px solid orange;
		}
		
		#slider #nextslide.3
		{
			background: green;
			
			border: 1px solid orange;
		}
		
		#slider #nextslide.4
		{
			border: 1px solid orange;
			background: yellow;
		}
	
	#slider #x
	{
		float: left;
		width: 1100px;
		height: 336px;
		overflow: hidden;
		display: inline;
	}

		#slider #x ul
		{
			float: left;
			width: 6000px;
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
		}
		
			#slider #x li
			{
				float: left;
				list-style: none;
				width: 900px;
				height: 325px;
				padding: 15px 100px 0px 100px;
			}
	
				#slider ul li img
				{
					float: left;
				}
			
				#slider ul li h2
				{
					width: 465px;
					float: right;
					font-size: 2em;
					color: #d9f546;
					font-weight: bold;
					margin: 30px 50px 15px 0px;
				}
				
				#slider ul li p
				{
					width: 465px;
					float: right;
					font-size: 1.3em;
					margin: 0px 50px 0px 0px;
				}
				
					#slider ul li p a
					{
						font-weight: bold;
						color: #d9f546;
					}


/* ######################### */
/* Content / Sidebar / Main
/* ######################### */

#content
{
	float: left;
	width: 900px;
	margin: 36px 0px 10px 0px;
	padding: 0px 0px 0px 0px
}

#main
{
	float: left;
	width: 510px;
	margin: 0px 0px 0px 10px;
	padding: 0px 19px 15px 19px;
	background: url(/graphics/backgrounds/bg_main.gif) repeat-y top;
}

	/* Minimum height for Firefox */
	#main {
	min-height: 300px; 
	height:auto;
	}
	/* Minimum height for IE */
	/*\*/
	* html #main {
	height: 300px;
	}
	/**/
	
#sidebar
{
	float: right;
	width: 193px;
	padding: 0px 0px 0px 12px;
}
	
	#sidebar .divider
	{
		float: left;
		width: 193px;
		height: 1px;
		margin: 0px 0px 15px 0px;
		background: url(/graphics/various/divider.gif) repeat-x left;
	}

/* ####################### */
/* Footer
/* ####################### */

#footer
{
	width: 900px;
	float: left;
	color: #555555;
	margin: 0px 0px 20px 0px;
	padding: 7px 0px 0px 0px;
	background: url(/graphics/various/divider.gif) repeat-x left top;
}

	#footer a
	{
		color: #555555;
	}


/* ####################### */
/* Boxes
/* ####################### */

#boxes
{
	float: left;
	width: 875px;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 0px 10px;
}

	#boxes .box1
	{
		float: left;
		width: 464px;
	}
	
		#boxes .box1 h2
		{
			float: left;
			width: 476px;
			line-height: 38px;
			color: #d9f546;
			margin: 0px 0px 20px -12px;
			padding: 0px 0px 0px 12px;
			background: url(/graphics/backgrounds/bg_boxleft_header.gif) no-repeat top left;
		}
		
		#boxes .box1 img
		{
			float: left;
		}
		
		#boxes .box1 p
		{
			float: right;
			width: 317px;
		}
		
		#boxes .box1 a
		{
			font-weight: bold;
		}
	
	#boxes .box2
	{
		float: right;
		width: 364px;
	}

		#boxes .box2 h2
		{
			float: left;
			width: 376px;
			line-height: 38px;
			color: #d9f546;
			margin: 0px 0px 20px -12px;
			padding: 0px 0px 0px 12px;
			background: url(/graphics/backgrounds/bg_boxright_header.gif) no-repeat top left;
		}
		
			#boxes .box2 .flickr_badge_image
			{
				float: left;
				width: 75px;
				display: inline;
				margin: 0px 15px 15px 0px;
			}