.navigation {
	margin: 10px 0 0 0;
	padding-top:5px;
	padding-left: 5px;
	display: block;
	background-image:url(../img/grey_dots/1x1.gif);
	background-position: 0 0;
	background-attachment:scroll;
	background-repeat:repeat;
}

.navigation a {
	margin-right: 10px;
	margin-bottom: 10px;
	background-position: 0 0;
	background-repeat:no-repeat;
}

/*Rollover code for the Standard Dots ---------------------------------*/
.navigation .null {
	width: 40px;
	height: 40px;
	display: inline;
	float:left;
	background-image: url(../img/rollover.gif);
	background-position:0 -80px;
}

.navigation .null:hover {
	background-position: 0 -40px;
	cursor: default;
}

/*--------------------------------- Rollover code for the Standard Dots*/
.navigation a span {
	/*this removes the text within the span tags in the links. This text is neccessary to make the dots full size.*/
	position:relative;
	right:9000px;
}

#mainContent .text {
	font-size: 0.5em;
	display: none;
}

/*Predefined Grey Dots -------------------------------------------------------------------------*/
/*Project 01 ---------------------------------------------------------------------*/
#container #mainContent .navigation .rollover_project_01 {
		width:90px;
		height:140px;
		float:left;
		background-image:url(../img/grey_dots/2x3.jpg);
		background-position: 0 0;
}

#container #mainContent .navigation .rollover_project_01:hover {
	background-image:url(../img/navigation_images/australia_hover.jpg);
	background-position:0 0;
}

#container #mainContent .navigation .rollover_project_01:active {
	background-image:url(../img/navigation_images/australia_active.jpg);
	background-position:0 0;
}

/*--------------------------------------------------------------------- Project 01*/
.navigation .rollover_project_02 {
	width: 140px;
	height: 90px;
	float:left;
	background-image:url(../img/grey_dots/3x2.jpg);
	background-position:0 0;
}

.navigation .rollover_project_02:hover {
	background-image:url(../img/navigation_images/bering_strait_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_02:active {
	background-image:url(../img/navigation_images/bering_strait_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_03 {
	width: 240px;
	height: 140px;
	float:left;
	background-image:url(../img/grey_dots/5x2.jpg);
}

.navigation .rollover_project_03:hover {
	background-image:url(../img/navigation_images/dc_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_03:active {
	background-image:url(../img/navigation_images/dc_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_04 {
	width: 340px;
	height: 190px;
	float:left;
	background-image:url(../img/grey_dots/7x4.jpg);
}

.navigation .rollover_project_04:hover {
	background-image:url(../img/navigation_images/eola_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_04:active {
	background-image:url(../img/navigation_images/eola_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_05 {
	width: 140px;
	height: 90px;
	float:left;
	background-image:url(../img/grey_dots/3x2.jpg);
}

.navigation .rollover_project_05:hover {
	background-image:url(../img/navigation_images/fau_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_05:active {
	background-image:url(../img/navigation_images/fau_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_06 {
	width: 90px;
	height: 140px;
	float:left;
	background-image:url(../img/grey_dots/2x3.jpg);
}

.navigation .rollover_project_06:hover {
	background-image:url(../img/navigation_images/greenroof_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_06:active {
	background-image:url(../img/navigation_images/greenroof_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_07 {
	width: 190px;
	height: 90px;
	float:left;
	background-image:url(../img/grey_dots/4x2.jpg);
}

.navigation .rollover_project_07:hover {
	background-image:url(../img/navigation_images/i4_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_07:active {
	background-image:url(../img/navigation_images/i4_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_08 {
	width: 190px;
	height: 90px;
	float:left;
	background-image:url(../img/grey_dots/4x2.jpg);
}

.navigation .rollover_project_08:hover {
	background-image:url(../img/navigation_images/kirtland_park_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_08:active {
	background-image:url(../img/navigation_images/kirtland_park_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_09 {
	width: 40px;
	height: 190px;
	float:left;
	background-image:url(../img/grey_dots/1x4.jpg);
}

.navigation .rollover_project_09:hover {
	background-image:url(../img/navigation_images/london_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_09:active {
	background-image:url(../img/navigation_images/london_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_10 {
	width: 90px;
	height: 190px;
	float:left;
	background-image:url(../img/grey_dots/4x2.jpg);
}

.navigation .rollover_project_10:hover {
	background-image:url(../img/navigation_images/miami_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_10:active {
	background-image:url(../img/navigation_images/miami_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_11 {
	width: 240px;
	height: 90px;
	float:left;
	background-image:url(../img/grey_dots/5x2.jpg);
}

.navigation .rollover_project_11:hover {
	background-image:url(../img/navigation_images/miller_theater_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_11:active {
	background-image:url(../img/navigation_images/miller_theater_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_12 {
	width: 190px;
	height: 90px;
	float:left;
	background-image:url(../img/grey_dots/4x2.jpg);
}

.navigation .rollover_project_12:hover {
	background-image:url(../img/navigation_images/new_orleans_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_12:active {
	background-image:url(../img/navigation_images/new_orleans_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_13 {
	width: 240px;
	height: 140px;
	float:left;
	background-image:url(../img/grey_dots/5x3.jpg);
}

.navigation .rollover_project_13:hover {
	background-image:url(../img/navigation_images/philadelphia_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_13:active {
	background-image:url(../img/navigation_images/philadelphia_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_14 {
	width: 190px;
	height: 140px;
	float:left;
	background-image: url(../img/grey_dots/4x3.jpg);
}

.navigation .rollover_project_14:hover {
	background-image: url(../img/navigation_images/reccenter_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_14:active {
	background-image: url(../img/navigation_images/reccenter_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_15 {
	width: 140px;
	height: 90px;
	float:left;
	background-image: url(../img/grey_dots/3x2.jpg);
}

.navigation .rollover_project_15:hover {
	background-image: url(../img/navigation_images/rome_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_15:active {
	background-image: url(../img/navigation_images/rome_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_16 {
	width: 90px;
	height: 190px;
	float:left;
	background-image: url(../img/grey_dots/2x4.jpg);
}

.navigation .rollover_project_16:hover {
	background-image: url(../img/navigation_images/spectrum_bridge_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_16:active {
	background-image: url(../img/navigation_images/spectrum_bridge_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_17 {
	width: 190px;
	height: 140px;
	float:left;
	background-image: url(../img/grey_dots/4x3.jpg);
}

.navigation .rollover_project_17:hover {
	background-image: url(../img/navigation_images/toledo_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_17:active {
	background-image: url(../img/navigation_images/toledo_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_18 {
	width: 340px;
	height: 190px;
	float:left;
	background-image: url(../img/grey_dots/7x4.jpg);
}

.navigation .rollover_project_18:hover {
	background-image: url(../img/navigation_images/virginia_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_18:active {
	background-image: url(../img/navigation_images/virginia_active.jpg);
	background-position:0 0;
}

.navigation .rollover_project_19 {
	width: 90px;
	height: 190px;
	float:left;
	background-image: url(../img/grey_dots/2x4.jpg);
}

.navigation .rollover_project_19:hover {
	background-image: url(../img/navigation_images/lexus_hover.jpg);
	background-position:0 0;
}

.navigation .rollover_project_19:active {
	background-image: url(../img/navigation_images/lexus_active.jpg);
	background-position:0 0;
}



/*------------------------------------------------------------------------- Predefined Grey Dots*/