/*

HOME PAGE STYLES FOR HAVERFORD COLLEGE WEB SITE Designed in 2007 by White Whale Web Services (www.whitewhale.net). Property of Haverford College.

*/

/***  FEATURE AREA  ***/ #featurearea {position:relative;clear:both;width:100%;height:24.7em;overflow:hidden;background-color:#800;z-index: 10000;border-bottom:1px solid #666;} .feature {position:relative;z-index:10002;height:24.7em;display:none;} .feature.visible { display: block; } .feature p, .feature li {font-size:1.1em;line-height:1.4em;} #feature_quickaccess.feature {overflow:auto;} .featurelinks {width:auto;position:absolute;bottom:0;height:1.7em;line-height:1.5em;font-size:1.1em;left:0;color:#fff;z-index:10010;padding:0px 24px 0px 12px;} .featurelinks a {color:#fff;} .featurelinks a.margin { margin-left: 24px; } .featurelinks_background {width:100%;height:2em;background-color:#000;filter:alpha(opacity=70);opacity:0.7;-moz-opacity:0.7; -khtml-opacity:0.7;position:absolute;bottom:0;left:0;z-index:10009;} #feature_forfaculty .featureimage {margin:1em;} .feature .news_list h2 { font-size: 1.6em;} .feature .tablink { font-weight: bold;position: absolute; bottom: 1em; right: 1em; font-size:1.1em;} /***   TAB BAR   ***/ #containerspc {background-image:url(/images/homepage/container_bg.gif); background-repeat:repeat-x;} .tab {display:block;float:left;padding:0 1em;height:2em;color:#fff;line-height:auto;z-index:10400;background:transparent;} .tab a {display:block;padding-top:3px;line-height:12px;margin:0;} .tab.active {background-image:url(/images/tab_bk.png);font-weight:bold;cursor:default;background-repeat:repeat-x;background-color:#eee;} .tab.active a {color:#000;}



/*** TAB/FEATURE COLORS ***/ #tab_frontpage {font-weight:bold;} #tab_frontpage.active,#featurearea {background-color: #fdbd0f;} #tab_forstudents.active, #feature_forstudents {background-color:#f9db94; } #tab_forprospective.active, #feature_forprospective {background-color:#cce;} #tab_forfaculty.active, #feature_forfaculty {background-color: #edc;} #tab_forparents.active, #feature_forparents {background-color:#cee;} #tab_foralumni.active, #feature_foralumni {background-color: #d5ebc0;} #tab_quickaccess.active, #feature_quickaccess {background-color: #ffda80;}

/*** FEATURE CONTENT  ***/ .featurecolumn1,.featurecolumn2, .featurecolumn3, .featurecolumn4 {position:absolute; top:0px;width:25%;overflow:hidden;} .featurecolumn1 {left:0;} .featurecolumn2 {left:25%;} .featurecolumn3 {left:50%; text-align:center;} .featurecolumn4 {left:75%;} #featurearea h1, #featurearea h2 {margin:10px 10px 0px 15px;text-align:left;} #featurearea h3, #featurearea h4, #featurearea h5 {margin:10px 10px 10px 15px;text-align:left;} #featurearea form, #featurearea p, #featurearea ul {margin:0 10px 10px 15px;text-align:left;} #featurearea img.vertrule {width:1px;position:absolute; top:10px;height:227px;z-index:15000;} #feature_forstudents .featurecolumn1 h1 {font-size:10em;} .rule1 {left:25%;} .rule2 {left:50%;} .rule3 {left:75%;} .feature select {width:100%;max-height:100%;} #go_link { font: 11em/1em "Goudy Old Style","Goudy",Georgia,serif; display: block;text-align:center;} #go_link:hover { text-decoration: none; color: #cd0000;} #content #column1 li {margin-bottom:1em;}

/*** NEWS AND EVENTS (TO BE DEPRECATED)  ***/ 

.news_image {min-height:82px;} .news_image img {float:left;} .news_image h4, .news_image p {padding-left:82px;}

/******* TOP BANNER/FEATURE AREA *********/

#myGallery, #myGallerySet, #flickrGallery { width: 970px; height: 247px; z-index:5;

}

#flickrGallery { width: 500px; height: 334px; }

#myGallery img.thumbnail, #myGallerySet img.thumbnail { display: none; }

.jdGallery { overflow: hidden; position: relative; }

.jdGallery img { border: 0; margin: 0; }

.jdGallery .slideElement { width: 100%; height: 100%; background-color: #000; background-repeat: no-repeat; background-position: center center; background-image: url('img/loading-bar-black.gif'); }

.jdGallery .loadingElement { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #000; background-repeat: no-repeat; background-position: center center; background-image: url('img/loading-bar-black.gif'); }

.jdGallery .slideInfoZone { position: absolute; z-index: 10; width: 100%; margin: 0px; left: 0; bottom: 0; background: #000; color: #fff; text-indent: 0; overflow: hidden; height:20px; line-height:1.5em;

}

* html .jdGallery .slideInfoZone { bottom: -1px; }

.jdGallery .slideInfoZone h2 { padding: 0; font-size: 100%; margin: 0; margin: 2px 5px; font-weight: bold; color: inherit; font-size:1.1em; font-family: sans-serif; line-height: normal; display: none; }

.jdGallery .slideInfoZone p { padding: 3px 0; font-size:1.1em; margin: 5px; color: #eee; }

.jdGallery div.carouselContainer { position: absolute; height: 115px; width: 100%; z-index: 10010; margin: 0px; left: 0; top: 0; }

.jdGallery a.carouselBtn { position: absolute; bottom: 0; right: 30px; height: 20px; /*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/ text-align: center; padding: 0 10px; font-size: 13px; background: #333; color: #fff; cursor: pointer; }

.jdGallery .carousel { position: absolute; width: 100%; margin: 0px; left: 0; top: 0; height: 95px; background: #333; color: #fff; text-indent: 0; overflow: hidden; z-index: 10010;}

.jdExtCarousel { overflow: hidden; position: relative; }

.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper { position: absolute; width: 100%; height: 78px; top: 10px; left: 0; overflow: hidden; }

.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner { position: relative; }

.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail { cursor: pointer; background: #000; background-position: center center; float: left; border: solid 1px #fff; }

.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail { margin-bottom: 10px; }

.jdGallery .carousel .label, .jdExtCarousel .label { font-size: 13px; position: absolute; bottom: 0px; left: 10px; padding: 0; margin: 0; }

.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton { font-size: 10px; position: absolute; bottom: 5px; right: 10px; padding: 1px 2px; margin: 0; background: #222; border: 1px solid #888; cursor: pointer; }

.jdGallery .carousel .label .number, .jdExtCarousel .label .number { color: #b5b5b5; }

.jdGallery a { font-size: 100%; text-decoration: none; color: #fff; }

.jdGallery a.right, .jdGallery a.left { position: absolute; height: 99%; width: 25%; cursor: pointer; z-index:10; filter:alpha(opacity=40); -moz-opacity:0.2; -khtml-opacity: 0.2; opacity: 0.4; }

* html .jdGallery a.right, * html .jdGallery a.left { filter:alpha(opacity=50); }

.jdGallery a.right:hover, .jdGallery a.left:hover { filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; }

.jdGallery a.left { left: 0; top: 0; background: url('img/fleche1.png') no-repeat center left; }

* html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }

.jdGallery a.right { right: 0; top: 0; background: url('img/fleche2.png') no-repeat center right; }

* html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }

.jdGallery a.open { left: 0; top: 0; width: 100%; height: 100%; }

.withArrows a.open { position: absolute; top: 0; left: 25%; height: 99%; width: 50%; cursor: pointer; z-index: 10; background: none; -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; }

.withArrows a.open:hover { background: url('img/open.png') no-repeat center center; }

* html .withArrows a.open:hover { background: url('img/open.gif') no-repeat center center; filter:alpha(opacity=80); }


/* Gallery Sets */

.jdGallery a.gallerySelectorBtn { z-index: 15; position: absolute; top: 0; left: 30px; height: 20px; /*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/ text-align: center; padding: 0 10px; font-size: 13px; background: #333; color: #fff; cursor: pointer; opacity: .4; -moz-opacity: .4; -khtml-opacity: 0.4; filter:alpha(opacity=40); }

.jdGallery .gallerySelector { z-index: 20; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; }

.jdGallery .gallerySelector h2 { margin: 0; padding: 10px 20px 10px 20px; font-size: 20px; line-height: 30px; color: #fff; }

.jdGallery .gallerySelector .gallerySelectorWrapper { overflow: hidden; }

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton { margin-left: 10px; margin-top: 10px; border: 1px solid #888; padding: 5px; height: 40px; color: #fff; cursor: pointer; float: left; }

.jdGallery .gallerySelector .gallerySelectorInner div.hover { background: #333; }

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview { background: #000; background-position: center center; float: left; border: none; width: 40px; height: 40px; margin-right: 5px; }

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3 { margin: 0; padding: 0; font-size: 1.1em; font-weight: normal; }

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info { margin: 0; padding: 0; font-size: 12px; font-weight: normal; color: #aaa; }

*:first-child+html .slideInfoZone
{
    bottom: -1px;
}
*:first-child+html .jdGallery a.right, *:first-child+html .jdGallery a.left
{
    filter:alpha(opacity=20);
}
*:first-child+html .jdGallery a.right:hover, *:first-child+html .jdGallery a.left:hover
{
    filter:alpha(opacity=80);
}
*:first-child+html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }
*:first-child+html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }
*:first-child+html a.open:hover { background: url('img/open.gif') no-repeat center center;
    filter:alpha(opacity=80); }

/****** MARQUEE NEWS **********/

.glidecontentwrapper{ position: relative; /* Do not change this value */ 
width: 265px; height: 400px; margin: 0 auto; /* Set height to be able to contain height of largest content shown*/

overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */


.glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: #ffffff; padding: 5px; visibility: hidden; width: 255px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */

.glidecontent .news_item_link {display: none;}

.glidecontenttoggler{ background-color: #ffffff; /*style for DIV used to contain toggler links. */ width: 270px; margin-top: 6px; text-align: left; /*How to align pagination links: "left", "center", or "right"*/ background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } /* Total contenttoggler width: 350px+5px+5px=360px Or total width of wrapper div (counting wrapper border/padding) */

.glidecontenttoggler a{ /*style for every navigational link within toggler */ background:#5C5C5C; font:bold 11px arial,sans-serif; color:#E1E1E1; text-decoration:none; cursor:pointer; padding:1px 9px 0px 9px; _padding:0 9px; margin-left:3px; border-right:2px solid #303030; border-top:1px solid #888888; border-left:1px solid #888888; border-bottom:1px solid #303030; line-height:25px; }

.glidecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */ background:#900; color:#FFF; border-right:2px solid #640101; border-top:1px solid #D42828; border-left:1px solid #D42828; border-bottom:1px solid #640101; }

.glidecontenttoggler a:hover{ background:#900; text-decoration:none; color:#FFF; border-right:2px solid #640101; border-top:1px solid #D42828; border-left:1px solid #D42828; border-bottom:1px solid #640101; }

.glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */ }

.glidecontenttoggler a.prev, .glidecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */ }

.glidecontenttoggler a.prev:hover, .glidecontenttoggler a.next:hover{ background:#900; text-decoration:none; color:#FFF; border-right:2px solid #640101; border-top:1px solid #D42828; border-left:1px solid #D42828; border-bottom:1px solid #640101; }

/********** MISC HOMEPAGE **********/

.fourcolumns {border-top: 1px dotted #ccc; margin-top: 20px;} .fourcolumns .column  {width:23%;height:98%;float:left;margin:0px 0px 0 0; background: none; padding: 5px 5px 5px 10px;} #academicnewscol, #blognewscol, #gallerynewscol {border-right: 1px dotted #ccc;} #athleticnewscol {width: 24%; float: none;  position: absolute; right: 20px;} #academicnewscol h4 {font-size:1.1667em;}
/* #academicnewscol, #blognewscol, #gallerynewscol, #athleticnewscol {min-width: 175px;} */
.threecolumns .column {width:31%;height:98%;float:left;margin:0px 0px 0 0; background: none; padding: 0px 5px 5px 5px;}
#eventcol {width: 33%;  padding-right: 0px; margin-left: 64%; float: none;}
#column2 {min-width: 275px; }

/******** TAB COLOR ***********/ 

#tab_frontpage.active,#featurearea {background-color: #fdbd0f;}#tab_frontpage.active a {color: #000;}