body                                { background: url('images/bg-body.jpg') repeat; color: #1c191a; font: 14px/1.2em "proxima-nova", sans-serif; }

.wrap                               { width: 976px; margin: 0 auto; }
.head                               { background-color: transparent; }

#logo                               { height: 76px; width: 269px; margin-top: 30px; display: block; background: url(images/bg-centreforpublicinvolvement.png) no-repeat; text-indent: -9999em; }
header                              { margin-top: 0; position: relative; }
header nav                          { position: absolute; top: 33px; right: 0; }
header #main-nav                    { background: url('images/bg-mainnav.png') repeat-x; overflow: hidden; }
header #main-nav li                 { float: left; list-style-type: none; position: relative; width: 110px; }
header #main-nav li a               { text-align: center; padding: 12px 0px; display: block; text-decoration: none; font: 16px/1.2em proxima-nova, sans-serif; color: #b8a6b7; }
header #main-nav li a:hover         { color: #fff; }
header #main-nav li.current a       { background: url('images/bg-nav-active.png') repeat-x; color: #fff; }

header #main-nav li #nav-child a, 
header #main-nav li.current #nav-child a {
  font-size: 14px;
  background: #521A4F;
}

header #main-nav li #nav-child ul li:hover {
  background-color: #612A60;
}


header #main-nav #nav-rollover-container {
  position: inherit;
}

header #main-nav #nav-rollover-container ul li {
  background-color: #521A4F;
  display: none;
  float: none;
  width: 100%;
  z-index: 100;
}
 
header #search {
  width: 300px;
  position: absolute;
  top: -20px;
  right: 0px;
} 


#feature                            { background-color: #f9f9f9; position: relative; }
#feature #headline-container        { position:relative; }
#feature #headlines                 { padding: 16px 16px 0 100px; width: 304px; position: absolute; bottom: 120px;
left: -70px; z-index:100;}
#feature #headlines h1              { margin-bottom: 16px; font: 30px/1.1em proxima-nova, Helvetica, sans-serif; color:#fff; }
#feature #headlines .more           { color: #a980a4; font-size: 14px; text-transform: uppercase; text-decoration: none; }
#feature #headlines .item h1        { margin-bottom: 0; }
#feature #headlines .item           { border:0; }
#feature #pager                     { position:absolute; top:100px; left:30px; z-index:100; }
#feature #pager a                   { float:left; display:block; height:16px; width:15px; background:url('images/bg-pager.png') no-repeat top ; padding-right:6px; text-indent:-999em; overflow:hidden; } 
#feature #pager a.activeSlide       { background-position:bottom; }

#slidenav                           { width:553px; position:absolute; top:292px; left:0; } 
#slidenav span                      { height: 100px; width: 28px; overflow:hidden; text-indent:-999em; cursor:pointer; }
#slidenav #next                     { float:right; background: url('images/arrow-right-white.png') no-repeat center center; display: block; position:relative; z-index:100; }
#slidenav #prev                     { float:left; background: url('images/arrow-left-white.png') no-repeat center center; display: block; position:relative; z-index:100; } 

#slidelist                          { height:424px !important; width:976px !important; margin:0; position:relative; }
#slide                              { height:424px !important; position: relative; width:976px;}
#slide img                          { } 
#slide #feature-tab                 { margin-top: 1px; background: none; width: 553px; position: absolute; left: 0; bottom: 16px; border:0; }
#slide #feature-tab .date           { position: absolute; top: 26px; left: 32px; z-index: 100;  }
#slide #feature-tab h1              { margin: 10px 41px 10px 31px; padding: 22px 15px 22px 27px; background-color: rgba(104, 53, 107, 0.5); border-radius: 15px; }

#slide #feature-tab h1 a            { padding-right: 30px; font: 25px/1.1em proxima-nova-alt-condensed, sans-serif; opacity:0.94; color: #fff; }
#slide #feature-tab h1 a:after      { content:none; }
#slide #feature-tab.hover           { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }


#introduction                       { padding: 64px 54px; background: #470842 url('images/bg-pattern.jpg') no-repeat; }
#introduction p                     { width:428px; margin: 0 0 0 32px; padding: 0 0 0 48px ; color: #fff; font: 17px/1.4em proxima-nova, Helvetica, sans-serif; border-left : 1px solid #986293; float: right; }
#introduction .affiliate            { padding: 0; margin-right:16px; float: left; display: block;  font-size: 1em; padding-top: 40px; text-indent: -2000px; overflow: hidden; }
#introduction #edmonton             { height: 48px; width: 160px; background: url('images/logo-edmonton_02.png') no-repeat center center; }
#introduction #uofa                 { height: 48px; width: 160px; background: url('images/logo_universityofalberta_facultyofextension.png') no-repeat center center; }
#introduction h2 {
  font-weight: normal;
  color: #fff;
  font-size: 24px;
}
#introduction .partners {
  width: 353px;
  float: left;
}

#introduction a, #introduction a:hover, #introduction a:active {
  color: #fff;
}

#main                               { width: auto; padding: 46px 46px 0 0; float: none; position: relative; background-color: #f9f9f9; }

#content                            { background: url('images/tile-nav-secondary.png') repeat;}
#content #side                      { float: left; width: 240px; min-height: 500px; }

#flyer #slide-tabs                  { position: absolute; top: 46px; left: 45px; }
#flyer #slide-tabs li               { margin-bottom: -13px; padding-bottom: 12px; height: 59px; width: 197px; background: url('images/bg-flyer-nav.jpg') no-repeat; position: relative; z-index: 1;  }
#flyer #slide-tabs li.active        { background: url('images/bg-flyer-nav-over.jpg') no-repeat; position: relative; z-index: 10; }
#flyer #slide-tabs li a             { color: #c6c6c6; padding: 17px; display: block; text-decoration: none; font: 24px/1.2em proxima-nova-alt-condensed, sans-serif; }
#flyer #slide-tabs li.active a      { color: #1c191a; } 
#flyer #slide-tabs li a:hover       { color: #1c191a; }

#slide-holder                       { float: right; min-height:354px; width: 686px; display: block; overflow: hidden; position: relative; }

#flyer .slide                       { display: none; position: absolute; top: 0; left: 0; width: 686px; }
#flyer .slide.active                { display: block; }
#flyer .slide h1                    { float:left; max-width:160px; padding: 14px 0 14px 14px; font: 28px/1em proxima-nova-alt-condensed, sans-serif; text-transform: uppercase; }
#flyer .slide p                     { float:left; max-width:260px; padding: 14px 14px 14px 20px; font: 18px/1.4em proxima-nova, Helvetica, sans-serif; line-height:1.1em; }
#flyer .slide a                     { padding: 6px 32px 6px 0; color: #A5C5DF; text-decoration: none; background: url('images/bg_more_blue.png') no-repeat right center; font: 18px/1.4em proxima-nova, Helvetica, sans-serif; float:left;}
#flyer .slide ul                    { height: 100%; width: 191px; margin-left: 0; position: absolute; top: 0; right: 0; background-color: #a5c5df; }

#flyer .slide ul a                  { padding: 12px 30px 12px 12px; width:inherit; float: none; display: block; border-bottom: 1px solid #b7d1e5; text-decoration: none; background: url('images/bg-slide-nav.png') no-repeat 172px 16px; color: #fff; }
#flyer .slide ul a:hover            { background-color: #9fbdd6; }

#sub                                { padding: 0 528px 0 0; background-color: #F9F9F9; position: relative;  }
#sub h1                             { margin-bottom: 16px; color: #45003d; font:700 30px/1em proxima-nova, Helvetica, sans-serif; }
#sub p                              { color: #7A4474; font: 14px/1.3em proxima-nova, Helvetica, sans-serif; }

#sub #affiliations                  { padding: 24px 0 24px 54px; float: right; background: url('images/bg-divide.jpg') no-repeat left center; position: absolute; top: 0; right: 0; }
#sub #affiliations a                { margin-right: 14px; }

#side                               { position: relative; z-index: 100;padding-bottom: 30px; }
#side #subnav                       { margin-bottom: 24px; }
#side #subnav li                    { width: 240px; margin-bottom: -17px; padding-bottom: 17px; position:relative; }
#side #subnav li a                  { background: url('images/bg-subnav.png') no-repeat bottom; background-position: 0 53px; padding: 18px 33px 18px 30px; display: block; text-decoration: none; color: #343434; font: 15px/1.2em proxima-nova, sans-serif; }
#side #subnav li a:hover            { background: rgba(0, 0, 0, 0.2); }
#side #subnav li.current a:hover    { color:#343434; }
#side #subnav li span               { position:absolute; top:18px; right:24px; font: 16px/1.2em proxima-nova-alt-condensed, sans-serif; }
#side #subnav li ul li a        { padding: 18px 15px 18px 40px; }
#side #action a                     { padding: 18px 14px 14px 14px; height: 29px; margin-left: 11px; width: 187px; display:block; background: url('images/bg-action.png') no-repeat; text-decoration: none; color: #fff; font: 21px/1.2em proxima-nova-alt-condensed, sans-serif; opacity:0.94; }
#side #action a:hover               { color: #eaeaea; }
#side .affiliation                  { padding-left: 33px; }
#side h3                            { font: 24px/1.2em proxima-nova, sans-serif; padding: 32px 0 12px 0; }

.item                               { width: 100%; margin-bottom: 18px; color:#fff; position: relative; background-color: #fff; border: 1px solid #d5d5d5; }
.item h1                            { min-height:33px; padding:12px 48px 12px 12px; font: 700 18px/0.98em proxima-nova, Helvetica, sans-serif !important; position: relative; }
.item h1 a                          { text-decoration: none; }
.item h1 a:hover                    { text-decoration:none !important; }
.item h1 a:after                    { content: url('images/bg-tab-arrow.png') no-repeat 276px center; position:absolute; top:17px; right:11px; }
.item h1 .subhead                   { margin-top: 6px; /*color: #1c191a;*/ display: block; font-weight: 400; text-transform: uppercase; font-size: 12px; line-height:1em; }
.item h1 .label                     { margin-top: 3px; color: #45003D; display: block; font: 16px/1.2em proxima-nova-alt-condensed, sans-serif; }
.item h1:after                      { position: absolute; bottom: -11px; left: 0;   }
.item img                           { margin: 0 0 15px 0; }
.item p                             { margin-bottom: 0px !important; color: #7a4474; font: 14px/1.3em proxima-nova, sans-serif; position: relative; }
.item .date                         { width: 73px; font: 10px/0.9em proxima-nova, Helvetica, sans-serif; float: left; text-align: center; text-transform: uppercase; letter-spacing: -0.5px; position: absolute; top: 14px; left: 0; z-index:20; }
.item .date em                      { display: block; font: 700 26px/1em proxima-nova, Helvetica, sans-serif; letter-spacing: 1px; color:#fff !important; }
.item.hover                         { -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2); }
#content #item-list                 { overflow:hidden; }
#content .item                      { float: left; margin: 0 25px 32px 0; }

.block-date {
  width: 10%;
  height: 105px;
  float: left;
  padding: 2em 2%;
  text-align: center;
  background-color: #5B004E;
  font: 10px/0.9em proxima-nova, Helvetica, sans-serif;
  text-transform: uppercase;letter-spacing: -0.5px;
}

.block-date em {
  font: 700 26px/1em proxima-nova, Helvetica, sans-serif;
  letter-spacing: 1px;
}

.block-date em {
  display: block;
}

.block-image {
  float: left;
  width: 20%;
}

.block-image img {
  width: 100%;
  padding: 2em 0 0 4%;
}

.block-content {
  float: left;
  width: 62%;
  padding-left: 2%;
}

footer                              { margin-bottom: 32px !important; background: url('images/bg-footer.png') no-repeat 0 59px, url('images/tile-footer.png') repeat-y;opacity:0.8;  }
footer a                            { text-decoration: none; color: #fff; font: 16px/1.2em proxima-nova, sans-serif; opacity:0.8; }
footer a:hover                      { opacity:1; }
footer #contact                     { padding: 18px 0 18px 26px; color: #fff; background: url('images/bg-pattern.jpg') no-repeat; }
footer #contact a                   { padding-right: 40px; color: #fff; text-decoration: none; }
footer #contact h4,
footer #meta h4                     { display: inline; font: 400 24px/1.2em proxima-nova, sans-serif; padding-right: 8px; vertical-align:-4px; }
footer #contact h4 span             { padding-left: 8px; font-weight: 700; }
footer #contact .social             { padding-right: 2px; margin-top:2px;display: inline-block; text-indent: -999em; vertical-align: 7px; }
footer #contact #yt                 { height: 35px; width: 69px; background: url('images/bg-youtube.png') no-repeat; }
footer #contact #tw                 { height: 35px; width: 41px; background: url('images/bg-twitter.png') no-repeat; }
footer #contact #fb                 { height: 35px; width: 26px; background: url('images/bg-facebook.png') no-repeat; }
footer #contact #rss                { height: 35px; width: 40px; background: url('images/rss-feed.png') no-repeat; }

footer #container                   { float:left; width:660px; }
footer #container h4                { display:inline; }

footer form                         { width:230px; display:inline-block; margin-right:24px; }
footer .field                       { background:#93658e; background:rgba(255,255,255,0.3); padding:10px; }
footer .field .text                 { background:transparent; color:#fff !important;  border:0; padding-right:12px; width:183px; }
footer .field .text::-webkit-input-placeholder { color:#fff; }
footer .submit                      { display: inline-block; height:16px; border:0; background: rgba(255,255,255,0.5); padding:10px;margin-right: 207px; }


footer .foot-col                    { margin-left: 24px; margin-bottom:16px; width: 307px; float: left; }
footer .foot-col a                  { display: block; padding: 4px 4px 4px 36px; }
footer #container h4                { font-size:24px; padding:0 12px 0 25px; color:#b1d4f0; }
footer #container h4 span           { color:#fff; }
footer .foot-col h3                 { height: 64px; width: 308px; margin-bottom: 8px; margin-top:24px; color: #fff; background: url('images/bg-tab-blue.png') no-repeat; }
footer .foot-col h3 a               { padding:17px 24px; font: 600 24px/1.2em proxima-nova, sans-serif; }
footer #foot-nav                    { float:right; width: 234px;}
footer #foot-nav a                  { padding: 12px 12px 20px 12px; display: block; background: url('images/bg-footer-nav-line.png') no-repeat center bottom; opacity:0.8; }
footer #foot-nav a:hover            { opacity:1; }

footer #meta {
  height: 78px;
  background: #333;
  padding-top: 10px;
}

footer #meta #meta-partners {
  float: left;
  padding-right: 20px;
  border-right: 1px solid white;
  padding-top: 6px;
  padding-bottom: 2px;
}

footer #meta #meta-partners h4 {
  color: white;
  padding-right: 20px;
  padding-left: 25px;
  vertical-align: 17px;
}

footer #meta #meta-partners img {
  padding-right: 10px;
}

footer #meta #address {
  margin-right: 30px;
  width: 35%;
  float: right;
  text-align: right;
}

footer #meta #address {
  color: white;
  padding-left: 10px;
}

.copyright                          { text-align:right; color:#a8a9aa; }

#head-bar                           { padding: 24px; width: 688px; background: url('images/bg-header-bar.jpg'); float: right; color: #fff; font: 36px/1.2em proxima-nova-alt-condensed, sans-serif; border-bottom: 1px solid #9DB8CF; position:relative; }
#head-bar.with_date                 { width:584px; padding-left:128px; }
#head-bar .date                     { width: 73px; padding:10px 14px; font: 14px/0.9em proxima-nova, Helvetica, sans-serif; text-align: center; text-transform: uppercase; letter-spacing: -0.5px; position: absolute; top: 0; left: 0; background-color:#231f20; }
#head-bar .date em                  { display: block; font: 700 48px/1em proxima-nova, Helvetica, sans-serif; letter-spacing: 1px; }

#main #inner-feature                { margin:-47px -46px 32px 0; float: right; }
#main #caption                      { margin: 0 0 32px 32px; padding-top: 16px; width: 128px; float: right; font: 14px/1.4em proxima-nova, sans-serif; color: #7a4474; background: url('images/bg-arrow.png') no-repeat top left; }

#content #main                      { margin-left: -1px; width: 645px;min-height: 529px; padding-left: 45px; float: left; font: 16px/1.5em "proxima-nova", sans-serif; position: relative; z-index: 10;  } 
#content #main h2                   { margin-bottom: 8px; font: 600 30px/1.1em proxima-nova, sans-serif; color: #45003d; }
#content #main h3                   { margin-bottom: 8px; font: 400 24px/1.1em proxima-nova, sans-serif; color: #45003d; }
#content #main h4                   { margin-bottom: 8px; font: 400 18px/1.1em proxima-nova, sans-serif; text-transform:uppercase; }
#content #main h5                   { margin-bottom: 8px; font: 700 14px/1.1em proxima-nova, sans-serif; text-transform:uppercase; color: #7A4474; }
#content #main h6                   { margin-bottom: 8px; font: 700 14px/1.1em proxima-nova, sans-serif; color: #7A4474; }
#content #main p                    { margin-bottom: 32px; }
#content #main p img                { max-width:625px; }
#content #main em                   { /*color: #7A4474;*/ font-style:italic; }
#content #main .article-img         { float:left; padding:0 24px 24px 0; }
#content #main a                    { text-decoration:none; color:#a06c9b; }
#content #main a:hover              { border-bottom: 1px dashed #a06c9b; }
#content #main li                   { list-style-type:square !important; color: #7A4474; padding-bottom:8px; }
#content #main ul, #content #main ol { margin-bottom:32px; }

#content #main .highlight{
  margin:24px 0 32px;
  padding:24px 24px 34px;
  background:#A5C5DF;
}

#content #main .highlight p {
  padding:0;
  margin:0 !important;
  font-weight:300;
  font-size:16px;
  color:white;
}


#content #main .highlight strong {
  font-weight:600;
  font-size:22px;
  margin:8px;
  line-height:20px;
  display:block;
}

#content #main .highlight.first img{
  float:left;
  margin:0 20px 12px 0;
}

#content #main .highlight.second img{
  float:right;
  margin:0 0 12px 20px;
}

#content #main .highlight a{
  color:#627585;
}

#content #main .highlight a:hover{
  color:#627585;
}

#content #main img.left{
  float:left;
  margin: 24px 24px 12px 0;
}

#content #main img.right{
  float:right;
  margin: 24px 0 12px 24px;

}

#content #main table{
  width: 100%;
  background: #fff;
  font: 14px/1.4em Helvetica, sans-serif;
  font-size: 18px;
  text-align: center;
  margin: 12px 0 32px;
}

#content #main th {
  padding: 8px;
  background: #905a8b;
  color: #fff;
  font-size: 14px;
}

#content #main td {
  padding: 8px;
  text-align: center;
  font-weight: 400;
  color: #524F4B;
  font-size: 14px;
  line-height: 18px;
}

#footer-container {
  padding: 30px;
  color: #ccc;
  font-size: 16px;
  font-family: "proxima-nova", sans-serif;
}

#footer-container h4 {
  font-size: 24px;
  color: #fff;
  font-weight: normal;
}

#footer-container p {
  margin: 0 0 15px 0;
}

.item-content {
  padding: 20px;
}

#home-event {
  background: #e8e9e9;
  color: #683261;
  font-family: "proxima-nova", sans-serif;
}

#home-event a {
  color: #fff;
  text-decoration: none;
  font-weight: normal;
}

#home-event h2 {
  color: #fff;
  font-size: 24px;
  margin: 0 0 5px 0;
  font-family: "proxima-nova-alt-condensed", sans-serif;
}

#home-event .subhead { 
  font-size: 14px;
  line-height: 1.4;
}

#home-event .date {
  font-style: italic;
  margin: 0 0 10px 0;
}

.home-contact-info {
  text-align: right;
  font-size: 0.8em;
}

.home-event-content {
  width: 100%;
  padding: 20px 10% 20px 10%;
}

.home-event-content a {
  margin-right: 10px;
}

.home-event-button {
  margin: 25px 0 0 0;
  float: left;
}

#home-event .home-event-button a {
  display: inline-block;
  padding: 15px 60px 15px 20px;
  background: #fff url('images/arrow-blue.png') no-repeat right center;
  background-position: 120px 10px;
  font-size: 16px;
  font-family: "proxima-nova-alt-condensed", sans-serif;
  color: #942089;
}

#home-event .home-event-button a:hover {
  background: #a876a4 url('images/arrow-blue.png') no-repeat right center;
  background-position: 120px 10px;
  color: #fff;
}

#home-event .home-image-link {
  display: inline-block;
  width: 175px;
  height: 185px;
  margin-right: 15px;
  background-position:center;
  background-repeat:no-repeat;
}

#home-event #home-link-research {
  background-image: url('images/research.png');
}

#home-event #home-link-projects {
  background-image: url('images/projects.png');
}

#home-event #home-link-partnerships {
  background-image: url('images/partnerships.png');
}

#home-event #home-link-theory {
  background-image: url('images/theory-practice.png');
}

.video-embed {
  width: 50%;
  float: left;
  background: #bfb0bd url('images/ecpi-event-bg.jpg');
  padding: 49px 20px 67px;
}

.video-embed iframe {
  border-right: 1px solid white;
  padding-right: 50px;
}

.twitter-feed {
  background: #bfb0bd url('images/ecpi-event-bg.jpg');
  padding: 50px 24px 15px 33px;
  width: 40%;
  float: left;
  height: 294px;
}

#tweet ul {
  margin: 0;
}

.tweet {
line-height: 1.4;
margin: 15px 0;
}


/* Custom project template styling */

.work-item {
  display: block;
  height: 255px;
}

.work-image {
  width: 30%;
  height: 100%;
  float: left;
  display: block;
}

.work-image img {
  width: 100%;
}

.work-content {
  width: 95%;
  position: relative;
  left: 5%;
}

#content #main .work-content a {
  color: #414042;
}