/* CSS used for static PHP pages */
/* This should override the other stylesheets except for print.css */

/* Table of Contents
Generic Classes
Template Styles
Right Sidebar (not CSR sidebar)
International
JourneyForth
Wallpaper Pages
Technology Section
Inscriptions
Testing
*/

/*---------------------------------------------------------------------------------------------------------------------------------*/
/* Generic Classes */
		
/* Thumbnails on resources pages */
.sf {display: inline-block;
     margin: 0;
     padding: 0 0 15px;}
/* hack to make IE behave */
* + html .sf {display: inline;}

.sf li {display: inline-block;
        vertical-align: top;
        margin: .7em;
        padding: 0 2px 15px;
        width: 100px;
        height: 160px;
        background-image: none;
        list-style-type: none;
        list-style-image: none;
        font-size: .8em;
        line-height: 1.25em;
        text-align: center;}

/* Lists on the resource pages */					  
.resource-heading {padding: 0;
					margin: 0 0 10px;
					}

.resource-list-left {
	float:left;
	margin-right: 45px;
	padding: 5px;
}

.resource-list-right {
	float:left;
	margin-left: 40px;
	padding: 5px;
	}
	
.resource-list li {padding: 5px 0px 0px 0px;
						list-style-type: none;
						list-style-image: none;}
						
.resource-list img, .icon img {vertical-align: middle;}

.resource-cover {box-shadow: 1px 1px 6px #bbb;
                 margin-right: 10px;}
				 
@media screen and (max-width: 50em)
{
	.resource-list-right{
		margin-left: 0px;
	}
	
}

@media screen and (max-width: 33em)
{
.subject td {display: block; text-align: center;}
.subject img {margin-bottom: 1em;}
.subject .resource-list {text-align: left;}
}

/* Styling for list with checkboxes - eNews signup */
.checklist {margin: 15px 30px;}
.checklist li {list-style-image: none; list-style-type: none; margin: 8px 0;}
.checklist input {margin-left: -1.8em; vertical-align: -2px;}

/* Footnotes */
.foot {font-size: .85em;}

.csbyline {
	font-weight: normal;
	font-style: italic;
	color: #fff;
	background: #49ACF2;
	padding: .5em;
	border-radius: 1em;
}

.spaced {padding-bottom: 1em;}

.breadcrumb {font-size: 10px;}

.clearboth {clear: both;}

.clearleft {clear: left;}

.smallcaps {font-variant: small-caps; font-weight: bold;}

/* Hides from IE-mac \*/
* html .clearboth {height: 1%;}
/* End hide from IE-mac */


/* Responsive images/banners */
.responsive-image {max-width: 100%;}

.article-image {float: right; margin: 0 0 .5em 1em;}

@media screen and (max-width: 32em)
{
.article-image {float: none; display: block; padding: 0; margin: 0 auto;}
}

.sort th {background: #dddde6;}

.sort th:hover {background: #ccd;}

.sort th a {text-decoration: none;
                display: block;
                padding: .5em;
                white-space: nowrap;}

.sort th a:hover {text-decoration: underline;}

/* When floated elements like images need to be centered on small screens */
@media screen and (max-width: 30em)
{
.floatnone {float: none !important; display: block; margin: auto;}
}
/* For images greater than 300px that need to be centered on small screens */
@media screen and (max-width: 40em)
{
.floatnone-wide {float: none !important; display: block; margin: auto; max-width: 100%;}
}


/* End Generic Classes */
/*---------------------------------------------------------------------------------------------------------------------------------*/
/* Template Styles */

#wrapper {padding-top: 15px;}

/* End Template Styles */
/*---------------------------------------------------------------------------------------------------------------------------------*/
/* Right Sidebar */

.navbar {box-sizing: border-box;
         width: 100%;
         margin: 0;
         padding: .5em .3em;
         font-size: .8em;
         color: #0082c8;
	     background: #fff;
         border: 3px solid #49acf2;
         box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 4px #aab;
         border-radius: 6px;} 


.navbar h4 {margin: 1em 0 0 0;}

.navbar ul {margin: 0;
            padding: 0;}

.navbar > ul {margin: 0 0 1em 0;}

.navbar ul ul {margin: .2em 0 1.1em 0;}

.navbar li {padding: 0 .3em;}

.navbar .columns > ul {display:inline-block;
               width: 50%;
               min-width: 6.9em;
               margin: 0;
               padding: 0;
               vertical-align: top;}

.columns li {padding: 0;}



/* End Right Sidebar */
/*---------------------------------------------------------------------------------------------------------------------------------*/
/* International */

.hero-image
 {margin: calc(-1em - 15px) -1em 0 -1em;
  display: block;
  max-width: calc(100% + 2em);}

.hero-image img
  {display: block;
   max-width: 100%;}

.hero-image-heading
  {position: absolute;
   top: 0;
   left: 0;
   right: 0;
   text-align: center;
   font-size: 2em;
   border: none;
   color: #5f6062;
   background: rgb(255,255,255);
   background: rgba(255,255,255, 0.7);
   padding: .5;
   margin: 0 auto;}


.bordered-light
 {border-top: 1px dotted #d3d3d3;
  border-bottom: 1px dotted #d3d3d3;
  margin: .8em auto;
  padding: .8em;}

.center-display {
	max-width: 950px;
	margin: 0 auto;
	text-align: center;
}

.color-blocks {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
    justify-content: center;
}

.color-blocks.two-across > div,
.color-blocks.two-across > a,
.color-blocks.two-across > a:visited {
	-ms-flex: 1 1 calc(50% - 1em);
	flex: 1 1 calc(50% - 1em);
	width: calc(50% - 1em);
    max-width: 30em;
}

.color-blocks > div,
.color-blocks > a,
.color-blocks > a:visited {
	-ms-flex: 1 1 calc(25% - 1em);
	flex: 1 1 calc(25% - 1em);
	min-width: 20em;
	margin: 1em .5em;
	padding: 0;
	width: calc(25% - 1em);
	vertical-align: top;
	text-align: center;
	text-decoration: none;
}

.color-blocks > :nth-child(4n+1) {
	border: 2px solid #b6cfde; background: #d4e7f0; outline-color: #d4e7f0;
}

.color-blocks > :nth-child(4n+2) {
	border: 2px solid #afdbca; background: #d4ebe1; outline-color: #d4ebe1;
}
.color-blocks ul,
.color-block-single ul
  {text-align: left;}

.color-block-single
  {border: 2px solid #afdbca; background: #d4ebe1; outline-color: #d4ebe1;
   display: block;
   margin: 1em auto;
   max-width: 30em;}

.customer-service {
		margin: 1em auto;
		width: 80%;
		background: #efeff4;
		box-shadow: 2px 2px 5px #CBCBDC;
		clear: both;
		border-radius: 5px 5px 5px 5px;
		padding: 35px;
		}

/* End International */
/*---------------------------------------------------------------------------------------------------------------------------------*/
/* JourneyForth */

/* Main page */

.jf-banner {position: relative;}

.jf-logo {position: absolute;
          top: 30.3%;
          left: 3.4%;
          width: 21.9%;
          height: auto;}

.jf-hero {display: block;}

.jf-hero.sm-hero {display: none;}

.jf-hero {width: 100%;}

.jf-hero-text {display: none;
               position: absolute;
               top: 15%;
               right: 1%;
               width: 38%;
               color: #e9e1df;
               font-weight: bold;
               font-style: italic;
               font-size: 1.2em;
               text-shadow: 1px 1px 3px #110000;}

.jf-info h2, .jf-featured h2, .jf-digital h2, .jf-more h2 {background: #ccc;
                                                           padding: .5em;}

.jf-info h2 {margin: 0;}

.jf-info a {float: left;
            background: #eee;
            text-decoration: none;
            margin: .3em 0;}

#jfyouth {width: 32.83%;}
#jfadult {width: 33.33%; margin-left: .5%; margin-right: .5%;}
#jfacademic {width: 32.83%;}

.jf-info a:hover, .jf-info a:active {background: #ddd;}


.jf-info ul {text-align: center;
             padding: 0;}

.jf-info li {font-size: 1em;
           font-weight: bold;
           margin: .2em 0;
           padding: 0;
           color: #666;
           list-style-image: none;
           list-style-type: none;}

.jf-info img {width: 100%;
              max-width: 200px;}

.jf-featured {clear: both;
           padding: 0 2px;}

.jf-featured ul {margin: 0;
              padding: 0;}

.jf-featured li {display: inline-block;
              list-style-image: none;
              list-style-type: none;
              width: 23%;
              min-width: 200px;
              height: 320px;
              margin: 0 1% 10px 1%;
              padding: 0;
              text-align: center;
			  vertical-align: top}

.jf-featured img {box-shadow: 1px 1px 6px #bbb;
               margin-bottom: 7px;}

.bookname, .author {display: block;
                    font-size: .9em;
                    font-weight: bold;}

.bookname a {font-weight: bold;}

.jf-digital a {box-sizing: border-box;
               width: 23%;
               margin: 0 1% 0 1%;}
@media screen and (max-width: 500px){
.jf-digital .button {font-size: .8em;}
}
.jf-digital.jf-digital a {margin-top: 0;}

.jf-more > div {display: inline-block;

                width: 33.33%;
                vertical-align: top;
                text-align: center;}

.jf-more li {list-style-image: none;
             list-style-type: none;
             font-weight: bold;
             color: #555;
             padding: .2em 0;}

.jf-more a {text-decoration: none;
            font-weight: bold;}

.jf-more a:hover {text-decoration: underline;}

.jf-more h3 {color: #555;
             margin: 0;}

/* About page */
.with-sidebar {display: inline-block;
               box-sizing : border-box;
               vertical-align: top;
               color: #555;}

.jf-about {width: 64%;
           margin-right: 2%;
           font-size: 1em;}

.jf-about p {font-size: inherit;
                 color: inherit;}

.jf-cat {clear: both;}

.jf-cat h2 {font-size: 1em;
            font-weight: bold;
            padding-bottom: 0;
            margin-bottom: .2em;}

.jf-cat a {font-weight: inherit;}

.jf-cat.right {text-align: right;}

.jf-cat.left img {float: left; margin-right: 10px;}
.jf-cat.right img {float: right; margin-left: 10px;}

.jf-cat p {margin-top: 0;}

.jf-sidebar {width: 32%;
             min-width: 250px;
             max-width: 400px;
             background: #eee;
             margin: 1em 0 1em 1%;
             padding: 0 2% 2em 2%;}

.jf-sidebar h2 {text-align:center;
                background: #ccc;
                margin: 0 -7% 1em -7%;}

.timeline-image {clear:right;
				 float:right;
				 margin:5px 10px 5px 5px;}

/* Resources page */
.jf-resource {float: left;
              width: 40%;
              max-width: 420px;
              min-width: 300px;
              margin: 0 20px 20px 20px;}

@media screen and (max-width: 900px)
{
.jf-info div, .jf-info ul {width: 96%;}
.jf-info h2, .jf-info li {font-size: .9em;}
.jf-featured li {width: 31%;}
}

@media screen and (max-width: 820px)
{
.jf-hero-text {display: block;}
.jf-hero.lg-hero {display: none;}
.jf-hero.sm-hero {display: block;}
.jf-about {width: 98%;}
.jf-sidebar {display: block; width: 90%; margin: 2em auto;}
.jf-sidebar h2 {margin: 0 -4% 1em -4%;}

}

@media screen and (max-width: 700px)
{
.jf-featured li {width: 48%;}
.jf-more > div {width: 100%;}

.jf-resource {float: none; width: 90%; max-width: none;}
}

@media screen and (max-width: 600px)
{

#jfyouth, #jfadult, #jfacademic {width: 100%; margin: 1em 0 0 0;}
#jfacademic {margin-bottom: 1em;}

.jf-info div, .jf-info ul {display: inline-block;}

.jf-info div {width: 53.5%;}
.jf-info ul {width: 41%;
             margin-top: 10%;}

.jf-info h2 {font-size: 1.1em;}

.jf-info li {font-size: 1.05em;}

.jf-info img {width: 100%;
              max-width: 200px;}
}

@media screen and (max-width: 480px)
{
.jf-hero-text .subtitle {display: none;}
}

/* End JourneyForth */
/*---------------------------------------------------------------------------------------------------------------------------------*/
/* Wallpaper Pages */

.wallpapers {float: left; margin: 8px; text-align: center;}

.wallpapers ul {display: inline-block; margin: 0; padding: 0; zoom:1; *display:inline;}

.wallpapers ul li {list-style-type: none;list-style-image: none; margin: 0; padding: 0 3px;}

.wallpapers .thumbnail, #inscriptions_content .wallpapers img {box-shadow: 1px 1px 7px #002278; float:left;}

.hidebox {float:left; margin-left: 7px;}

/* Styles for Wallpaper main page - HJP 6/20/12 */
.wall {
                  display: inline-block;
                  overflow: auto;
				  margin: 10px 0;
                  padding: 0;}

.wall li {
                     float: left;
					 margin: 0;
                     padding: 5px;
                     background-image: none;
				     list-style-type: none;
				     list-style-image: none;}

.wall img {box-shadow: 1px 1px 7px #002278;}

/* Lightbox Styles */

#overlay {position: fixed;
             width: 100%;
             height: 100%;
             top: 0;
             left: 0;
             z-index: 110;
             background-color: black;
             opacity: 0.85;
             display: none;}

.showbox {position: absolute;
             z-index: 115;
             top: 3em;
             left: 50%;}

.wallpapers .showbox ul {margin: 0 auto;
                          padding: 10px 0;}

.wallpapers .showbox ul li {list-style-image: none;
                             list-style-type: none;
                             display: inline-block;
                             margin: 2px 0;
                             padding: 0;}

.wallpapers .showbox ul li a {color: #fff;
                               text-decoration: none;
                               font-size: 12px;
                               font-weight: bold;
                               padding: 3px;}

.wallpapers .showbox ul li a:hover {background: #0082c8;
                                     background-color: rgba(0, 100,170, .7);}

.imageview {position: relative;
            margin: 0 auto;
            padding: 0;
            background: #111;}

.imageview .view {background: url("/images/wallpaper/loading.gif") no-repeat center;}

.showbox .close {position: absolute;
                        z-index: 120;
                        top:0;
                        right: 0;}

/* End Wallpaper Pages */
/*---------------------------------------------------------------------------------------------------------------------------------*/
/* Technology Section Availability Chart */

.tech-chart {border-collapse: collapse; line-height: 1em; margin: 20px 0 0 0; width: 100%;}

.tech-chart th, .tech-chart td {border: 1px solid #555;
								text-align: center;
								height: 30px;}

.tech-chart th {background: #1a7faa;
                background: linear-gradient(to bottom, #2ea5e6, #095f79);
                color: #fff;}

.tech-chart #course {background: #ccc;}

.tech-chart sup {font-size: large;font-weight: bold;}

.tech-chart sup a {text-decoration: none; color: #2ea5e6;}

#tech-note a {float: right;}

/* End Technology Section */
/*---------------------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------------------------------------------*/
/* Testing - CMC 12/12/14 */

.announcement {background: #889;
               background: linear-gradient(to bottom, #dddde6, #ccd);
               border-top: 2px solid #889;
               border-bottom: 2px solid #889;
               font-size: 1.2em;
               font-weight: bold;
               padding:.5em;
               margin-top: 3em;
               color: #556;
               text-align:left;}

.boxHeader {
	padding: 2px 0px 0px 2px;
}

.bio-pic {float:left;
            width: 20%;
            height: auto;
            margin: 2% 2% 0 2%;
            border-radius:6px;
            box-shadow:1px 1px 5px #777;}

.bio {padding:.9em .2em .5em .2em;
		
}

.bio-quote {font-style:italic;
			clear:both;
			margin: .3em 0 .7em .3em;
			padding: .9em .2em .7em .2em;
}

.bio-alt {
		background: #F7F7F9;
}

@media screen and (max-width: 500px){
.bio-pic {width: 75%;
          clear: both;
          margin-bottom: .7em; }

.bio {clear:both;}

.bio-quote {padding: .1em;}
}

/* End of Testing */
/*---------------------------------------------------------------------------------------------------------------------------------*/