/* CSS Document */
body        {
            font-family: Helvetica, Verdana, Arial;  
			font-size: 15px;
			color: #ffffff;
            background-color: #222222;
			background-image:
			url('images/back_pattern.gif');
			background-repeat: repeat;
			text-align: center;
			}
* 			{
			border: 0px; 
			padding: 0px; 
			margin: 0px;
			}			
a:link      {		
			color: #ff7700;
			text-decoration: underline;
			}
a:hover     {		
			color: #3377ff;
			text-decoration: underline;
			}
a:visited   {
			color: #ff7700;
			text-decoration: underline;
			}
h1          {
			font-family: Helvetica, Verdana, Arial;  
			color: #cccccc; 
			font-size: 28px;			
			font-weight: bold;
			background-color: #555555;
			margin-bottom: 20px;
			}
h2          {
			font-family: Helvetica, Verdana, Arial; 
			color: #77bbee; 
			font-size: 20px;
			margin-bottom: 15px;
			margin-top: 25px;
			height: 25px;
			width: 428px;
			background-image:
			url('images/titleback.jpg');
			}			
h3          {
			font-family: Helvetica, Verdana, Arial; 
			color: #cccccc; 
			font-size: 20px;
			margin-bottom: 20px;
			background-image:
			url('images/h3back.gif');
			background-repeat: repeat;
			height: 25px;			
			}						
.bluetext	{
			color: #3377ff;
			}
.frame		{
			border-left: 4px;
			border-color: #000000;
			}
p			{
			padding-left: 5px;
			padding-right: 5px;
			}
td			{
			font-size: 15px;
			color: #ffffff;
			}
ul 			{
			list-style-type: disc;
			list-style-position: inside;
			color: #ffffff;
			margin: 2em;
			padding-top: 0px;
			padding-bottom: 0px;
			line-height: 27px;  
			text-indent: -20px;
			}
ol			{
			list-style: decimal inside;
			}						
.title		{
			font-family: Helvetica, Verdana, Arial; 
			color: #ffffff; 
			font-size: 20px;
			margin-bottom: 20px;
			}												
#container	{
			position: relative;
			width: 800px;
			height: 1180px;
			background-color: #444444;
			margin: 0 auto;
			z-index: 1;
			}
#topbar		{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 780px;
			height: 200px;
			background-color: #555555;
			z-index: 2;
			}
#logo		{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 350px;
			text-align: left;
			z-index: 2;
			}
#title		{
			position: absolute;
			top: 110px;
			left: 20px;
			z-index: 3;
			}			
#contactbar	{
			position: absolute;
			bottom: 0px;
			left: 0px;
			height: 25px;
			width: 300px;
			background-image:
			url('images/contactbar.gif');
			text-align: left;
			z-index: 3;
			}
#menu		{
			position: absolute;
			top: 12px;
			right: 0px;
			width: 200px;
			z-index: 3;
			}
#basebar	{
			position: absolute;
			bottom: 10px;
			left: 10px;
			height: 100px;
			width: 780px;
			word-spacing: 10px;
			font-size: 11px;
			background-image:
			url('images/basebar.jpg');
			z-index: 3;
			}
			
/* Index page */			
									
#mainpic	{
			position: absolute;
			top: 230px;
			left: 10px;
			width: 780px;
			z-index: 2;
			}
#banner_text{
			position: absolute;
			bottom: 20px;
			left: 0px;
			width: 293px;
			height: 131px;
			background-image:
			url('images/banner_fade.gif');
			z-index: 3;
			}
#contentmain{
			position: absolute;
			top: 450px;
			left: 10px;
			width: 780px;
			height: 600px;
			background-color: #555555;
			z-index: 2;
			}
#introduction{
			position: absolute;
			top: 10px;
			left: 11px;
			width: 300px;
			background-color: #444444;
			padding: 1px;
			text-align: left;
			z-index: 3;
			}
#recentproject{
			position: absolute;
			top: 310px;
			left: 11px;
			width: 300px;
			height: 275px;
			background-color: #444444;
			padding: 1px;
			text-align: center;
			z-index: 3;
			}			
#latestnews	{
			position: absolute;
			top: 10px;
			right: 11px;
			width: 430px;
			height: 575px;
			background-color: #444444;
			padding: 1px;
			text-align: left;
			z-index: 3;
			}
#news1		{
			position: absolute;
			top: 30px;
			left: 1px;
			z-index: 4;
			}
#news2		{
			position: absolute;
			top: 200px;
			left: 1px;
			z-index: 4;
			}
#news3		{
			position: absolute;
			top: 370px;
			left: 1px;
			z-index: 4;
			}											

/* About page */


#aboutcontainer	{
			position: relative;
			width: 800px;
			height: 1400px;
			background-color: #444444;
			margin: 0 auto;
			z-index: 1;
			}
#aboutframe1{
			position: absolute;
			top: 250px;
			left: 10px;
			width: 780px;
			height: 800px;
			background-color: #555555;
			z-index: 2;
			}
#aboutinner{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 760px;
			height: 780px;
			background-color: #444444;
			z-index: 3;
			}
#aboutintro	{
			position: absolute;
			top: 1px;
			left: 1px;
			width: 468px;
			text-align: left;
			z-index: 5;
			}
#aboutpics	{
			position: absolute;
			top: 0px;
			right: 0px;
			width: 300px;
			height: 800px;
			background-color: #555555;
			text-align: center;
			z-index: 5;
			}
#aboutframe2{
			position: absolute;
			top: 1100px;
			left: 10px;
			width: 780px;
			height: 170px;
			background-color: #555555;
			z-index: 2;
			}
#aboutciw	{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 760px;
			height: 150px;
			background-color: #444444;
			z-index: 3;
			}
			
/* Web page */

#webcontainer{
			position: relative;
			width: 800px;
			height: 1480px;
			background-color: #444444;
			margin: 0 auto;
			z-index: 1;
			}
#webframe1{
			position: absolute;
			top: 250px;
			left: 10px;
			width: 780px;
			height: 250px;
			background-color: #555555;
			z-index: 2;
			}
#introcontainer{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 760px;
			height: 230px;
			background-color: #444444;
			z-index: 3;
			}
#ciw_logo	{
			position: absolute;
			bottom: 0px;
			right: 0px;
			z-index: 4;
			}
#webintro	{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 360px;
			padding: 1px;
			text-align: justify;
			z-index: 4;
			}
#webintro2{
			position: absolute;
			top: 0px;
			right: 0px;
			width: 400px;
			padding: 1px;
			text-align: justify;
			z-index: 4;
			}			
#webframe2{
			position: absolute;
			top: 530px;
			left: 10px;
			width: 780px;
			height: 820px;
			background-color: #555555;
			z-index: 2;
			}			
#webcontent{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 760px;
			height: 800px;
			background-color: #444444;
			padding: 1px;
			text-align: left;
			z-index: 3;
			}						
#jabdescription{
			position: absolute;
			top: 20px;
			left: 10px;
			width: 300px;
			text-align: left;
			z-index: 4;
			}
#jabpics{
			position: absolute;
			top: 50px;
			right: 10px;
			width: 400px;
			text-align: left;
			font-size: 11px; 
			z-index: 4;
			}
#webcontent1{
			position: absolute;
			top: 400px;
			left: 0px;
			width: 760px;
			background-color: #444444;
			padding: 1px;
			text-align: left;
			z-index: 4;
			}						
#ytdescription{
			position: absolute;
			top: 430px;
			left: 10px;
			width: 300px;
			text-align: left;
			z-index: 4;
			}
#ytpics		{
			position: absolute;
			top: 460px;
			right: 10px;
			width: 400px;
			text-align: left;
			font-size: 11px; 
			z-index: 4;
			}						
			
		
/* Photography page */


#photocontainer{
			position: relative;
			width: 800px;
			height: 1500px;
			background-color: #444444;
			margin: 0 auto;
			z-index: 1;
			}
#photoframe1{
			position: absolute;
			top: 250px;
			left: 10px;
			width: 780px;
			height: 250px;
			background-color: #555555;
			z-index: 2;
			}
#introcontainer{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 760px;
			height: 230px;
			background-color: #444444;
			z-index: 3;
			}
#photointro	{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 360px;
			padding: 1px;
			text-align: justify;
			z-index: 4;
			}
#photointro2{
			position: absolute;
			top: 0px;
			right: 0px;
			width: 360px;
			height: 230px;
			z-index: 4;
			}			
#photoframe2{
			position: absolute;
			top: 530px;
			left: 10px;
			width: 780px;
			height: 840px;
			background-color: #555555;
			z-index: 2;
			}
#photocontent{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 760px;
			height: 820px;
			background-color: #444444;
			padding: 1px;
			text-align: left;
			z-index: 3;
			}
#picturecomments{
			position: absolute;
			top: 100px;
			left: 30px;
			width: 300px;
			height: 250px;
			text-align: left;
			z-index: 4;
			}
#piccontainer{
			position: absolute;
			top: 30px;
			right: 30px;
			width: 380px;
			height: 250px;
			text-align: left;
			z-index: 4;
			}
#pic1		{
			position: absolute;
			top: 10px;
			left: 10px;
			z-index: 5;
			}
#pic2		{
			position: absolute;
			top: 10px;
			left: 140px;
			z-index: 5;
			}
#pic3{
			position: absolute;
			top: 10px;
			left: 270px;
			z-index: 5;
			}
#pic4		{
			position: absolute;
			top: 130px;
			left: 10px;
			z-index: 5;
			}
#pic5		{
			position: absolute;
			top: 130px;
			left: 140px;
			z-index: 5;
			}
#pic6		{
			position: absolute;
			top: 130px;
			left: 270px;
			z-index: 5;
			}
#pic7		{
			position: absolute;
			top: 250px;
			left: 10px;
			z-index: 5;
			}
#pic8		{
			position: absolute;
			top: 250px;
			left: 140px;
			z-index: 5;
			}
#pic9		{
			position: absolute;
			top: 250px;
			left: 270px;
			z-index: 5;
			}
#photocontent1{
			position: absolute;
			top: 410px;
			left: 10px;
			width: 760px;
			background-color: #444444;
			padding: 1px;
			text-align: left;
			z-index: 3;
			}												


/* Video page */


#videocontainer{
			position: relative;
			width: 800px;
			height: 1680px;
			background-color: #444444;
			margin: 0 auto;
			z-index: 1;
			}
#videoframe1{
			position: absolute;
			top: 250px;
			left: 10px;
			width: 780px;
			height: 250px;
			background-color: #555555;
			z-index: 2;
			}
#introcontainer{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 760px;
			height: 230px;
			background-color: #444444;
			z-index: 3;
			}
#videointro	{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 340px;
			padding: 1px;
			text-align: justify;
			z-index: 4;
			}
#videointro2{
			position: absolute;
			top: 0px;
			right: 0px;
			width: 400px;
			padding: 1px;
			text-align: justify;
			z-index: 4;
			}
#videoframe2{
			position: absolute;
			top: 530px;
			left: 10px;
			width: 780px;
			height: 640px;
			background-color: #555555;
			z-index: 2;
			}			
#dvdtrailers{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 760px;
			height: 620px;
			background-color: #444444;
			padding: 1px;
			text-align: justify;
			z-index: 3;
			}
#trailer1	{
			position: absolute;
			top: 40px;
			left: 5px;
			z-index: 4;
			}
#description1{
			position: absolute;
			top: 40px;
			right: 25px;
			width: 380px;
			z-index: 4;
			}
#trailer2	{
			position: absolute;
			top: 330px;
			left: 5px;
			z-index: 4;
			}
#description2{
			position: absolute;
			top: 330px;
			right: 25px;
			width: 380px;
			z-index: 4;
			}
#videoframe3{
			position: absolute;
			top: 1200px;
			left: 10px;
			width: 780px;
			height: 350px;
			background-color: #555555;
			z-index: 2;
			}			
#shortedit	{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 760px;
			height: 330px;
			background-color: #444444;
			padding: 1px;
			text-align: justify;
			z-index: 3;
			}
#trailer3	{
			position: absolute;
			top: 40px;
			left: 5px;
			z-index: 4;
			}
#description3{
			position: absolute;
			top: 40px;
			right: 25px;
			width: 380px;
			z-index: 4;
			}																																	
#inner		{
			position: absolute;
			top: 250px;
			left: 10px;
			width: 760px;
			height: 434px;
			background-color: #444444;
			padding: 1px;
			text-align: left;
			z-index: 2;
			}			
#construct	{
			position: absolute;
			top: 50px;
			left: 250px;
			z-index: 3;
			}
			
			
/*  Graphics page  */


#graphicscontainer{
			position: relative;
			width: 800px;
			height: 1740px;
			background-color: #444444;
			margin: 0 auto;
			z-index: 1;
			}
#graphicsframe1{
			position: absolute;
			top: 250px;
			left: 10px;
			width: 780px;
			height: 250px;
			background-color: #555555;
			z-index: 2;
			}
#introcontainer{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 760px;
			height: 230px;
			background-color: #444444;
			z-index: 3;
			}
#graphicsintro{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 400px;
			padding: 1px;
			text-align: justify;
			z-index: 4;
			}
#graphicsintro2{
			position: absolute;
			top: 10px;
			right: 30px;
			width: 250px;
			padding: 1px;
			font-family: Helvetica, Verdana, Arial;  
			font-size: 10px;
			text-align: center;
			z-index: 4;
			}
#graphicsframe2{
			position: absolute;
			top: 530px;
			left: 10px;
			width: 780px;
			height: 1080px;
			background-color: #555555;
			z-index: 2;
			}			
#graphicscontent{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 760px;
			height: 1060px;
			background-color: #444444;
			padding: 1px;
			text-align: justify;
			z-index: 3;
			}			
#logos		{
			position: absolute;
			top: 450px;
			left: 0px;
			width: 760px;
			height: 143px;
			text-align: center;
			z-index: 3
			}
#logodesc	{
			position: absolute;
			top: 630px;
			left: 100px;
			width: 560px;
			text-align: center;
			z-index: 3
			}
#banners	{
			position: absolute;
			top: 730px;
			left: 1px;
			width: 758px;
			z-index: 3
			}
#thumbcontainer{
			position: absolute;
			top: 60px;
			right: 50px;
			width: 240px;
			height: 250px;
			text-align: left;
			z-index: 4;
			}
#banner1	{
			position: absolute;
			top: 10px;
			left: 10px;
			z-index: 5;
			}
#banner2	{
			position: absolute;
			top: 10px;
			left: 140px;
			z-index: 5;
			}
#banner3	{
			position: absolute;
			top: 130px;
			left: 10px;
			z-index: 5;
			}
#banner4	{
			position: absolute;
			top: 130px;
			left: 140px;
			z-index: 5;
			}
#bannerdesc{
			position: absolute;
			top: 110px;
			left: 50px;
			width: 340px;
			text-align: left;
			z-index: 4;
			}