.big-screen { display: block ; }
.small-screen { display: none ; }


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

	.container_12 ,
	.container_16 {
		width: 96% ;
	}

	.info-box:hover {
		height: 260px ;			/* increase existing height to accomodate info-box-details */
	}
	.info-box:hover .info-box-details {
		height: 160px ;			/* increase height from 0 to 100 to show details ... */
	}
	
	.jqmWindow {
	    margin-left: -330px;
	    width: 660px;	
	    height: 400px ;
	}
	
}	

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

	.container-header nav .title {
		font-size: 1em ;
	}
	
	.form-layout .div-radio-box, .form-layout .div-check-box {
		margin-left: 0 ;
	}
	
}


@media screen and (max-width: 640px) {
	
	.big-screen {
		display: none ;
	}
	.small-screen {
		display: block ;
	}

	.container_12 ,
	.container_16 {
		width: 94% ;
	}
	
	
	.container_16 .grid_16 ,
	.container_16 .grid_10 ,
	.container_16 .grid_8 , 
	.container_16 .grid_6 ,
	.container_16 .grid_4  {
		width: 100% ;
		margin: 0 auto ;
	}
	
	.container_12 .grid_9,
	.container_12 .grid_6,
	.container_12 .grid_4 ,
	.container_12 .grid_3 {
		width: 100% ;
		margin: 0 auto ;
		}
		
	.container-content {
		margin-top: 0 ;		
	}
	
	#content.grid_6 {
		display: block ;
		float: none ;
		margin-bottom: 2em ;
	}
	
	#related.grid_3 {
		float: none ; 
		display: block ;
	}
	
	.banner-item h1 {
		font-size: 2em ;	
	}
	.banner-item p.text {
		font-size: 1.67em ;
	}
	
	
	.articles-listing {
		border-width: 3px 0 0 0 ;
		padding-top: 1em ;
		margin-top: 0.5em ;
	}
	
	.item-multimedia .grid_3 {
		width: 23% ;
		margin-left: 1% ;
		margin-right: 1% ;
	}.item-multimedia .grid_9 {
		width: 73% ;
		margin-left: 1% ;
		margin-right: 1% ;
	}
	
	.container-articles-listing article {
		border-width: 0 0 3px 0 ;
		margin-bottom: 1em ;
		padding-bottom: 1em ;		
	}
	
	.container-articles-listing .articles-view-more.small-screen a {
		padding-top: 0.5em ;
		padding-bottom: 1em ;
	}
	
	
	.container-social-bar .container-table {
		display: block ;
		padding: 3% 0 ;
	}
	.container-social-bar .container-cell {
		display: block ;
		width: 100% ;
		float: none ;
	}
	
	
	footer .grid_8 ,
	footer .grid_4 {
		padding-bottom: 1em ;
		border-bottom-width: 2px ;
		border-bottom-style: dotted ;
	}
	

	.container-footer {
		padding-top: 2em ;
	}
	
	footer .column-3 {
		padding-top: 1em ;
	}
	
	footer .column-3 header {
		display: none ;
	}
	
	
	.info-box h2 {
		font-size: 1.75em ;
	}
	
	.info-box:hover {
		height: 290px ;			/* increase existing height to accomodate info-box-details */
	}
	.info-box:hover .info-box-details {
		height: 190px ;			/* increase height from 0 to 100 to show details ... */
	}

	.jqmWindow {
	    margin-left: -220px;
	    width: 440px;	
	    height: 360px ;
	}
	
	.container-sponsors {
		border-width: 0 ;
	}
	
	.container-sponsors .item-sponsor { height: 120px; }
	.container-sponsors .count-1  .item-sponsor { width: 48.0% ; }
	.container-sponsors .count-2  .item-sponsor { width: 48.0% ; }
	.container-sponsors .count-3  .item-sponsor { width: 31.3333% ; }
	.container-sponsors .count-4  .item-sponsor { width: 23.0% ; }
	.container-sponsors .count-5  .item-sponsor { width: 31.3333% ; }
	.container-sponsors .count-6  .item-sponsor { width: 31.3333% ; }
	.container-sponsors .count-7  .item-sponsor { width: 23% ; }
	.container-sponsors .count-8  .item-sponsor { width: 23% ; }
	.container-sponsors .count-9  .item-sponsor { width: 31.3333% ; }
	.container-sponsors .count-10 .item-sponsor { width: 23% ; }
	
	
	
	
}

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

	.info-box h2 {
		font-size: 1.65em ;
	}
	
	.info-box:hover {
		height: 300px ;			/* increase existing height to accomodate info-box-details */
	}
	.info-box:hover .info-box-details {
		height: 200px ;			/* increase height from 0 to 100 to show details ... */
	}

	.jqmWindow {
	    margin-left: -200px;
	    width: 400px;	
	    height: 300px ;
	}
	
}


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

	.info-box h2 {
		font-size: 1.45em ;
	}
	
	.info-box:hover {
		height: 350px ;			/* increase existing height to accomodate info-box-details */
	}
	.info-box:hover .info-box-details {
		height: 250px ;			/* increase height from 0 to 100 to show details ... */
	}
	
	.jqmWindow {
	    margin-left: -160px;
	    width: 320px;	
	    height: 200px ;
	}
			
}


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

	.info-box h2 {
		font-size: 1.35em ;
	}

	.jqmWindow {
	    margin-left: -130px;
	    width: 260px;	
	    height: 200px ;  
	}
	
}

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

	.info-box h2 {
		font-size: 1.15em ;
	}

	.info-box:hover {
		height: 380px ;			/* increase existing height to accomodate info-box-details */
	}
	.info-box:hover .info-box-details {
		height: 280px ;			/* increase height from 0 to 100 to show details ... */
	}
	
}

@media screen and (max-width: 300px) {
	.container-social-bar .twitter-follow-button {
		margin-left: 58px ;
	}
}


/*!
 * mobile menu ..
 * orginal source: http://bhoover.com/demo/mobile-menu/#
 * */

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

	/* small screen strap-line */
	.container-mobile-bar .container_12 {
		width: 100% ;
	}
		.container-mobile-bar .container_12 .grid_3 {
			margin-left: 0 ;
			width: 24% ;
		}
		.container-mobile-bar .container_12 .grid_9 {
			width: 73% ;
		}
	
		.container-mobile-bar .grid_9 div {
			text-align: right ;
			margin-right: 2em ;
			padding-top: 0.75em ;
		}
	
	.container-mobile-bar {
        background-color: #212121 ;
        display: block;
        width: 100% ;
        line-height: 28px ;
        top: 0 ;
    }
    
	    .container-mobile-bar a {
	    	color: white ;
	    }
 
    /* Toggle button - "three bars" style */
    .container-mobile-bar .nav-icon {
		display: block ;
        background: #2679af ;
        width: 32px;
        border-width: 9px 16px ;
        border-color: #2679af ;
        border-style: solid ;
    }
	    .container-mobile-bar .nav-icon div {
	    	border-top: 18px double #FFFFFF ;
	    	border-bottom: 6px solid #FFFFFF ;
	        font-size:0;
	        height: 6px ;
	    }

	
    /* The dropdown menu - "floats over the content" */
	.mobile-menu {
 		position: absolute ;
 		top: 48px ;
 		left: 0 ;
 		right: 0 ;
 		z-index: 100 ;

 		padding-bottom: 1em ;
 		
 		background: #277ab0 ;

 		border-bottom: 16px  ;
 		border-radius: 0 8px 8px 8px ;
 		max-width: 480px ;
 	}

		/* the search box */
	.mobile-menu .iframe-search-box {
		width: 100% ;
		border-bottom: 1px solid #FFFFFF ;
	}
		.mobile-menu .iframe-search-box iframe {
			margin: 1em 5% ; 
			width: 90% ;
			max-width: 50em ;
		}
	
	
 	.mobile-menu ul {
 		margin: 0  ;
 		padding: 0 ;
 	}
 
    .mobile-menu ul li {
        list-style: none;
     }
  
    .mobile-menu ul li a {
        display: block;
        padding: .65em 5% ; 
        border-bottom: 1px solid #FFFFFF ;
        color: #FFFFFF ;
        text-decoration: none ;
    }
    
    	.mobile-menu ul li.section-label a {
  			color: #FFFFFF ;
  		}
  		.mobile-menu ul li.section-label li a {
  			color: #FFFFFF ;
  			padding-left: 10% ;
  		} 
  		.mobile-menu ul li.section-label li.category-label a {
  			color: #FFFFFF ;
  			padding-left: 10% ;
  		}
    	.mobile-menu ul li.section-label li.category-label li a {
  			color: #FFFFFF ;
  			padding-left: 15% ;
  		} 
    
    .mobile-menu ul ul {
    	display: none ;		/* hide the sub-navs - toggle later */
    }
 
 	.mobile-menu ul a.menu-item-header:before {
 		content: "\00B1";	/* +/1 sign */
 	}
 
    .mobile-menu  ul a:before {
        content: "\2192";	/* --> sign */
        padding-right:8px;
    }
    .mobile-menu ul li a:hover {
    	color: white !important ;
    	background-color: #135681 !important ;
    }
    
}


@media print {
	
	body > .container_12 ,
	body > .container_16 ,
	.container-header .container_16 ,
	.container-section-bar .container_12 ,
	.container-footer .container_16 {	
		width: 98% ;
		margin-left: 1% ;
		margin-right: 1% ;
		max-width: 100% ;
	}
	
	body , 
	legend , 
	label ,
	.container-header .content-logo .site-name ,
	.container-header .content-logo .site-motto ,
	.sub-menu nav h2 ,
	.lns nav ul li ,
	.lns nav ul li ul li a ,
	.lns nav ul li ul li a.Selected ,
	.container-related-items ,
	.container-related-items h1 ,
	.container-related-items h2 {
		font-family: calibri, arial, sans-serif ;
	}
	body {
		color: black ;
	}
	h1, h2, h3, h4, h5, h6 {
		font-weight: bold ;
	}
	
	.no-print {
		display: none ;
	}

	.container-header .grid_6 {
		width: 98% ;
	}
		.container-header .content-logo .site-name {
			padding-top: 0.25em ;
			padding-bottom: 0 ;
			font-size: 1.75em ;
			line-height: 1.12 ;
		}
		.container-header .content-logo .site-motto {
			font-size: 1.35em ;
			line-height: 1.12 ;
		}
	
	
	.container-section-bar {
		height: auto ;
		background: none ;
		
		/* all border settings need to be set due to a Chrome bug */
		border-color: transparent transparent #DDDDDD transparent ;
		border-style: solid ;
		border-width: 0 0 2px 0 ;

		padding-bottom: 0.5em ;
		margin-bottom: 0.5em ;
	}
		.container-section-bar .section-title {
			font-size: 1.75em ;
			line-height: 1.1 ;
			color: black;
			font-style: italic ;
		}
	
	.container-content {
		margin: 0.75em 0 1em 0  ;
	}
		.container-content .grid_9 {
			width: 98% ;
		}
		.content-holder {
			padding-bottom: 0 ;
		}
			.content-holder content {
				padding-bottom: 0;
			}
		
	
	.container-footer {
		background: transparent ;
		
		/* all border settings need to be set due to a Chrome bug */
		border-color: #DDDDDD transparent transparent transparent ;
		border-style: solid ;
		border-width: 2px 0 0 0 ;
		padding: 0 ;
	}
		.container-footer .grid_8 ,
		.container-footer .grid_4 {
			width: 31.33% ;
		}
	
		.container-footer header {
			margin-bottom: 0 ;
			padding-bottom: 0.5em ;
		}
			.container-footer header * {
				color: #277AAF ;
			}
	
	
}