pages.css

/*****INDEX*****/
#left {
	width:90%;
	margin:0 auto;
	padding:10% 0;
	color:white;
	font-family:'Eras', sans-serif;
	background-image:url('images/jr.png');
	background-position:right center;
	background-repeat:no-repeat;
	background-size:auto 67%;
}
#left p {
	width:70%;
	font-size:40px;
}
#content {
	padding:0 25px;
	max-width:1200px;
	margin:0 auto;
}
#content h3 {
	font-size:170%;
}
#split, #sponsors {
	padding:50px;
	overflow:hidden;
	background:white;
}
#split h3 {
	padding-bottom:10px;
}
#about {
	width:30%;
	float:left;
	padding-right:5%;
}
#projects img {
	padding-right:3%;
	width:14%;
	display:block;
	float:left;
}
#projects img:last-of-type {
	padding-right:0;
}
#projects p {
	padding-left:35%;
}
#projects p:first-line {
	padding-left:0;
}
#sponsors #hr {
	background:#bbb;
	height:2px;
}
#sponsors h3 {
	width:150px;
	margin:0 auto;
	margin-top:-25px;
	background:white;
	text-align:center;
	padding-bottom:20px;
}
#row img {
	width:19%;
	margin:0 .5%;
}
/*****OTHER PAGES*****/
.title + #content {
	background:white;
	padding:50px 0;
	overflow:hidden;
}
#cWrapper {
	padding:0 50px;
}
/*Grid*/
.grid {
	max-width:1200px;
	width:100%;
	padding:0 45px;
}
.grid td {
	padding:5px;
	position:relative;
}
.grid a{
	height:100%;
	display:block;
}
.grid img {
	width:100%;
	height:auto;
	vertical-align:middle;
	opacity:1;
	filter:alpha(opacity=100);
	transition: opacity .2s;
	-moz-transition: opacity .2s;
	-webkit-transition: opacity .2s;
	-o-transition: opacity .2s;
}
.grid img:hover {
	opacity:.50;
	filter:alpha(opacity=50);
}
.grid p {
	height:100%;
	display:table-cell;
	vertical-align:middle;
}
.grid span {
	display:table;
}
.largePerm {
	width:60%;
}
.largeShow {
	width:60%;
	display:table-cell;
}
.smallShow {
	width:20%;
	display:none;
}
.smallHide {
	width:20%;
	display:table-cell;
}
.gridText {
	display:none;
	padding:0 50px;
	font-size:80%;
}
.gridDetails {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.gridDetails ul {
	margin:5px;
	overflow:hidden;
	height:0;
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
}
.gridDetails:hover ul {
	height:100%;
}
.gridDetails li {
	padding-left:5px;
	background:rgba(255,255,255,.8);
}
.gridDetails ul li a{
	background:none;
	color:#498211;
}
.gridDetails ul li a:hover{
	text-decoration:underline;
}
.slides_container div {
	display:block;
}
/*Lists*/
.altList {
	padding:0;
	margin-top:20px;
	overflow:hidden;
	color:#222;
}
.altList li {
	overflow:hidden;
	clear:both;
	margin-top:10px;
	width:100%;
	float:left;
	display:table;
}
.altList li > img{
	width:20%;
}

.rolloverImg{
	width:20%;
	float:left;
}
.rolloverImg{
	background-position:top;
	background-size:100%;
	background-repeat:no-repeat;
}
.rolloverImg img{
	width:100%;
	height:auto;
	transition: opacity .2s;
	-moz-transition: opacity .2s;
	-webkit-transition: opacity .2s;
	-o-transition: opacity .2s;
}
.rolloverImg img:hover{
	opacity:0;
	filter:opacity(alpha=0);
}
.altList li:nth-child(2n+2) .rolloverImg{
	float:right;
}
.altList span {
	width:60%;
	height:100%;
	float:right;
	margin:0 20% 0 0;
	display:table-cell;
	vertical-align:middle;
}

.altList li:nth-child(2n+2) span{
	float:left;
	margin:0 0 0 20%;
}
.altList h2 {
	padding:0 20px;
}
.altList h3{
	padding:0 20px;
	font-size:16px !important;
}
.altList p  {
	padding:0 20px;
}
.altList li:nth-child(2n+2) p, .altList li:nth-child(2n+2) h2, .altList li:nth-child(2n+2) h3{
	text-align:right;
}
h2.note:after{
	content:"*";
	color:#222222;
	font-size:12px;
	vertical-align:super;
}
p.note{
	font-size:12px;
	margin-top:40px;
}
p.note:before{
	content:"* ";
	color:#222222;
	font-size:12px;
	vertical-align:super;
	font-weight:bold;
}
/*About*/
#aboutp {
	padding:0 50px;
}
ul.memberlist li {
	padding:0 70px;
	list-style:disc;
	list-style-position:inside;
}
#content #first {
	width:35%;
	height:auto;
	margin:0 0 0 2%;
	float:right;
}
#content #second {
	width:35% !important;
	height:auto !important;
	margin:0 2% 0 0;
	float:left;
}
img.membership#second{
	padding-left:25px;
}
/*EBoard*/
/*Eboard joke images should be square and at least 300x300 pixels*/
#chairmanImg{
	background-image:url('images/eboard/chairman_joke.jpg');
}
#evalsImg{
	background-image:url('images/eboard/evals_joke.jpg');
}
#financialImg{
	background-image:url('images/eboard/financial_joke.jpg');
}
#historyImg{
	background-image:url('images/eboard/history_joke.jpg');
}
#impsImg{
	background-image:url('images/eboard/imps_joke.jpg');
}
#opCommImg{
	background-image:url('images/eboard/opcomm_joke.jpg');
}
#rdImg{
	background-image:url('images/eboard/rd_joke.jpg');
}
#socialImg{
	background-image:url('images/eboard/social_joke.jpg');
}
/*Contact*/
#contact {
	margin:0 50px;
	color:#fff;
	overflow:hidden;
	background-image:url('images/map.jpg');
	background-position:right;
	background-size:1100px 735px;
	background-repeat:no-repeat;
	background-position:top;
	-moz-box-shadow: inset 0 0 100px rgba(0,0,0,.25);
	-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.25);
	box-shadow: inset 0 0 100px rgba(0,0,0,.25);
}
#contact-info {
	margin:50px auto 0 auto;
	padding:30px;
	width:320px;
	background-color:rgba(0,0,0,.8);
}
#contact-info p {
	padding:0;
}
#contact-form {
	margin:20px auto 43px auto;
	width:380px;
	position:relative;
}
#contact-form input.input, #contact-form select.select, #contact-form textarea.textarea {
	background-color:rgba(0,0,0,.8);
	line-height:30px;
	height:30px;
	padding-left:8px;
	margin-bottom:20px;
}
#contact-form input.input {
	width:372px;
	color:white;
}
#contact-form textarea.textarea {
	font-family: 'Oxygen', sans-serif;
	width:372px;
	height:150px;
	margin:0;
	color:white;
}
#contact-form select.select {
	background-color:#323232;
}
#select_email{
	height:30px;
	width:380px;
	line-height:30px;
	padding-left:4px !important;
	color:#fff;
	margin:0;
}
input.input#submit-button {
	position:absolute;
	bottom:-10px;
	right:-15px;
	width:55px;
	padding:0;
	background-color:#5ba215;
	color:#fff;
	cursor:pointer;
	margin:0;
}
input.input#submit-button:hover {
	background-color:#498211;
}
.error{
	color:orange;
	position:absolute;
	margin-left:-15px;
	margin-top:2px;
}