/* Some useful global styles. */

.center { text-align: center; }
#content li { margin-top: 0.5em; margin-bottom: 0.5em; }

a { word-wrap: break-word; }
#content a.formanchor { visibility: hidden; }


/* Special styles for data-tables. */

#content .datatable { width: 100%; text-align: center; font-size: 90%;
                      border-collapse: collapse; border-spacing: 0;
                      border-left: 1px solid #999999; border-top: 1px solid #999999; }
#content .datatable td,
#content .datatable th { padding: 5px; border-right: 1px solid #999999; border-bottom: 1px solid #999999; }
#content .datatable th { font-weight: bold; background-color: #eeeeee; vertical-align: bottom; }


/* Special-case styles attaching icons to file-types, etc. */

#content a[href $='.pdf'], .newstext a[href $='.pdf']
{ padding-right: 30px; background-image: url(/assets/chan/icons/filetypes/pdf.png); background-position: center right;
                       background-size: 25px 25px; background-repeat: no-repeat; }

#content a[href $='.doc'], #content a[href $='.docx']
{ padding-right: 30px; background-image: url(/assets/chan/icons/filetypes/word.png); background-position: center right;
                       background-size: 25px 25px; background-repeat: no-repeat; }

#content a[href $='.xls'], #content a[href $='.xlsx']
{ padding-right: 30px; background-image: url(/assets/chan/icons/filetypes/excel.png); background-position: center right;
                       background-size: 25px 25px; background-repeat: no-repeat; }

#content a[href $='.ppt'], #content a[href $='.pptx']
{ padding-right: 30px; background-image: url(/assets/chan/icons/filetypes/powerpoint.png); background-position: center right;
                       background-size: 25px 25px; background-repeat: no-repeat; }

#content a[href ^='mailto:']
{ padding-left: 23px; background-image: url(/assets/chan/icons/mail.png); background-position: center left;
                      background-size: 18px 18px; background-repeat: no-repeat; }

#content #social-media a[href ^='mailto:']
{ padding-left: 0; background-image: none; }

#content span.phone
{ padding-left: 24px; background-image: url(/assets/chan/icons/phone.png); background-position: center left;
                      background-size: 20px 20px; background-repeat: no-repeat; }


/* Pagination styles. */

.paginationcontrols { display: none; }


/* Blog-specific styles. */

#content .blogpost { margin-top: 2em; margin-bottom: 3em; }
#content .blogtitle { font-size: 160%; font-weight: bold; color: black; margin-top: 0; margin-bottom: 0; }
#content .blogsubtitle { font-size: 110%; font-weight: bold; color: #666666; margin-top: 0.25em; margin-bottom: 0; }
#content .blogdate { font-size: 110%; font-weight: bold; color: #666666; margin-top: 0.25em; margin-bottom: 0; }


/* Styles for content images/photos. */

#content .contentimage.fullwidth { width: 100%; }
#content .contentimage.fullwidth img, #content img.fullwidth { width: 100%; height: auto; }

#content .contentimage.centered { text-align: center; }
#content .contentimage.centered img { height: auto; max-width: 100%; }

#content .contentimage.floatright, #content .contentimage.floatleft { width: 100%; }
#content .contentimage.floatright40 { float: right; text-align: right; margin: 0 6px 10px 10px; width: 40%; }
#content .contentimage.floatright30 { float: right; text-align: right; margin: 0 6px 10px 10px; width: 30%; }
#content .contentimage.floatright25 { float: right; text-align: right; margin: 0 6px 10px 10px; width: 25%; }
#content .contentimage.floatleft40 { float: left; text-align: left; margin: 0 10px 10px 6px; width: 40%; }
#content .contentimage.floatleft30 { float: left; text-align: left; margin: 0 10px 10px 6px; width: 30%; }
#content .contentimage.floatleft25 { float: left; text-align: left; margin: 0 10px 10px 6px; width: 25%; }

@media (min-width: 768px) { #content .contentimage.floatright { float: right; text-align: right; margin: 0 6px 20px 20px; width: 50%; }
                            #content .contentimage.floatleft { float: left; text-align: left; margin: 0 20px 20px 6px; width: 50%; }
                            #content .contentimage.floatright40, #content .contentimage.floatright30, #content .contentimage.floatright25 { margin: 0 6px 20px 20px; }
                            #content .contentimage.floatleft40, #content .contentimage.floatleft30, #content .contentimage.floatleft25 { margin: 0 20px 20px 6px; } }
#content .contentimage img { max-width: 100%; height: auto; }
#content .contentimage.shadow img { box-shadow: 0 3px 6px #999999; -webkit-box-shadow: 0 3px 6px #999999; -moz-box-shadow: 0 3px 6px #999999; }

#content .contentimage a { border: 0; padding: 0; margin: 0; color: white; background-color: white; }
#content .contentimage a img:hover { opacity: 0.75; filter: alpha(opacity=75); }
#content .contentimage p { margin: 0; padding: 0; border: 0; }
#content .contentimage p.caption { padding-bottom: 0.5em; border-bottom: 1px solid #cccccc; margin-bottom: 3em;
                                   font-weight: bold; font-size: 100%; line-height: 120%; }

#content img.shadow { box-shadow: 0 3px 6px #999999; -webkit-box-shadow: 0 3px 6px #999999; -moz-box-shadow: 0 3px 6px #999999; }


/* Styles for YouTube, Google Maps and other embed containers. */

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.map-container { position: relative; padding-bottom: 100%; padding-top: 30px; height: 0; overflow: hidden; }
.map-container iframe, .map-container object, .map-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* Styles for next links. */

#content .nextlinks { display: none; }