/* the large image. we use a gray border around it */
#img { border:1px solid #666; }
/* "next image" and "prev image" links */
/* absolute positioning relative to the overlay */
.next, .prev { position:absolute; top:40%;	border:1px solid #666; cursor:pointer; display:block; padding:10px 20px; color:#fff; font-size:11px;
/* upcoming CSS3 features */ -moz-border-radius:5px; -webkit-border-radius:5px;	}
.prev { left:0; border-left:0; -moz-border-radius-topleft:0; -moz-border-radius-bottomleft:0; -webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0; }
.next { right:0; border-right:0; -moz-border-radius-topright:0; -moz-border-radius-bottomright:0; -webkit-border-bottom-right-radius:0;	-webkit-border-top-right-radius:0; }
.next:hover, .prev:hover { text-decoration:underline; background-color:#000; }
/* when there is no next or previous link available this class is added */
.disabled { visibility:hidden; }
/* the "information box" */
.info { bottom:0; left:0; padding:10px 15px; color:#fff; font-size:11px; border-top:1px solid #666;}
.info strong { display:block;}
/* progress indicator (animated gif). should be initially hidden */
.progress {	position:absolute; top:45%; left:50%; display:none;}
/* everybody should know about RGBA colors. */
.next, .prev, .info { background:#005195 !important; background:rgba(0, 0, 0, 0.6) url(img/h80.png) repeat-x;	}

/* the overlayed element */
.simple_overlay { display:none;	z-index:10000; background-color:#333; width:675px; min-height:200px; border:1px solid #666; -moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;}
/* close button positioned on upper right corner */
.simple_overlay .close { background-image:url(img/close.png); position:absolute; right:-15px; top:-15px; cursor:pointer; height:35px; width:35px; }
/* the thumbnails */
#triggers { float:left;}
#triggers img { background-color:#fff; padding:2px; border:1px solid #ccc; margin:2px 2px; -moz-border-radius:4px; -webkit-border-radius:4px; width:82px; height:70px;}
/* the active thumbnail */
#triggers a.active img { outline:1px solid #000; /* show on top of the expose mask */ z-index:9999; position:relative; }

div.overlay { width:622px; display:none; background:#FFF; padding:20px; -moz-border-radius:10px; -webkit-border-radius:10px; border:1px solid #CCC;}
div.overlay div.close { background-image:url(img/close.png); position:absolute; right:5px; top:5px; cursor:pointer; height:35px; width:35px; }
div.black h2, div.petrol h2 {color:#ddd;}