/**
 * Theme Name - lphie
 * Theme URI - http://www.lambdaphiepsilon.com/
 * Description - Defined styles for use with the lambdaphiepsilon.com/ website
 * Version - 0.1
 * Author - Jonathan Chao
 */
 
/* _reset ------------------------------------------------------------------ */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}body{line-height:1}a{outline:none}table{border-collapse:collapse;border-spacing:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}fieldset,img,abbr,acronym{border:0}
.clear:after{clear:both;content:".";display:block;height:0;line-height:0;visibility: hidden}.clear{display:inline-block}html[xmlns] .clear{display: block}* html .clear{height:1%}
.left{float:left}.right{float:right}.center{text-align:center}.last{margin:0 !important}

/* _base ------------------------------------------------------------------- */

html, body { height: 100%; }
html { font-size: 16px; overflow-x: hidden; overflow-y: scroll; }
body { background: #202020 url('includes/images/bg.png') top center no-repeat; color: #b0b0b0; font-family: Verdana, Geneva, sans-serif; font-size: 62.5%; position: relative; }

/* _typography ------------------------------------------------------------- */

h1, h2, h3, h4, h5, table, #navigation .container > ul > li > a, .image p, form label, .button { color: #fff; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; }

h2 { font-size: 3.8em; margin-bottom: 20px; }
.home h2 { font-size: 2.3em; }
h2 span { color: #808080; }
h3 { font-size: 2.4em; font-weight: 200; margin: 25px 0 10px; }
.home h3 { font-size: 1.5em; font-weight: bold; margin: 0 0 15px; }
h4, #navigation .container > ul > li > a { font-size: 1.4em; margin-bottom: 10px; }

p, a { font-size: 1.3em; line-height: 1.6em; }
h1 a, h2 a, h3 a, h4 a, p a { border-bottom: 1px dotted #6bf; font-size: 1.0em; }
p a:hover { border-color: #fff; color: #fff; }
p { margin-bottom: 20px; }
a { color: #6bf; text-decoration: none; }
strong { color: #fff; font-weight: bold; }

table { color: #b0b0b0; font-size: 1.3em; margin: 0 auto 20px; }
table td { padding: 5px 10px; }
table .first { color: #fff; text-align: center; }

form legend { display: none; }
form label { display: block; float: left; font-size: 1.3em; line-height: 30px; width: 80px; }
form fieldset > div { margin-bottom: 10px; }
input[type=text], input[type=password], textarea { background: #fff; background: -moz-linear-gradient(top, #fff, #bbb 2px, #fff); background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2px, #bbb), to(#fff)); border: 1px solid #2f2f2f; color: #2f2f2f; font-family: Verdana, Geneva, sans-serif; font-size: 1.2em; outline: none; padding: 6px 5px; -moz-box-shadow: 0 0 6px #888; -webkit-box-shadow: 0 0 6px #888; }
input[type=text]:focus, input[type=password]:focus, textarea:focus { -moz-box-shadow: 0 0 8px #fff; -webkit-box-shadow: 0 0 8px #fff; }
input[type=text].error, input[type=password].error, textarea.error { border-color: #b00; -moz-box-shadow: 0 0 6px #f00; -webkit-box-shadow: 0 0 6px #f00; }
input.hidden { background: transparent; border: 0; height: 1px; position: absolute; width: 1px; }

.button { background: #ddd; background: -moz-linear-gradient(top, #fff, #b0b0b0); background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#b0b0b0)); border: 1px solid #bbb;; color: #202020; cursor: pointer; display: inline-block; line-height: 1.5em; padding: 5px 15px; text-shadow: 0 1px 1px #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-user-select: none; -webkit-user-select: none; }
.button:hover { background: #fff; background: -moz-linear-gradient(top, #fff, #ddd); background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#ddd)); color: #202020; }
.button:active { background: #ddd; background: -moz-linear-gradient(top, #ddd, #fff); background: -webkit-gradient(linear, 0 0, 0 100%, from(#ddd), to(#fff)); }
.button.disabled, .button.disabled:hover, .button.disabled:active { background: #ddd; background: -moz-linear-gradient(top, #d0d0d0, #fff); background: -webkit-gradient(linear, 0 0, 0 100%, from(#d0d0d0), to(#fff)); color: #888; cursor: default; }

/* _layout ---------------------------------------------------------------- */

#canvas { min-height: 100%; position: relative; }
#content { padding-bottom: 340px; }
#content, .container { margin: 0 auto; position: relative; width: 960px; }

#navigation { background: #0f0f0f; background: rgba(0, 0, 0, 0.4); border-bottom: 1px solid #000; height: 40px; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
#navigation .container > ul > li { float: left; margin-right: 25px; position: relative; }
#navigation .container > ul.right > li { margin: 0 0 0 25px; }
#navigation .container > ul > li > a { line-height: 40px; margin: 0; }
#navigation .container > ul > li > a:hover { color: #808080; }
#navigation .social a { float: left; margin: 8px 5px 0; }

#navigation .drop { display: none; padding-top: 10px; position: absolute; width: 200px; }
#navigation .drop ul, #navigation .drop form { background: #0f0f0f; background: rgba(0, 0, 0, 0.85); border: 1px solid #000; padding: 10px 15px 5px; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
#navigation .drop a { margin-bottom: 4px; }
#navigation .right .drop { right: 0; width: 260px; }
#navigation .right input[type=text], #navigation .right input[type=password] { border: 0; float: left; padding-right: 0; width: 195px; }

#search div { background: #fff; background: -moz-linear-gradient(top, #fff, #bbb 2px, #fff); background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2px, #bbb), to(#fff)); border: 1px solid #2f2f2f; margin: 0 0 5px; width: 228px; -moz-box-shadow: 0 0 6px #888; -webkit-box-shadow: 0 0 6px #888; }
#search div.focus { -moz-box-shadow: 0 0 12px #fff; -webkit-box-shadow: 0 0 12px #fff; }
#search input[type=text], #search input[type=text]:focus { background: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; }
#search input[type=submit] { background: url('includes/images/search-inactive.png') 6px 6px no-repeat; border: 0; cursor: pointer; height: 28px; text-indent: -10000px; width: 28px; }
#search input[type=submit]:hover { background: #2f2f2f url('includes/images/search-active.png') 6px 6px no-repeat; }
#search input[type=submit]:active { background-position: 6px 7px; }

#header { background: url('includes/images/header.png') center center no-repeat; height: 160px; margin: 10px 0; }

#tabs { min-height: 200px; position: relative; }
#tabs > span { display: block; width: 200px; }
#tabs > ul, #tabs > span { left: 0; position: absolute; }
#tabs > ul.fixed { left: auto; position: fixed; top: 40px; }
#tabs > ul a { font-size: 1.4em; }
#tabs > ul .active { border-color: #6bf; }
#tabs > ul .child { margin-left: 15px; }
#tabs > div, .spotlight .spotlight-detail { background: #0f0f0f; background: rgba(0, 0, 0, 0.2); border: 1px solid #000; margin-left: 220px; padding: 0 25px 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
#tabs > div .list { margin: 20px 0 20px 20px; }
#tabs > div .list p { color: #808080; margin-bottom: 10px; }
#tabs > div p a.right { margin-top: 15px; }

#ad { bottom: 230px; left: 0; position: absolute; text-align: center; width: 100%; }

#footer { background: #0f0f0f; border: 1px solid #000; border-width: 1px 0; bottom: 28px; height: 180px; position: absolute; width: 100%; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
#footer .container > div { float: left; width: 170px; }
#footer .container > .cumulus { width: 200px; }
#footer h4 { margin-top: 15px; }
#footer a { border-color: #202020; color: #404040; font-size: 11px; }
#footer a.active, #footer a:hover { border-color: #6bf; color: #fff; }

#footer #crest, #footer #crest span { background: url('includes/images/crest.png') no-repeat; height: 204px; margin: 0; position: absolute; right: 0; top: -14px; width: 204px; }
#footer #crest span { background-position: 0 -204px; top: 0; }

#copyright { bottom: 0; color: #404040; height: 28px; line-height: 28px; position: absolute; width: 100%; }
#copyright span { color: #808080; }
#copyright a { background: url('includes/images/wp.png') 0 center no-repeat; display: block; float: left; line-height: 28px; text-indent: -10000px; width: 16px; }

#overlay { background: #000; display: none; height: 100%; position: absolute; top: 0; width: 100%; z-index: 10; filter: alpha(opacity=60); opacity: 0.6; }

/* _global ------------------------------------------------------------------ */

.list a, .list p { border-left: 2px solid #404040; display: block; color: #808080; line-height: 1.3em; margin-bottom: 5px; padding-left: 10px; }
.list a span { color: #404040; display: block; font-size: 0.8em; }
.list a.active { color: #fff; }
.list a:hover, .list p:hover { border-color: #6bf; color: #fff; }

.image { border: 1px solid #000; float: right; margin: 5px 0 10px 25px; position: relative; text-align: center; width: 260px; }
.image p { background: #0f0f0f; background: rgba(0, 0, 0, 0.8); bottom: 0; font-size: 1.1em; margin: 0; padding: 5px 0; position: absolute; width: 100%; }
.image img { width: 260px; -moz-border-radius: 10px; }
.image.small, .image.small img { width: 220px; }

/* _home -------------------------------------------------------------------- */

.home #content > div { float: left; width: 560px; }
.home #content > #posts { margin-right: 20px; width: 380px; }
.home .column { float: left; margin-right: 40px; width: 280px; }

.home .dates p { color: #fff; }

.icon { background: url('includes/images/icons.png') no-repeat; display: block; float: left; height: 16px; margin: 6px 5px 6px 8px; width: 16px; }
.icon.message { background-position: -16px 0; }
.icon.search { background-position: -16px -16px; }
.icon.people { background-position: -16px -32px; }
.icon.connections { background-position: -16px -48px; }
.icon.compose { background-position: -16px -64px; }

.home .column .list li:hover .icon.message { background-position: 0 0; }
.home .column .list li:hover .icon.search { background-position: 0 -16px; }
.home .column .list li:hover .icon.people { background-position: 0 -32px; }
.home .column .list li:hover .icon.connections { background-position: 0 -48px; }
.home .column .list li:hover .icon.compose { background-position: 0 -64px; }

.home .column .post .content { padding: 5px 15px; }
.home .column .post .content p { line-height: 1.0em; }
.home .column .post .content p span { color: #606060; display: block; font-size: 0.8em; }

.home .side { width: 180px; }
.side h2 { font-size: 1.8em; margin-bottom: 10px; }
.side a, .side p { color: #bbb; font-size: 1.1em; margin-top: 5px; }
.side span { color: #6f6f6f; }
.side .list { margin-bottom: 20px; }

#slider { background: #0f0f0f; background: rgba(0, 0, 0, 0.2); height: 280px; margin-bottom: 40px; position: relative; width: 560px; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); }
#slider img { display: none; left: 0; position: absolute; top: 0; }
#slider a { display: block; }

.post { margin-bottom: 10px; position: relative; }
.post h3 { margin: 0 0 5px 0; }
.post .date { color: #808080; font-size: 1.2em; position: absolute; text-align: center; text-transform: uppercase; width: 30px; }
.post .date span { display: block; font-weight: bold; }
.post .content { background: #0f0f0f; background: rgba(0, 0, 0, 0.2); border-left: 2px solid #404040; margin-left: 40px; padding: 10px 15px; }
.post:hover .content { border-color: #6bf; }
.post .content p:last-child { margin: 0; }

#spotlight { margin-right: 20px; overflow: hidden; position: relative; width: 360px; }
#spotlight h3 { margin: 5px 0; }
#spotlight p { font-size: 1.1em; line-height: 1.3em; }
#spotlight img { float: left; margin-right: 10px; }
#spotlight .post { cursor: pointer }
#spotlight .date span { display: inline; }
#spotlight .content { margin-left: 0; padding: 5px 10px; }
#spotlight .spotlight-list .content { padding: 10px 30px 10px 10px; }

#spotlight .arrow { color: #404040; position: absolute; font-size: 40px; line-height: 76px; right: 5px; top: 0; }
#spotlight .post:hover .arrow, #spotlight .post.active .arrow { color: #6bf; }

.spotlight-list { width: 360px; }
.spotlight-list .date { background: rgba(0, 0, 0, 0.8); bottom: 10px; color: #fff; font-size: 1.0em; line-height: 1.2em; width: 60px; }
.spotlight-slider { left: 0; position: absolute; -moz-transition: left 0.4s ease-in-out; -webkit-transition: left 0.4s ease-in-out; width: 720px; }
.spotlight-slider.expand { left: -360px; }

#spotlight .post.full { display: none; left: 360px; position: absolute; top: 0; }
#spotlight .post.full p { line-height: 1.5em; margin-bottom: 0; padding-bottom: 5px; }
#spotlight .post.full p.quote { color: #fff; font-family: Georgia, Times, Times New Roman, serif; font-size: 1.2em; font-style: italic; border-left: 2px solid #808080; margin: 10px; line-height: 1.3em; padding: 0 0 0 10px; }
#spotlight .post.full img { display: block; float: none; margin: 10px auto 0; }
#spotlight .post.full .content { margin-left: 30px; }
#spotlight .post.full .arrow { left: 5px; line-height: 1.0em; top: 0; }

#spotlight .pager { background: #0f0f0f; background: rgba(0, 0, 0, 0.2); border-left: 2px solid #404040; color: #bbb; display: block; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 1.3em; font-weight: bold; padding: 10px 0; text-align: center; text-transform: uppercase; }
#spotlight .pager:hover { border-color: #6bf; color: #fff; }

/* _spotlight --------------------------------------------------------------- */

.spotlight #spotlight { margin: 0; width: 100%; }
.spotlight h3 { font-size: 1.5em; font-weight: bold; }
.spotlight h4 { color: #4f4f4f; }
.spotlight .spotlight-list { float: left; margin-right: 20px; }
.spotlight .spotlight-detail { float: left; margin: 0; padding-top: 15px; width: 525px; }
.spotlight .post.detail { display: none; padding-bottom: 5px; }
.spotlight .post.detail .content { background: transparent; border: 0; cursor: default; }
.spotlight .post.detail h3 { font-weight: 200; font-size: 2.4em; }
.spotlight #spotlight .post.detail p { font-size: 1.3em; line-height: 1.6em; }
.spotlight #spotlight .post.detail img { display: block; float: none; margin: 0 auto; }

/* _about ------------------------------------------------------------------- */

#board-of-directors table { margin: 0 0 20px 40px; }
#board-of-directors table td { color: #fff; padding: 5px 20px; }
#board-of-directors table .first { color: #b0b0b0; text-align: left; }

.about .directory { padding-bottom: 10px; }
.about .directory > div { border-left: 2px solid #404040; height: 100px; margin: 20px 0 20px 40px; padding-left: 140px; position: relative; }
.about .directory > div:hover { border-color: #6bf; }
.about .directory img { border: 1px solid #000; height: 100px; left: 10px; position: absolute; top: 0; width: 100px; -moz-box-shadow: 0 0 8px #000; -webkit-box-shadow: 0 0 8px #000; }
.about .directory p { font-size: 1.2em; margin: 0 0 0 25px; }
.about .directory strong { display: block; }

/* _membership -------------------------------------------------------------- */

#recruitment .list li p { margin-left: 15px; }
#recruitment .list li p:first-child { margin-left: 0; }

#tabs > #chapters, #tabs > #chapter-locator { padding-bottom: 20px; }
#chapters table { margin: 0 0 0 60px; width: 560px; }
#chapters table td { padding: 0 10px; }
#chapters table tr td:last-child { width: 20px; }
#chapters table a { font-size: 1.0em; }

#map { border: 1px solid #000; float: right; height: 240px; margin-left: 20px; width: 400px; -moz-box-shadow: 0 0 8px #000; -webkit-box-shadow: 0 0 8px #000; }
#chapter-locator form div p { color: #808080; font-size: 1.1em; margin: 5px 0 0 80px; }

/* _programs ---------------------------------------------------------------- */

#tabs > #scholarship-programs .list { margin-bottom: 60px; }
.list p span { display: inline-block; width: 120px; }

/* _contact ----------------------------------------------------------------- */

.contact h3 span { color: #6bf; font-size: 1.8em; }
.contact #tabs .methods p { margin-left: 60px; }
.contact #tabs .right { width: 360px; }
.contact #tabs .right h3 { margin-top: 0; }
.contact form label { width: 100px; }
.contact form input, .contact form textarea { width: 240px; }
.contact form textarea { height: 120px; }
.contact .button { float: left; margin-right: 10px; }

.contact #tabs > div #status { color: #66bbff; display: none; margin: 0 0 15px 0; }
#loading { background: url('includes/images/loading.gif') 0 center no-repeat; display: none; float: left; height: 32px; width: 24px; }

/* _nextGEN gallery --------------------------------------------------------- */

.media #tabs > ul a { display: inline-block; font-size: 1.2em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 190px; }

.ngg-albumoverview { margin-top: 50px; }
.ngg-album { float: left; margin: 0 30px; min-height: 80px; padding-top: 140px; position: relative; width: 180px; }
.ngg-album img { display: block; opacity: 0.6; position: absolute; -moz-box-shadow: 0 0 6px #000; -moz-transition: all 0.2s; -webkit-box-shadow: 0 0 6px #000; -webkit-transition: all 0.2s; }
.ngg-album:hover img { opacity: 1; -moz-transition: all 0.4s; -webkit-transition: all 0.4s; }
.ngg-albumtitle a { display: block; font-size: 1.3em; }
.ngg-albumtitle p { color: #888; font-size: 1.1em; margin: -2px 0 0; }
.ngg-albumcontent { height: 135px; left: 0; position: absolute; top: 0; width: 100%; }
.ngg-description { background: #0f0f0f; background: rgba(0, 0, 0, 0.6); bottom: 0; padding: 2px 12px; position: absolute; right: 0; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }
.ngg-description p { margin: 0; }

.ngg-gallery-thumbnail-box { float: left; margin: 0 10px 10px 0; }
.ngg-gallery-thumbnail-box img { border: 1px solid #000; display: block; }

#fancybox-content { border-color: #2f2f2f; -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; }
#fancybox-close { right: -12px; top: -12px; }
#fancybox-title { visibility: hidden; }