/*layout styles and description for SA Ventures website*/
* {
	margin:0;
	padding:0;
}

/*----colors used in this site:
Grey-background: #D4D4D4
Grey-text: #757575
Grey-box outlines: #B2B2B2
Blue: #4A66A7
Green: #8AB800
*/


body {
	background-color: #D4D4D4;
	background-repeat: repeat-x;
	background-position: top;
	background-image: url(images/background-gradient.gif);
}
#wholepage {
	width: 750px;
	margin: 41px auto 20px auto;
	padding: 0 25px;
}
#header .logo {
	display: block;
	float: left;
  width: 287px;
	height: 91px;
	background-image: url(images/SAI-logo.gif);
	
}
#header .logo span {
	display: block;
	position: relative;
	z-index: -1;
}
#header .section {
	float: left;
	height: 61px;
	width: 630px;
	margin-left: -167px;
}
#header h1 {
	height: 56px;
	padding: 5px 30px 0 0;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 31px;
	font-weight: bolder;
	text-transform: capitalize;
	color: #FFFFFF;
	background-color: #8ab800;
	text-align: right;
}
#header h1 strong {
	display: block;
	margin-top: -10px;
	color: #FFFFFF;
	font-size: 44px;
	line-height: 40px;
	font-weight: bold;
  vertical-align: bottom;
}
* html #header h1 strong {
  margin-top: -13px;
}
*:first-child+html #header h1 strong {
  margin-top: -14px; /* fix for IE 7 */ 
}

/*----navigation:
Starts 325px from left edge, 
The block is same width as the squares below, edge of image to edge of image.
	- 403px wide
	- spread the 5 links evenly across this space
* Bottom of navigation should line up with bottom of logo*/
#header .navigation {
	float: right;
	margin-top: 17px;
  margin-left: -23px; /* fix for IE 6/7 */
}
#header .navigation li {
	float: left;
	list-style: none;
}
#header .navigation li a {
	display: block;
	margin-left: 23px;
}
#header .navigation ul {
	display: none;
	clear: both;
	margin-left: 18px;
	background-color: #fff;
	border: 1px #b2b2b2 solid;
}
#header .navigation li a.over, /* fix for missing hover IE 6 */
#header .navigation li:hover a {
	background-image: none;
}
#header .navigation li:hover ul,
#header .navigation li.over ul {
	display: block;
	position: absolute;
}
#header .navigation li li {
	float: none;
	margin: 0;
}
* html #header .navigation li li {
  height: 1%;
  width: 15em;
}
#header .navigation li li a {
	padding: 5px;
	margin-left: 0;
	border-bottom: 1px #b2b2b2 solid;
}
#header .navigation li li.last a {
	border-bottom: none;
}
/*----space between logo/header area and body content: 14px*/
#content {
	clear: both;
	width: 750px;
	float: left;
	padding-top: 14px;
}


/*----Body area -- the box that contains the text*/

#main {
	float: left;
	position: relative;
	width: 298px;
	height: 324px;
	padding: 50px 15px 50px 15px;

	border: 1px solid #b2b2b2;
	background-color: #FFFFFF;
	overflow: auto;
}
* html #main {
	height: 324px;
	padding: 50px 15px 50px 15px;
}
.home #main {
	padding-top: 25px;
	padding-bottom: 25px;
	height: 374px;
}
#main a.jScrollArrowUp {
	height: 15px;
	background-color: #fff;
	background-image: url(images/scroll-arrow-up.gif);
}
#main a.jScrollArrowDown {
	height: 15px;
	background-color: #fff;
	background-image: url(images/scroll-arrow-down.gif);
}
.jScrollPaneDrag {
	background-color: #4A66A7;
}
.jScrollPaneTrack {
	background-color: #B2B2B2;
}

/*---- footer ----
space between footer and text: 20px
text is centered in footer area
add approx. 20px padding below the text
*/
#footer {
	margin: 0px;
	clear: both;
	padding-top: 14px;
	padding-bottom: 14px;
}


/*---- gride of images area:
full width is approx. 413px (includes all borders)
- space between mainbody and grid: 6px
Each square is 132px square
add 1px border:
	border: 1px solid #b2b2b2;
	background-color: #FFFFFF;
6px of spacing between each block
- image inside is 120px wide and 124px deep (** I don't know why they're not square like the outlines... maybe we can adjust this)
*/
#matrix table {
  width: 420px; /* fix for FF1 */
}
#matrix {
	float: left;
}
#matrix #m1x1,
#matrix #m1x2,
#matrix #m1x3,
#matrix #m2x1,
#matrix #m2x2,
#matrix #m2x3,
#matrix #m3x1,
#matrix #m3x2,
#matrix #m3x3 {
	margin: 0 0 6px 6px;
	padding: 6px;
	border: 1px solid #b2b2b2;
	background-color: #FFFFFF;
}
#matrix .sq {
	width: 120px;
	height: 124px;
}
#matrix a {
	display: block;
	width: 120px;
	height: 124px;
}
#matrix span {
	display: block;
	position: relative;
	z-index: -1;
	padding-top: 25%;
}
.home #m1x1 .sq a { background-image: url(images/challenges/m1x1.jpg) }
.home #m1x2 .sq a { background-image: url(images/challenges/m1x2.jpg) }
.home #m1x3 .sq a { background-image: url(images/challenges/m1x3.jpg) }
.home #m2x2 .sq a { background-image: url(images/challenges/m2x2.jpg) }
.home #m2x3 .sq a { background-image: url(images/challenges/m2x3.jpg) }
.home #m3x3 .sq a { background-image: url(images/challenges/m3x3.jpg) }
.home #matrix a:hover span {
	z-index: 1;
}
.home #matrix .sq a:hover {
	background-color: #fff;
	background-image: none;
}
#matrix .inside {
  padding-top: 36px;
  height: 88px;
}

.publishing-strategy #m1x1 .sq { background-image: url(images/publishing/strategy-m1x1.jpg) }
.publishing-strategy #m1x2 .sq { background-image: url(images/publishing/strategy-m1x2.jpg) }
.publishing-strategy #m1x3 .sq { background-image: url(images/publishing/strategy-m1x3.jpg) }
.publishing-strategy #m2x2 .sq { background-image: url(images/publishing/strategy-m2x2.jpg) }
.publishing-strategy #m2x3 .sq { background-image: url(images/publishing/strategy-m2x3.jpg) }
.publishing-strategy #m3x3 .sq { background-image: url(images/publishing/strategy-m3x3.jpg) }
.publishing-results #m1x1 .sq { background-image: url(images/publishing/results-m1x1.jpg) }
.publishing-results #m1x2 .sq { background-image: url(images/publishing/results-m1x2.jpg) }
.publishing-results #m1x3 .sq { background-image: url(images/publishing/results-m1x3.jpg) }
.publishing-results #m2x2 .sq { background-image: url(images/publishing/results-m2x2.jpg) }
.publishing-results #m2x3 .sq { background-image: url(images/publishing/results-m2x3.jpg) }
.publishing-results #m3x3 .sq { background-image: url(images/publishing/results-m3x3.jpg) }
.publishing #m1x1 .sq { background-image: url(images/publishing/challenge-m1x1.jpg) }
.publishing #m1x2 .sq { background-image: url(images/publishing/challenge-m1x2.jpg) }
.publishing #m1x3 .sq { background-image: url(images/publishing/challenge-m1x3.jpg) }
.publishing #m2x2 .sq { background-image: url(images/publishing/challenge-m2x2.jpg) }
.publishing #m2x3 .sq { background-image: url(images/publishing/challenge-m2x3.jpg) }
.publishing #m3x3 .sq { background-image: url(images/publishing/challenge-m3x3.jpg) }

.channel #m1x1 .sq { background-image: url(images/channel/challenge-m1x1.jpg) }
.channel #m1x2 .sq { background-image: url(images/channel/challenge-m1x2.jpg) }
.channel #m1x3 .sq { background-image: url(images/channel/challenge-m1x3.jpg) }
.channel #m2x2 .sq { background-image: url(images/channel/challenge-m2x2.jpg) }
.channel #m2x3 .sq { background-image: url(images/channel/challenge-m2x3.jpg) }
.channel #m3x3 .sq { background-image: url(images/channel/challenge-m3x3.jpg) }
.channel-strategy #m1x1 .sq { background-image: url(images/channel/strategy-m1x1.jpg) }
.channel-strategy #m1x2 .sq { background-image: url(images/channel/strategy-m1x2.jpg) }
.channel-strategy #m1x3 .sq { background-image: url(images/channel/strategy-m1x3.jpg) }
.channel-strategy #m2x2 .sq { background-image: url(images/channel/strategy-m2x2.jpg) }
.channel-strategy #m2x3 .sq { background-image: url(images/channel/strategy-m2x3.jpg) }
.channel-strategy #m3x3 .sq { background-image: url(images/channel/strategy-m3x3.jpg) }
.channel-results #m1x1 .sq { background-image: url(images/channel/results-m1x1.jpg) }
.channel-results #m1x2 .sq { background-image: url(images/channel/results-m1x2.jpg) }
.channel-results #m1x3 .sq { background-image: url(images/channel/results-m1x3.jpg) }
.channel-results #m2x2 .sq { background-image: url(images/channel/results-m2x2.jpg) }
.channel-results #m2x3 .sq { background-image: url(images/channel/results-m2x3.jpg) }
.channel-results #m3x3 .sq { background-image: url(images/channel/results-m3x3.jpg) }

.global #m1x1 .sq { background-image: url(images/global/challenge-m1x1.jpg) }
.global #m1x2 .sq { background-image: url(images/global/challenge-m1x2.jpg) }
.global #m1x3 .sq { background-image: url(images/global/challenge-m1x3.jpg) }
.global #m2x2 .sq { background-image: url(images/global/challenge-m2x2.jpg) }
.global #m2x3 .sq { background-image: url(images/global/challenge-m2x3.jpg) }
.global #m3x3 .sq { background-image: url(images/global/challenge-m3x3.jpg) }
.global-strategy #m1x1 .sq { background-image: url(images/global/strategy-m1x1.jpg) }
.global-strategy #m1x2 .sq { background-image: url(images/global/strategy-m1x2.jpg) }
.global-strategy #m1x3 .sq { background-image: url(images/global/strategy-m1x3.jpg) }
.global-strategy #m2x2 .sq { background-image: url(images/global/strategy-m2x2.jpg) }
.global-strategy #m2x3 .sq { background-image: url(images/global/strategy-m2x3.jpg) }
.global-strategy #m3x3 .sq { background-image: url(images/global/strategy-m3x3.jpg) }
.global-results #m1x1 .sq { background-image: url(images/global/results-m1x1.jpg) }
.global-results #m1x2 .sq { background-image: url(images/global/results-m1x2.jpg) }
.global-results #m1x3 .sq { background-image: url(images/global/results-m1x3.jpg) }
.global-results #m2x2 .sq { background-image: url(images/global/results-m2x2.jpg) }
.global-results #m2x3 .sq { background-image: url(images/global/results-m2x3.jpg) }
.global-results #m3x3 .sq { background-image: url(images/global/results-m3x3.jpg) }

.sports #m1x1 .sq { background-image: url(images/sports/challenge-m1x1.jpg) }
.sports #m1x2 .sq { background-image: url(images/sports/challenge-m1x2.jpg) }
.sports #m1x3 .sq { background-image: url(images/sports/challenge-m1x3.jpg) }
.sports #m2x2 .sq { background-image: url(images/sports/challenge-m2x2.jpg) }
.sports #m2x3 .sq { background-image: url(images/sports/challenge-m2x3.jpg) }
.sports #m3x3 .sq { background-image: url(images/sports/challenge-m3x3.jpg) }
.sports-strategy #m1x1 .sq { background-image: url(images/sports/strategy-m1x1.jpg) }
.sports-strategy #m1x2 .sq { background-image: url(images/sports/strategy-m1x2.jpg) }
.sports-strategy #m1x3 .sq { background-image: url(images/sports/strategy-m1x3.jpg) }
.sports-strategy #m2x2 .sq { background-image: url(images/sports/strategy-m2x2.jpg) }
.sports-strategy #m2x3 .sq { background-image: url(images/sports/strategy-m2x3.jpg) }
.sports-strategy #m3x3 .sq { background-image: url(images/sports/strategy-m3x3.jpg) }
.sports-results #m1x1 .sq { background-image: url(images/sports/results-m1x1.jpg) }
.sports-results #m1x2 .sq { background-image: url(images/sports/results-m1x2.jpg) }
.sports-results #m1x3 .sq { background-image: url(images/sports/results-m1x3.jpg) }
.sports-results #m2x2 .sq { background-image: url(images/sports/results-m2x2.jpg) }
.sports-results #m2x3 .sq { background-image: url(images/sports/results-m2x3.jpg) }
.sports-results #m3x3 .sq { background-image: url(images/sports/results-m3x3.jpg) }

.sustain #m1x1 .sq { background-image: url(images/sustain/challenge-m1x1.jpg) }
.sustain #m1x2 .sq { background-image: url(images/sustain/challenge-m1x2.jpg) }
.sustain #m1x3 .sq { background-image: url(images/sustain/challenge-m1x3.jpg) }
.sustain #m2x2 .sq { background-image: url(images/sustain/challenge-m2x2.jpg) }
.sustain #m2x3 .sq { background-image: url(images/sustain/challenge-m2x3.jpg) }
.sustain #m3x3 .sq { background-image: url(images/sustain/challenge-m3x3.jpg) }
.sustain-strategy #m1x1 .sq { background-image: url(images/sustain/strategy-m1x1.jpg) }
.sustain-strategy #m1x2 .sq { background-image: url(images/sustain/strategy-m1x2.jpg) }
.sustain-strategy #m1x3 .sq { background-image: url(images/sustain/strategy-m1x3.jpg) }
.sustain-strategy #m2x2 .sq { background-image: url(images/sustain/strategy-m2x2.jpg) }
.sustain-strategy #m2x3 .sq { background-image: url(images/sustain/strategy-m2x3.jpg) }
.sustain-strategy #m3x3 .sq { background-image: url(images/sustain/strategy-m3x3.jpg) }
.sustain-results #m1x1 .sq { background-image: url(images/sustain/results-m1x1.jpg) }
.sustain-results #m1x2 .sq { background-image: url(images/sustain/results-m1x2.jpg) }
.sustain-results #m1x3 .sq { background-image: url(images/sustain/results-m1x3.jpg) }
.sustain-results #m2x2 .sq { background-image: url(images/sustain/results-m2x2.jpg) }
.sustain-results #m2x3 .sq { background-image: url(images/sustain/results-m2x3.jpg) }
.sustain-results #m3x3 .sq { background-image: url(images/sustain/results-m3x3.jpg) }

.world #m1x1 .sq { background-image: url(images/world/challenge-m1x1.jpg) }
.world #m1x2 .sq { background-image: url(images/world/challenge-m1x2.jpg) }
.world #m1x3 .sq { background-image: url(images/world/challenge-m1x3.jpg) }
.world #m2x2 .sq { background-image: url(images/world/challenge-m2x2.jpg) }
.world #m2x3 .sq { background-image: url(images/world/challenge-m2x3.jpg) }
.world #m3x3 .sq { background-image: url(images/world/challenge-m3x3.jpg) }
.world-strategy #m1x1 .sq { background-image: url(images/world/strategy-m1x1.jpg) }
.world-strategy #m1x2 .sq { background-image: url(images/world/strategy-m1x2.jpg) }
.world-strategy #m1x3 .sq { background-image: url(images/world/strategy-m1x3.jpg) }
.world-strategy #m2x2 .sq { background-image: url(images/world/strategy-m2x2.jpg) }
.world-strategy #m2x3 .sq { background-image: url(images/world/strategy-m2x3.jpg) }
.world-strategy #m3x3 .sq { background-image: url(images/world/strategy-m3x3.jpg) }
.world-results #m1x1 .sq { background-image: url(images/world/results-m1x1.jpg) }
.world-results #m1x2 .sq { background-image: url(images/world/results-m1x2.jpg) }
.world-results #m1x3 .sq { background-image: url(images/world/results-m1x3.jpg) }
.world-results #m2x2 .sq { background-image: url(images/world/results-m2x2.jpg) }
.world-results #m2x3 .sq { background-image: url(images/world/results-m2x3.jpg) }
.world-results #m3x3 .sq { background-image: url(images/world/results-m3x3.jpg) }

.pages #m1x1 .sq { background-image: url(images/challenges/m1x1.jpg) }
.pages #m1x2 .sq { background-image: url(images/challenges/m1x2.jpg) }
.pages #m1x3 .sq { background-image: url(images/challenges/m1x3.jpg) }
.pages #m2x2 .sq { background-image: url(images/challenges/m2x2.jpg) }
.pages #m2x3 .sq { background-image: url(images/challenges/m2x3.jpg) }
.pages #m3x3 .sq { background-image: url(images/challenges/m3x3.jpg) }

.about #m1x1 .sq { background-image: url(images/about/m1x1.jpg) }
.about #m1x2 .sq { background-image: url(images/about/m1x2.jpg) }
.about #m1x3 .sq { background-image: url(images/about/m1x3.jpg) }
.about #m2x2 .sq { background-image: url(images/about/m2x2.jpg) }
.about #m2x3 .sq { background-image: url(images/about/m2x3.jpg) }
.about #m3x3 .sq { background-image: url(images/about/m3x3.jpg) }
.greg #m1x1 .sq { background-image: url(images/about/greg-m1x1.jpg) }
.greg #m1x2 .sq { background-image: url(images/about/greg-m1x2.jpg) }
.greg #m1x3 .sq { background-image: url(images/about/greg-m1x3.jpg) }
.greg #m2x2 .sq { background-image: url(images/about/greg-m2x2.jpg) }
.greg #m2x3 .sq { background-image: url(images/about/greg-m2x3.jpg) }
.greg #m3x3 .sq { background-image: url(images/about/greg-m3x3.jpg) }
.judy #m1x1 .sq { background-image: url(images/about/judy-m1x1.jpg) }
.judy #m1x2 .sq { background-image: url(images/about/judy-m1x2.jpg) }
.judy #m1x3 .sq { background-image: url(images/about/judy-m1x3.jpg) }
.judy #m2x2 .sq { background-image: url(images/about/judy-m2x2.jpg) }
.judy #m2x3 .sq { background-image: url(images/about/judy-m2x3.jpg) }
.judy #m3x3 .sq { background-image: url(images/about/judy-m3x3.jpg) }

.resources #m1x1 .sq { background-image: url(images/resources/m1x1.jpg) }
.resources #m1x2 .sq { background-image: url(images/resources/m1x2.jpg) }
.resources #m1x3 .sq { background-image: url(images/resources/m1x3.jpg) }
.resources #m2x2 .sq { background-image: url(images/resources/m2x2.jpg) }
.resources #m2x3 .sq { background-image: url(images/resources/m2x3.jpg) }
.resources #m3x3 .sq { background-image: url(images/resources/m3x3.jpg) }

.sitemap #m1x1 .sq { background-image: url(images/challenges/m1x1.jpg) }
.sitemap #m1x2 .sq { background-image: url(images/challenges/m1x2.jpg) }
.sitemap #m1x3 .sq { background-image: url(images/challenges/m1x3.jpg) }
.sitemap #m2x2 .sq { background-image: url(images/challenges/m2x2.jpg) }
.sitemap #m2x3 .sq { background-image: url(images/challenges/m2x3.jpg) }
.sitemap #m3x3 .sq { background-image: url(images/challenges/m3x3.jpg) }