﻿/*
Site: imagine.nwciowa.edu
Site URI: http://imagine.nwciowa.edu/
Description: CSS file for the layout and design of Northwestern College's Imagine Campaign website.
Author: Daniel Robinson
*/

/*RESET*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {background: transparent;border: 0;margin: 0;padding: 0;vertical-align: baseline;}
body {line-height: 1;}
h1, h2, h3, h4, h5, h6 {clear: both;font-weight: normal;}
ol, ul {list-style: none;}
blockquote {quotes: none;}
blockquote:before, blockquote:after {content: '';content: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
a img {border: none;}

/*LAYOUT*/
html {background:#a80000;height:100%;}
body {background:#f4eee4;margin:0;font-family: arial,helvetica,sans;font-size: 62.5%;}
.site {background:url('images/bg-siteheader.gif') no-repeat center top;}
.right {float:right;}
.left {float:left;}
/*HEADER*/
.header {height:162px;}
.masthead {width:1000px;height:103px;margin:0 auto;background:url('images/bg-masthead.png?v=1') no-repeat left center;}
.branding {width:1000px;display:table;height:103px;}
.branding .wordmark {display:table-cell;width:260px;}
.branding .wordmark a {display:block;width:260px;height:90px;font:normal 48px Georgia, "Times New Roman", Times, serif;color:#fff;text-decoration:none;padding-top:.25em;background:url('images/campaign-wordmark.png') no-repeat left center;text-indent:-999em;}
.branding .wordmark a small {display:block;font-size:16px;font-variant:small-caps;}
.branding .quote {color:#fff;display:table-cell;padding:.5em;font-size:1.75em;width:475px;padding-top:1.25em;vertical-align:top;}
.branding .quote em {color:#ffffee;text-align:right;font-size:.75em;margin:.25em .25em;}
.branding .quote span {font-size:1.5em;font-weight:bold;display:inline-block;}

/*NAVIGATION*/
.navigation {width:1008px;margin:0 auto;height:54px;background:#b10101;}
.navigation ul {list-style:none;margin:0;padding:0;color:#fff;font-family:Arial,sans;font-size:16px;font-weight:bold;width:1010px;overflow:hidden;}
.navigation ul li {display:block;float:left;border-right:1px solid #aa0000;border-left:1px solid #bb0000;}
.navigation ul li a {display:block;color:#fff;text-decoration:none;padding:20px 6px 17px 6px;}
.navigation ul li a:hover {color:#ff9900;}
.navigation ul li ul {display:none;width:200px;background:#a80000;position:absolute;margin-top:54px;margin-left:-2px;opacity:.9;z-index:9999;}
.navigation ul li:hover ul {display:block;}
.navigation ul li ul li {display:block;float:none;padding:8px;border:0px;}
.navigation ul li ul li a {color:#fff;padding:5px;font-size:14px;font-weight:normal;} 
.navigation ul li.first {border-left:0px;padding-right:14px;padding-left:14px;height:53px;overflow:hidden;}
.navigation ul li.last {border-right:0px;padding-right:0px;}
.navigation ul li.active {background: url('images/bg-menu-active.png') no-repeat 50% 0%;}

.pageheader-wrap {background: url('images/bg-content.jpg') repeat-x left bottom;border-bottom:1px solid #ded4c6;}
.pageheader-wrap + .content-wrap {border-top:8px solid #efe6d8;}
/*CONTENT*/
.content-wrap {background: url('images/bg-content.jpg') repeat-x left bottom;border-bottom:1px solid #ded4c6;min-width:1000px;}
.content {font-size:1.3em;width:960px;margin:-1px auto;margin-bottom:.5em;width:960px;color:#363A3D;}
.content-container {}
.content-left {width:709px;float:left;border-right:1px solid #e5dfd6; min-height:600px;}
.content-left .content-container {margin:.5em 1em .5em 0em;}
.content-right {width:250px;float:left;}
.content-right .content-container {margin:.5em 0em .5em .5em;}
.content-right ul {border-top:1px dotted #baaa9b;border-bottom:0px solid #fff;}
.content-right ul li {font-family:arial;display:block;font-size:1.5em;padding:.5em;border-bottom:1px dotted #baaa9b;border-top:0px solid #fff;}
.content-right ul li a {text-decoration:none;}
.content-right ul li ul {margin-top:.5em;border-top:0px;border-bottom:0px;list-style-type:square;}
.content-right ul li ul li {font-size:14px;border-bottom:0px;border-top:0px;margin-left:1em;}
.content-right .givenow {display:block;width:250px;}
.content-right .givenow a {margin:.5em auto;}
/*FOOTER*/
.footer-wrap {background:#a80000;border-top:8px solid #efe6d8;}
.footer-shadow {box-shadow:0px 3px 8px #aaa;height:1px;}
.footer {width:960px;margin:0 auto;padding:1em;color:#fff;}
.footer p {color:#fff;margin:.25em auto;font-size:1em;}
.footer a {color:#ff9900;font-weight:bold;}
.footer address {font-size:.95em;font-style:normal;}
hr {border:1px solid #d2cbc0;background:#fff;height:1px !important;display:block;}

/*TYPOGRAPHY*/
h1 {font-size:4em;color:#a80000;margin:.25em 0 .25em 0;}
h1 em {display:block;font-size:.5em;color:#363A3D;}

h3 {font-family:Arial;font-size:2em;margin-top:1em;border-bottom:1px dotted #baaa9b;padding-bottom:.5em;}
h4 {font-family:Arial;font-size:1.75em;margin-top:1em;}
p {font-family:Arial;font-size:14px;line-height:1.75em;color:#363A3D;margin:1em auto;}
p.intro {font-size:1.3em;}
hr {border:0px;height:1px;background:1px solid #fff;border-top:1px solid #efe6d8;}
a {color:#a80000;}
a:hover {color:#363A3D;}
sup {font-size:.75em;}
.goal {font-family:arial;font-weight:bold;color:#5a6a51;font-size:.9em;margin-top:.25em;}
table {border-collapse:collapse;font-family:arial,sans;font-size:1em;color:#363A3D;}
table td {line-height:1.75em;padding:.5em;}
table thead {background:#f5f1ed url(images/bg-progress.jpg) repeat-x left bottom;border:1px solid #baaa9b;}
table tfoot {background:#f9f6f1;border:1px solid #baaa9b;}
table tr:last-child td {border-bottom:0px;}
table thead th,table tfoot th {text-align:left;padding:.5em;}
.content-left ul {font-family:Arial;font-size:14px;margin-top:0px;list-style-type:square;}
.content-left ul li {line-height:1.75em;margin-left:1.5em;}
.data {width:100%;}
.data th {padding:1em .5em;}
.data td {border-bottom:1px solid #e3ddd2;}
.news td {vertical-align:middle;}
.news .thumbnail {width:75px;height:75px;overflow:hidden;background:#f5f1ed url(images/bg-progress.jpg) repeat-x left bottom;border:1px solid #baaa9b;}
.news .thumbnail div {display:table-cell;vertical-align:middle;width:75px;height:75px;font-size:1.5em;text-align:left;padding:.15em;text-align:left;font-size:1.5em;color:#d8cabd;}
.news .thumbnail div span {color:#baaa9b;letter-spacing:-1px;text-shadow:0px -1px 0px #660000;line-height:1.5em;font-variant:small-caps;color:#a80000;}
.news .thumbnails div {font-weight:bold;width:75px;}
.news td {border-bottom:1px dotted #baaa9b;}
.news a {font-weight:bold;font-size:1.5em;}
.news .date {font-size:.9em;font-weight:bold;display:block;color:#655758;}
.news-photo {float:right;margin:0px 0px 8px 12px;width:200px;}

.news-photo .caption {margin:4px 0px 0px 0px;font-size:.9em;line-height:1.5em;font-style:italic;}
.article {line-height:1.75em;font-size:14px;}
/*PROGRESS BAR*/
.progressbar {background:#fff;display:inline-block;width:150px;border:1px solid #5f7a25;}
.progressbar .progress {display:inline-block;background:#dce6d6 url(images/bg-progress-green2.png) repeat-x left bottom;height:8px;border-right:1px solid #5f7a25;}
.progressbar .raised {display:inline-block;height:30px;font-family:arial;display:table-cell;}
/*CAMPAIGN TRACKER*/

.campaign-tracker .progressbar {width:99%;height:30px;overflow:hidden;display:table;}
.campaign-tracker .progressbar .progress {height:30px;display:inline-block;font-family:Arial;text-align:center;font-weight:bold;color:#5a6a51;font-size:1.35em;text-shadow:0px -1px 0px #fff;padding-top:.5em;}
.campaign-tracker .goal {margin-top:-5px !important;height:30px;}
.campagin-tracker sup {font-size:.25em !important;}
.campaign-sidetracker {}
.campaign-sidetracker .progressbar {width:60px;}

/*CAMPAIGN COMPONENTS*/
.campaign-components {display:table;margin-bottom:2px;}
.campaign-component {border:1px solid transparent;display:table-cell;width:150px;text-align:left;padding:0px 5px;}
.campaign-component h2 {width:125px;font-family: "Goudy Oldstyle";font-weight:normal;color: #363A3D;font-size: 1.5em;margin-top: 0px;margin-bottom: 10px;vertical-align:middle;display:table-cell;}
.campaign-component p {line-height: 1.8em;margin-bottom: 5px;font-family: Arial, Helvetica, sans-seremif;font-size: .9em;color: #898688;}
.campaign-component p.descr {height:150px;}
.campaign-component p a {color:#a80000;font-size:1.2em;}
.campaign-component:hover {cursor:pointer;background:#fff;border:1px solid #d2c1af;border-radius:.5em;}
.campaign-component:hover p {color:#444;}
.campaign-components-sidebar .campaign-component {display:inline-block;}
.campaign-staff table td {vertical-align:middle;}
.campaign-staff h3 em,.campaign-staff h3 i {display:block;font-weight:bold;font-size:.8em;}
.campaign-staff h3 {border-bottom:0px;font-size:18px;font-weight:bold;}
.campaign-staff hr {background:none;border:0px;border-top:1px dotted #baaa9b;}
.campaign-components .goal {line-height:1.5em;}
/*GIVE BUTTON*/
.givenow {display:table-cell;width:200px;}
.givenow a {display:block;text-indent:-999em;width:192px;height:52px;background:url(images/give-now.png) no-repeat;}
.givenow a:hover {display:block;text-indent:-999em;width:192px;height:52px;background:url(images/give-now-on.png) no-repeat;}

/* PHOTOS */
ul.photos {list-style:none;display:block;margin:1em 0em;}
ul.photos li {margin:0;display:inline-block;width:200px;height:115px;border:4px solid #fff;box-shadow:0px 3px 3px #aaa;margin-bottom:4px;}
ul.photos li a {display:block;width:200px;height:115px;background-position:center center;color:#444;text-decoration:none;font-weight:bold;}
ul.photos li a span {display:block;width:200px;height:115px;background:url(images/play.png) no-repeat center center;}
ul.photos li a span label {display:inline-block;padding:2px;font-size:.85em;background:#000;background:rgba(0,0,0,0.75);margin:4px 0px;color:#fff;border-radius:0px 3px 3px 0px;}
ul.photos li strong {displauy:block;margin:6px 0px;}
#cboxTitle {font-size:12px !important;}
/*SLIDER*/
.slider {height:428px;}
.flexslider {width: 100%; margin: 0; padding: 0;list-style:none;}
.flexslider .slides li {display: none;list-style: none;}
.flexslider .slides img {max-width: 100%; display: block;}
.flexslider {position: relative;}
.flexslider ul {list-style:none;margin:0;padding:0;}
.flexslider .slides  li {position: relative;}
.flexslider-container {position: relative;}
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 15px; line-height: 18px;}
.flex-direction-nav li a {background: url(images/bg-nav.png?v=1) no-repeat 0 0;width: 40px; height: 80px; margin: -40px 0 0; display: block; ; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;} /* set negative margin-top equal to half the height on the directional-nav for perfect vertical centering */
.flex-direction-nav li a.next {background-position:-40px 0px;right:0px;}
.flex-direction-nav li a.prev {background-position:0px 0px; left: 0px;}
.flex-control-nav {list-style:none;margin-left: -31px; position: absolute; bottom: -30px; left: 50%;} /* set negative margin-left equal to half the width on the control-nav for perfect centering */
.flex-control-nav li {margin: 0 0 0 5px; float: left;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(images/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

/*UTILITIES*/
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
 * html .clearfix {height: 1%;}
 img.photo {border:8px solid #fff;box-shadow:0px 0px 5px #aaa;margin:1em;float:right;}