/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

/*

------------Width of images is adjusted in infogrid.js  --  Width of info columns is adjusted in dd {}---------------
			For an image 0f 300 px to fit in a column, the column width of dd must be 279 (10 px padding on each side, and 1 px for white right border)
*/
    #boxos1 {
	width: 200px;
	height: 200px;
	background-color: #ff0000;
	position: absolute;

	z-index: 1;
}
    #slideros1 { 	width: 15px;
	position: absolute;
	left: 235px;
	top: 20px; }
	
	
	#boxos2 {
	width: 200px;
	height: 200px;
	background-color: #fff000;
	position: relative;
	
}
	
    #slideros2 {
	width: 15px;
	position: absolute;
	left: 210px;
	top: 20px;
}


  
  
  
    #boxos1b {
	width: 200px;
	height: 200px;
	background-color: #ff0000;
	position: absolute;

	z-index: 1;
}
    #slideros1b { 	width: 15px;
	position: absolute;
	left: 235px;
	top: 20px; }
	
	
	#boxos2b {
	width: 200px;
	height: 200px;
	background-color: #fff000;
	position: relative;
	
}
	
    #slideros2b {
	width: 15px;
	position: absolute;
	left: 210px;
	top: 20px;
}  
  
  
  
  
  
  

#bodybox {
	height: 1000px;
	background-color: #CCC;


	}

.moviebox {
	height: 180px;
	width: 279px;
	position: absolute;
	background-color: #FFF;
	visibility: visible;
	
	}
.videoboxwrapper {
	height: 480px;
	width: 279px;	
	}

#box1 {
	height:280px;
	width: 279px;
	position:absolute;
	z-index:1;
	background-image: url(../images/Image_4b.png);
	top: 10px;
	}

.box2{
	height: 280px;
	width: 279px;
	position: relative;
	background-image: url(../images/Image_4.png);
	}

.infobox {
	position:relative;
	height: 100px;
	width: 279px;
	padding:5px;
	background-image: url(../images/Image_1tn.png);
	background-repeat: no-repeat;
	color: #000;
    }
.infobox img {
	position:relative;
	z-index:2;
    }
.infobox .more {
	display:none;
    }
.infobox:hover .more {
	display:block;
	position:absolute;
	z-index:1;
	left:0px;
	top:0px;
	width:279px;
	background-image: url(../images/Image_3tn.png);
	background-repeat: no-repeat;
	height: 100px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	color: #000;
    }
	
.infoboxv {
	position:relative;
	height: 180px;
	width: 279px;
	padding:5px;
	background-image: url(../images/videoposter.png);
	background-repeat: no-repeat;
	color: #000;
    }
.infoboxv img {
	position:relative;
	z-index:2;
    }
.infoboxv .morev {
	display:none;
    }
.infoboxv:hover .morev {
	display:block;
	position:absolute;
	z-index:1;
	left:0px;
	top:0px;
	width:279px;
	

	height: 180px;
	/*padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	color: #000;*/
    }	
	
.spasc {
	height: 100px;	
	}

.spasc img {
	position:absolute;
	width: 279px;
	}

.spasc span {
	display:block;
	height: 100px;
	width: 279px;
	}

* { margin: 0; padding: 0; }

body { font: 14px Georgia, serif; }
#page-wrap { width: 1080px; padding: 0 0 0 15px; margin: 0 auto; overflow: hidden; height: 100%; }

.info-col { float: left; width: 132px; height: 100%; padding: 50px 0 0 0; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }

.image { height: 100px; text-indent: -9999px; display: block; border-right: 1px solid white; }
.imagebig { height: 300px; text-indent: -9999px; display: block; border-right: 1px solid white; }


.cat1 { background: url(../images/Image_1tn.png) center center no-repeat; }
.cat2 { background: url(../images/Image_2tn.png) center center no-repeat; }
.cat3 { background: url(../images/Image_3tn.png) center center no-repeat; }
.cat4 { background: url(../images/Image_4tn.png) center center no-repeat; }
.cat5 { background: url(../images/Image_5tn.png) center center no-repeat; }

#pic1 {
	background-image: url(file:///Zorba/Users/PEZ/Desktop/webInfoGrid/images/Image_1.png);
	height: 100%;
	width: 100%;
	}
	
.pic1 {
	background: url(../images/Image_1.png) center center no-repeat;
	}
	
.pic1 {
	background: url(../images/10.png) center center no-repeat;
	}
	
.pic6 {
	background-image: url(../images/Image_6.png);
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	}
#foo {
	height:279px;
	width: 279px;
	background-image: url(../images/Image_7.png);
	display:block;
    position:absolute;
    z-index:1;
    left:10px;
    top:10px;
	}
	
	
dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
dd {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 279px;
	background: #900;
	padding: 10px;
	color: white;
	border-right: 1px solid white;

}

dt:nth-of-type(1) { background: #b44835; }
dd:nth-of-type(1) { background: #b44835; }

dt:nth-of-type(2) { background: #ff7d3e; }
dd:nth-of-type(2) { background: #ff7d3e; }

dt:nth-of-type(3) { background: #ffb03b; }
dd:nth-of-type(3) { background: #ffb03b; }

dt:nth-of-type(4) { background: #c2a25c; }
dd:nth-of-type(4) { background: #c2a25c; }

dt:nth-of-type(5) { background: #4c443c; }
dd:nth-of-type(5) { background: #4c443c; }

dt:nth-of-type(6) { background: #656b60; }
dd:nth-of-type(6) { background: #656b60; }

.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }