@import url('colors.css');

body {
	margin: 0px;
	padding: 15px;
	text-align: center;
}

#container {
	width: 750px;
	margin: 0px auto;
	text-align: left;
}

#logo {
	margin: 0px;
}


#menu {
	margin: 0px;
	padding: 5px 0px;
	list-style: none;
}
	#menu li { display: inline; padding: 0px 20px 0px 0px; }
	
#body2col, #body3col, #body2colb {
	width: 750px;
}

#body2col #body1 {
	width: 585px;
	float: left;
	margin-right: 15px;
	padding: 10px 0px;
}

#body2colb #body1 {
	width: 585px;
	float: left;
	margin-left: 15px;
	padding: 10px 0px;
}

#body3col #body1 {
	width: 420px;
	float: left;
	margin-right: 15px;
	margin-left: 15px;
	padding: 10px 0px;
}


#body2, #body3 {
	width: 150px;
	float: left;
	padding: 10px 0px;
}

#footer {
	padding: 5px 0px;
	clear: both;
}

.infobox { 
	padding: 5px;
	margin-bottom: 10px;
	width: auto;
}

.infobox h2 { 
	margin: -5px -5px 0px -5px;
	padding: 5px;
}

#pics { 
	position: relative;
}


#pic1 {
	width: 258px;
	background: url('images/pic1.jpg') no-repeat;
	position: absolute;
	top: 0px;
	left: 0px; 
}

#pic2 {
	width: 260px;
	background: url('images/pic2.jpg') no-repeat;
	position: absolute;
	top: 0px;
	left: 259px;
}

#pic3 {
	width: 230px;
	background: url('images/pic3.jpg') no-repeat;
	position: absolute;
	top: 0px;
	left: 520px;
}

.layout1 #pics, .layout1 #pic1, .layout1 #pic2, .layout1 #pic3 {
	height: 172px;
}

.layout2 #pics, .layout2 #pic1, .layout2 #pic2, .layout2 #pic3 {
	height: 86px;
}

/* change this section to adjust background image position */
.layout2 #pic1 {
	background-position: 0px -20px;
}

.layout2 #pic2 {
	background-position: 0px -80px;
}

.layout2 #pic3 {
	background-position: 0px -15px;
}