/* lay out manager*******************************
	 */
	 	

	 
	 
	
	 p{  /* when ever you use p tag it will have a space after  */
	padding-bottom: 1em;	 
	 }
	 
  /* CSS "iframe" */
   
  iframe
	{
		overflow:visible;
	  height:800px;  
	}
		

	 
	 
	 /*text_field contains all the rest for the main page 
	 and writing  for the works see longer */
	  DIV.text_field
    {
	position:absolute;
	left:50%;
	top:50%;
	width:800px;
	height:562px;
	margin-left:-380px;
	margin-top:-281px;
	z-index: 1;
	
	
    } /* put all of it inside the text_field  */
		/**********************************nav-menu
		is inside the style since its works with 
		both fonts and il ul and stuff-nav-menu
		will be nested inside the div.header
		*/		
    DIV.header_title
	  {
	    position:absolute;
	    left:0px;
	    top:0px;
	    z-index: 2;
	    width:748px;
	    height:88px;
	    background-image: url(../image/obraLogo.gif); /* <--if you need to change the logo go here*/
	    background-repeat: no-repeat;
			line-height: 1.4; 
			
	  }
		/**********************************
		this is on the left sid below most likly this is wher the image is displayed.
		*/		
		DIV.updateImage
    {
	position:absolute;
	left:0px;
	top:98px;
	z-index: 3;
	width:600px;
	height:400px;
	overflow: hidden;
	
	
	  }
		
		/**********************************
		this guys are for slide navigation*/
		DIV.slideNav {
	position:absolute;
	left:0px;
	top:510px;
	z-index: 2;
	width: 541px;
	height: 8px;
		}
		/**********************************
		for the right hand side of the updateImage is the 
		newEvent. !!! only used for the main page.
		*/
		DIV.newsEvent
    {
	position:absolute;
	left:460px;
	top:92px;
	z-index: 3;
	width:300px;
	height:466px;
	border: 0px none;
	white-space: normal;
	overflow: hidden;
	line-height: 1.4;
				
			
    }
		/**********************************
		for the right hand side of the updateImage is the 
		Event02 any other page other than Main page like contanct
	  profile use Event02 
		*/
		DIV.Event02
    {
	    position:absolute;
	    left:626px;
	    top:98px;
	    z-index: 3;
	    width:236px;
	    height:466px;
	    white-space: normal;
	    overflow: visible;	
			line-height: 1.4;  
			
    }
		/**********************************
		this DIV.writings is used for writing page only
		any others use Event02 or NewsEvent for text and links
		*/
		DIV.writings
    {
	    position:absolute;
	    left:0;
	    top:98px;
	    z-index: 3;
	    width:634px;
	    height:500px;
	    overflow: visible;
			line-height: 1.4;    
    }
		
		DIV.Footer
    {
	position:absolute;
	left:-1px;
	top: 540px;
	z-index: 4;
	width:600px;
	height:22px;
	padding: 4px;
	  }
		
		/****************************************************************************************************/
		
		/*  use for work  and individual project...etc   */
		DIV.longer_field {
			position:absolute;
			left:50%;    /* middle of the page */
			top:50%;
			width:800px;  /* auto  let the browser figure this one */
			height:562px;
      margin-left:-380px;
      margin-top:-281px;
			z-index: 1;
		}
	  /* this guy show the time line 2000-2004 */
		DIV.timeLineNav {
		  position:absolute;
	    left:0px;
	    top:75px;
			padding:4px;
			width: 748px;
			height: 18px;
			z-index: 4; /*after the header(2) */
		}	 
		/*  timeLine nest inside the 
	  longer_feild   the size will be limited by the longer_Field if 
		over flows only in width it will show the little scrolls thingi*/
		DIV.tileContainer 
		{
	position:absolute;
	left:0px;
	top:108px;
	z-index: 3; /*after the header(2) */
	width: 2800px;
	height:   406px;
	overflow:hidden;
	background-color: #FFFFFF;
    }
		


    /* this one for each block  will be nested inside the 
		   tileLine */

		/* this are for repeated elements */
		DIV.p1 {
	position:absolute;
	left:     0px;
	top:      0px;
	z-index:    5;
	width:  172px;
	height: 366px;
	clip: rect(0px,172px,366px,0px);	
		}
		
	  DIV.p2 {
	position:absolute;
	left:     196px;
	top:      0px;
	z-index:    5;
	width:  172px;
	height: 366px;
	clip: rect(0px,172px,366px,0px);	
		}
	  DIV.p3 {
	position:absolute;
	left:     392px;
	top:      0px;
	z-index:    5;
	width:  172px;
	height: 366px;
	clip: rect(0px,172px,366px,0px);	
		}	
	  DIV.p4 {
	position:absolute;
	left:     588px;
	top:      0px;
	z-index:    5;
	width:  172px;
	height: 366px;
	clip: rect(0px,172px,366px,0px);	
		}	
	  DIV.p5 {
	position:absolute;
	left:     784px;
	top:      0px;
	z-index:    5;
	width:  172px;
	height: 366px;
	clip: rect(0px,172px,366px,0px);	
		}		
	  DIV.p6 {
	position:absolute;
	left:     980px;
	top:      0px;
	z-index:    5;
	width:  172px;
	height: 366px;
	clip: rect(0px,172px,366px,0px);	
		}			
		
		
	 DIV.p7 {
	position:absolute;
	left:     1176px;
	top:      0px;
	z-index:    5;
	width:  172px;
	height: 366px;
	clip: rect(0px,172px,366px,0px);	
		}			
					
	 DIV.p8 {
	position:absolute;
	left:     1372px;
	top:      0px;
	z-index:    5;
	width:  172px;
	height: 366px;
	clip: rect(0px,172px,366px,0px);	
		}		
		
		
		
		 DIV.p9 {
	position:absolute;
	left:     1568px;
	top:      0px;
	z-index:    5;
	width:  172px;
	height: 366px;
	clip: rect(0px,172px,366px,0px);	
		}		
	
		 DIV.p10 {
	position:absolute;
	left:     1764px;
	top:      0px;
	z-index:    5;
	width:  172px;
	height: 366px;
	clip: rect(0px,172px,366px,0px);	
		}		
		
		
		
		
		
		 DIV.p11 {
	position:absolute;
	left:     1960px;
	top:      0px;
	z-index:    5;
	width:  172px;
	height: 366px;
	clip: rect(0px,172px,366px,0px);	
		}		
		
		
		 DIV.p12 {
	position:absolute;
	left:     2156px;
	top:      0px;
	z-index:    5;
	width:  172px;
	height: 366px;
	clip: rect(0px,172px,366px,0px);	
		}		
		
		
		 DIV.p13 {
	position:absolute;
	left:     2352px;
	top:      0px;
	z-index:    5;
	width:  172px;
	height: 366px;
	clip: rect(0px,172px,366px,0px);	
		}		
		
		
		/* this image will be nested inside the  DIV p1 p2 ... etc */
		



		DIV.image
    {
	position:absolute;
	left:0px;
	top:0px;
	z-index: 6;
	width:300px;
	height:302px;
	overflow: hidden;
    }
		/* this is a option for the text and this
		 will be nested inside the  DIV p1 p2 ... etc*/
	  DIV.text
    {
	position:absolute;
	left:0px;
	top:302px;
	z-index: 7;
	width:175px;
	height:64px;
	text-align: left;
  padding: 8px;
	overflow: hidden;
    }
	/****************************************************************************************************/