﻿/* Reset Styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr {
margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; outline:none; list-style-type:none;}

/* Custom Styles */
body {font-family:Arial; font-size:12px; text-align:center; background:#4a4a4a url(../images/bg.gif) top left repeat-x; margin:0; color:#ffffff;}

#container {position:relative; margin:0 auto; width:840px; background:url(../images/container-bg.png) top left no-repeat; text-align:left; padding:0 0 50px 0;}
#container a {color:#eed24f;}
#container a:hover {color:#1ebcfc;}

#masthead {border-bottom:1px solid #696969; padding:0 0 0 0;}
#masthead .tagline {float:right; display:block; width:400px; height:7px; background:url(../images/jmu-cru-tagline.png) top right no-repeat; margin-top:7px;}
#masthead .logo {display:block; float:left; width:91px; height:81px; background:url(../images/logo-cru.gif) top left no-repeat; }

.nav {margin:50px 0 0 0; float:right; width:700px;}
.nav li {float:left;}
.nav li a {text-indent:-9999px;}

.nav ul {border-top:3px solid #222222;}
	* html .nav ul {width:170px;}
.nav ul li {background:#333333; opacity:.95; -moz-opacity:.95;}
	* html .nav ul li {float:left;}
.nav ul li a {color:#fff !important; text-indent:0; padding:8px 10px 8px 10px; width:150px; text-decoration:none; font-size:14px; border-bottom:1px solid #444444;}
.nav ul li a:hover {background:#222222;}

.nav li .home {display:block; height:11px; width:42px; padding:10px 25px 10px 25px; background:url(../images/nav-home.png) center 10px no-repeat;}
.nav li .home:hover {background:url(../images/nav-home.png) center -79px no-repeat;}
.nav .on .home {display:block; height:11px; width:42px; padding:10px 25px 10px 25px; background:url(../images/nav-home.png) center -79px no-repeat;}

.nav li .media {display:block; height:11px; width:45px; padding:10px 25px 10px 25px; background:url(../images/nav-media.png) center 10px no-repeat;}
.nav li .media:hover {background:url(../images/nav-media.png) center -79px no-repeat;}
.nav .on .media {display:block; height:11px; width:45px; padding:10px 25px 10px 25px; background:url(../images/nav-media.png) center -79px no-repeat;}

.nav li .calendar {display:block; height:11px; width:56px; padding:10px 25px 10px 25px; background:url(../images/nav-calendar.png) center 10px no-repeat;}
.nav li .calendar:hover {background:url(../images/nav-calendar.png) center -79px no-repeat;}
.nav .on .calendar {display:block; height:11px; width:56px; padding:10px 25px 10px 25px; background:url(../images/nav-calendar.png) center -79px no-repeat;}

.nav li .getinvolved {display:block; height:11px; width:80px; padding:10px 25px 10px 25px; background:url(../images/nav-get-involved.png) center 10px no-repeat;}
.nav li .getinvolved:hover {background:url(../images/nav-get-involved.png) center -79px no-repeat;}
.nav .on .getinvolved {display:block; height:11px; width:80px; padding:10px 25px 10px 25px; background:url(../images/nav-get-involved.png) center -79px no-repeat;}

.nav li .aboutus {display:block; height:11px; width:50px; padding:10px 25px 10px 25px; background:url(../images/nav-about-us.png) center 10px no-repeat;}
.nav li .aboutus:hover {background:url(../images/nav-about-us.png) center -79px no-repeat;}
.nav .on .aboutus {display:block; height:11px; width:50px; padding:10px 25px 10px 25px; background:url(../images/nav-about-us.png) center -79px no-repeat;}

.nav li .smallgroups {display:block; height:11px; width:110px; padding:10px 25px 10px 25px; background:url(../images/nav-small-groups.png) center 10px no-repeat;}
.nav li .smallgroups:hover {background:url(../images/nav-small-groups.png) center -79px no-repeat;}
.nav .on .smallgroups {display:block; height:11px; width:110px; padding:10px 25px 10px 25px; background:url(../images/nav-small-groups.png) center -79px no-repeat;}

.nav li .contact {display:block; height:11px; width:67px; padding:10px 25px 10px 25px; background:url(../images/nav-contact.png) center 10px no-repeat;}
.nav li .contact:hover {background:url(../images/nav-contact.png) center -79px no-repeat;}
.nav .on .contact {display:block; height:11px; width:67px; padding:10px 25px 10px 25px; background:url(../images/nav-contact.png) center -79px no-repeat;}


#feature {margin:30px 0 0 0; width:573px; height:308px; overflow:hidden;float:left; }
#feature img {border:4px solid #ffffff;}

#this-week {float:right; margin:30px 0 -33px 0; width:237px; height:308px; padding:15px; background:url(../images/this-week-bg2R.png) top right no-repeat; color:#cccccc;}
#this-week h2 {width:217px; height:17px; background:url(../images/this-week-at-cru.png) top left no-repeat; text-indent:-9999px;}
#this-week h3 {font-size:14px; font-weight:bold; color:#ffffff; padding:0 0 2px 0;}
#this-week ul {border-top:1px solid #444444; margin:10px 0 10px 0;}
#this-week ul li {padding:6px 0 6px 0; font-size:12px; border-bottom:1px solid #444444;}


#mission {clear:both; margin:10px 0 0 0; line-height:30px;}
#mission .top {width:840px; height:14px; background:url(../images/round-box-top.png) top left no-repeat;}
#mission .bottom {width:840px; height:14px; background:url(../images/round-box-bottom.png) top left no-repeat;}
#mission .padding {width:780px; padding:0 40px 0 20px; background:url(../images/round-box-bg.png) top left repeat-y;}
#mission .padding .whoweare {float:left; margin:0 20px 0 0;}

#callouts {clear:both; margin:5px 0 0 0;}
#callouts .top {width:840px; height:14px; background:url(../images/round-box-top.png) top left no-repeat;}
#callouts .bottom {width:840px; height:14px; background:url(../images/round-box-bottom.png) top left no-repeat;}
#callouts .padding {width:800px; padding:5px 20px 0 20px; background:url(../images/round-box-bg.png) top left repeat-y;}
#callouts .padding h4 {font-size:12px; font-weight:normal; color:#ffffff; font-weight:bold;}
#callouts .padding ul {border-top:1px solid #444444; margin:10px 0 20px 0;}
#callouts .padding ul li {padding:6px 0 6px 0; font-size:11px; border-bottom:1px solid #444444; color:#cccccc;}
#callouts .padding a {text-transform:uppercase; text-decoration:underline; font-weight:bold; font-size:11px; font-family:Arial;}
#callouts .padding a:hover {text-decoration:none;}

#callouts .padding .events {float:left; width:250px; margin:0 25px 0 0;}
#callouts .padding .events h3 {width:127px; height:13px; background:url(../images/callout-upcoming-events.png) top left no-repeat; padding:0 0 0 0; text-indent:-9999px;}

#callouts .padding .media {float:left; width:250px; margin:0 25px 0 0;}
#callouts .padding .media h3 {width:41px; height:13px; background:url(../images/media.png) top left no-repeat; padding:0 0 0 0; text-indent:-9999px;}
#callouts .padding .media ul li a {display:block; color:#eed24f; text-decoration:none; text-transform:none; font-size:12px;}
#callouts .padding .media ul li a:hover {color:#1ebcfc;}
#callouts .padding .media a {display:block; color:#eed24f; text-decoration:none; text-transform:none; font-size:12px;}
#callouts .padding .media a:hover {color:#1ebcfc;}


#callouts .padding .documents a {display:block; color:#eed24f; text-decoration:none; text-transform:none; font-size:12px;}
#callouts .padding .documents a:hover {color:#1ebcfc;}

#callouts .padding .podcasts {float:left; width:250px; margin:0 25px 0 0;}
#callouts .padding .podcasts h3 {width:70px; height:13px; background:url(../images/callout-podcasts.png) top left no-repeat; padding:0 0 0 0; text-indent:-9999px;}
#callouts .padding .podcasts ul li a {display:block; color:#eed24f; text-decoration:none; text-transform:none; font-size:12px;}
#callouts .padding .podcasts ul li a:hover {color:#1ebcfc;}

#callouts .padding .smallgroups {float:left; width:250px;}
#callouts .padding .smallgroups .signup {display:block; width:250px; height:200px; background:url(../images/small-group-sign-up.png) center 0px no-repeat; text-indent:-9999px;}
#callouts .padding .smallgroups .signup:hover {display:block; width:250px; height:200px; background:url(../images/small-group-sign-up.png) center -201px no-repeat; text-indent:-9999px;}

#callouts .padding .getinvolved {float:left; width:250px;}
#callouts .padding .getinvolved .clickhere {display:block; width:250px; height:200px; background:url(../images/get-involved.png) center 0px no-repeat; text-indent:-9999px;}
#callouts .padding .getinvolved .clickhere:hover {display:block; width:250px; height:200px; background:url(../images/get-involved.png) center -201px no-repeat; text-indent:-9999px;}

#footer {height:60px; top center no-repeat; margin:10px 0 0 0; font-size:10px; color:#cccccc;}
#footer .facebook {display:block; width:30px; height:29px; background:url(../images/facebook_icon.png) top left no-repeat; float:right;}
#footer .joinusonline {display:block; width:145px; height:29px; background:url(../images/join_us.png) top left no-repeat; float:right;}
#footer .twitter {display:block; width:35px; height:29px; background:url(../images/twitter-icon.png) top left no-repeat; float:right;}
#footer ul {float:left; width:475px; padding:0 0 0 20px;}
#footer ul li {float:left; padding:0 15px 0 15px; font-size:10px; text-transform:uppercase; font-weight:bold;}
#footer p {padding:8px 0 0 0; font-size:11px;}

#fresh {display: block;  width: 239px; height: 48px;  background: url("../images/fresh1.png") no-repeat 0 0;}
#fresh:hover {background-position: 0px -48px;}

#upper {display: block;  width: 401px; height: 44px;  background: url("../images/upper1.png") no-repeat 0 0;}
#upper:hover {background-position: 0px -44px;}

#involve{display: block;  width: 610px; height: 180px;  background: url("../images/involvement.png") no-repeat 0 0; position: absolute; top: 520px; left: 95px}
#involve:hover{background-position: 0px -182px;}

#nextphoto{display: block;  width: 365px; height: 72px;  background: url("../images/photo_next.png") no-repeat 0 0; position: absolute;left: -221px; top: 524px}
#nextphoto:hover{background-position: 0px -72px}

#backphoto{display: block;  width: 365px; height: 72px;  background: url("../images/photo_back.png") no-repeat 0 0; position: absolute;left: -221px; top: 524px}
#backphoto:hover{background-position: 0px -72px}


#audio {display: block;  width: 106px; height: 28px;  background: url("../images/audio.png") no-repeat 0 0;}
#audio:hover {background-position: 0px -28px;}

#video {display: block;  width: 97px; height: 27px;  background: url("../images/video.png") no-repeat 0 0;}
#video:hover {background-position: 0px -27px;}

#documents {display: block;  width: 182px; height: 29px;  background: url("../images/documents.png") no-repeat 0 0;}
#documents:hover {background-position: 0px -29px;}

#pictures {display: block;  width: 150px; height: 28px;  background: url("../images/pictures.png") no-repeat 0 0;}
#pictures:hover {background-position: 0px -28px;}



/* Universal Elements */

.clear {clear:both;}
#preload {position:absolute; top:0; left:-10000px; }
#preload li {position:absolute; top:0; }

#navlist li { display: inline; list-style-type: none; padding-right: 20px; padding-left: 20px; }