/* --- Event Listing Styles --- */
    .eventlistcontainer {padding: 15px 10px 25px 10px; border-bottom: solid 1px #e7e7e7; background-color: #fff;}
    .eventlistleft      {float: left; width: 30%;}
        .eventlistimagecontainer {width: 100%; height: 140px; overflow: hidden; position: relative; background-color: #f4f4f4; border-radius: 4px; transition: 0.4s;}
        .eventlistimagetype {position: absolute; top: 0px; left: 0px; width: 50%; text-align: center; color: #666;}
            .eventlistimagetypewebinar {background: transparent url(images/webinar.png) no-repeat center; width: 48px; height: 48px; margin: 0px auto; padding-top: 60px; }
            .eventlistimagetypemeetup {background: transparent url(images/Meetup.png) no-repeat center; width: 48px; height: 48px; margin: 0px auto; padding-top: 60px;}
            .eventlistimagetypeworkshop {background: transparent url(images/workshop.png) no-repeat center; width: 48px; height: 48px; margin: 0px auto; padding-top: 60px;}
            .eventlistimagetypeconference {background: transparent url(images/Conference.png) no-repeat center; width: 48px; height: 48px; margin: 0px auto; padding-top: 60px;}
        .eventlistimagedate {position: absolute; top: 0px; left: 50%; width: 50%; text-align: center;}
            .eventlistimagedateDAY {line-height: 30px; color: #fff;}
            .eventlistimagedateDAYNUM {font-size: 60px; line-height: 70px; margin-bottom: 10px; color: #fff;}
            .eventlistimagedateMONTHYEAR {line-height: 30px; font-size:12px; border-top: solid 1px #e7e7e7; color: #fff;}
            .eventlistimagedateMONTHYEAR span {color: #fff;}
    .eventlistright     {float: left; padding-left: 5%; width: 55%; word-break: break-all;}
        .eventlistright div {color: #666; padding-top: 4px;}
        .eventlistright div span {color: #0081c5;}
    .eventlistmore      {float: left; width: 10%; background: transparent url(images/Arrowhead.png) no-repeat center; margin: 0px auto; background-size: contain; height: 48px; opacity: 0.1; transition: 0.4s;}
     
    /* Hover effects */
        .eventlistcontainer:hover .eventlistmore {opacity: 0.5;}
        .eventlistcontainer:hover .eventlistimagecontainer {background-color: #e7e7e7;}   

/* --- Event View Styles --- */
    .eventviewmainimage             {position:relative; background-size: cover; background-position: center; width: 100%; height: 48px; background-color: #fff;}
        .eventviewimagetypewebinar {background: transparent url(images/webinar.png) no-repeat center; width: 60px; height: 48px; }
        .eventviewimagetypemeetup {background: transparent url(images/Meetup.png) no-repeat center; width: 60px; height: 48px;}
        .eventviewimagetypeworkshop {background: transparent url(images/workshop.png) no-repeat center; width: 60px; height: 48px;}
        .eventviewimagetypeconference {background: transparent url(images/Conference.png) no-repeat center; width: 60px; height: 48px;}
        .eventviewmainimage h2 {padding: 10px 0px 10px 60px;}
    .eventviewbackbutton            {position: absolute; bottom: 13px; right: 10px; background-color: #0081c5;}
        .eventviewbackbutton a      {padding: 6px 8px; line-height: 1.8em; text-transform: uppercase; color: #fff !important;}
    .eventviewbox                   {padding: 10px; background-color: #fff; border: solid 1px #e7e7e7;}
    .eventviewbox h4                {font-weight: bold; font-size: 130%;}
    .eventviewdetails               {}
        .eventviewdetails h1        {padding: 20px 0px;}
        .eventviewdetailsleft       {float: left; width: 30%; }
        .eventviewdetailsright      {float: left; width: 65%; padding-left: 5%; font-size: 13px;}
    .ViewEventTable                 {width: 100%; padding: 15px 0px 25px 0px;}
        .ViewEventTableLeft         {float:left; width: 25%; line-height: 3em; padding-left: 5%; background-color: #f4f4f4; border-top: solid 1px #e7e7e7; color: #666; font-weight: bold;}
        .ViewEventTableRight        {float:left; width: 65%; line-height: 2em; padding: 5px 0px 5px 5%;  border-top: solid 1px #e7e7e7; word-break: break-all;}

/* --- Event Featured Styles --- */
    /* Header */
        .listingheaderdiv {width: 100%;}
    /* Item */
        .eventlistingcontainer      {padding: 1%; margin: 1%; width: 29%; float: left;}
        .eventlistingtype           {float: right; text-transform: uppercase; font-size: 70%; color: #fff; padding: 2px 8px;}
        .eventlistingbox            {box-shadow: 0px 0px 4px rgba(0,0,0,0.5); background-color: #fff;}
            .eventlistingbox h2     {font-size: 120%; border-bottom: solid 1px #ccc !important; height: 48px; padding: 4% 4% 0px 4%; overflow: hidden;}
            .eventlistingbox h3     {font-size: 100%; color: #999 !important; padding: 0px 4%;}
        .eventlistingimage          {position: relative; width: 100%; overflow: hidden;}
            .eventlistingimage img  {height: 150px; width: auto;}
        .eventlistingmorebutton     {position: absolute; bottom: 10px; right: 10px; background-color: #0081c5;}
            .eventlistingmorebutton a {color: #fff !important; padding: 6px 8px; line-height: 1.8em; text-transform: uppercase;}
        .eventlistingboxfooter      {padding: 4%; color: #999; font-size: 90%; height: 3em;}
        .eventlistingboxfooterdate  {float: left; width: 70%;}
        .eventlistingboxfootertime  {float: right; width: 30%; text-align: right;}


/* === Responsive Styles === */
        
    /* === More than 768px width and less than 980px (pads) */
        @media only screen and (min-width : 750px) and (max-width : 1069px) {

            .eventlistleft                  {width: 100%; float: none;}
            .eventlistright                 {width: 100%; float: none; padding: 20px 0px;}
            .eventlistmore                  {float: none; opacity: 1;}
        
            
        }
        
    /* === Less than 768px(mobile devices) */
        @media only screen and (max-width : 749px) {
        
            .eventlistingcontainer          {float: none; width: 96%;}
            
            .eventlistleft                  {width: 100%; float: none;}
            .eventlistright                 {width: 100%; float: none; padding: 20px 0px;}
            .eventlistmore                  {float: none; opacity: 1;}
        
            .eventviewdetailsleft           {float: none; width: 100%;}
            .eventviewdetailsright          {float: none; width: 100%; padding: 20px 0px; }
        
        }



/* --- Lightbox --- */
    #lightbox               { position: absolute; top: 40px; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
    #lightbox a img         { border: none; }
    #outerImageContainer    { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
    #imageContainer         { padding: 10px; }
    #loading                { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
	#loading #loadingLink   { width: 32px; height: 32px; background: url(images/lightbox/loading.gif) no-repeat; }
    #hoverNav               { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
    #imageContainer > #hoverNav { left: 0; }
    #hoverNav a             { outline: none; }
    #prevLink, #nextLink    { width: 49%; height: 100%; background: transparent url(images/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(images/lightbox/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(images/lightbox/nextlabel.gif) right 15% no-repeat; }
    #imageDataContainer     { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; }
    #imageData              { padding:0 10px; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
    #imageData #caption{ font-weight: bold;	}
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
    #imageData #bottomNavClose{ width: 66px; height: 22px; float: right;  padding-bottom: 0.7em; background: url(images/lightbox/closelabel.gif) no-repeat;	}			
	#overlay                { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; }