/*
 * NB: no support for < IE8
 *
 * NB: mobile menu at bottom of file ...
 */

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

body {
	min-width: 320px ;
}	
	
.container-full-screen {
	max-width: 1280px ;
	
	margin-left: auto ;
	margin-right: auto ;
}
	

/* 
 * site containers + big / small screen switchers
 */

@media screen and (max-width: 1024px) {
	
	.container-full-screen > .container_12 {
		width: 96% ;
		margin: 0 2% ;
		
		width: 92%;
		margin-left: 4%;
		margin-right: 4%;
		
	}

	
}

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

	.container-full-screen > .container_12 {
		width: 98% ;
		margin: 0 1% ;
		
		width: 92%;
		margin-left: 4%;
		margin-right: 4%;
		
	}

	/* switch from big-screen to small-screen */	
	.big-screen 	{ display: none ; }
	.small-screen 	{ display: block ; }	
}




/* 
 * content styles ...
 */

@media screen and (max-width: 1024px) {
	
	.container-banners .text .title {
		font-size: 1.1em ;
	}
	.container-banners .text p {
		font-size: 1em ;
	}
	
	.container-header nav ul li a {
		padding-left: 0.5em ;
		padding-right: 0.5em ;
	}
}


@media screen and (max-width: 900px) {
		
	.container-banners .image {
		width: 60% ;
	}
	.container-banners .text {
		width: 40% ;
	}
}
	
@media screen and (max-width: 800px) {
		
	/* switched from big screen to small screen */	
		
		
	.container-banners .image ,
	.container-banners .text  {
		width: 100% ;
		display: block ;
	}
	.container-banners .text {
		padding-bottom: 3em ; 	/* space for slides' dots */
	}
	.container-banners .text p {
		margin: 0 ;
	}
	.container-banners .text a {
		padding: 0.5em ;
	}		
	
		

	.container-info-boxes .grid_3 ,
	.container-activities .grid_3 {
		width: 48% ;
	}
	.container-activities .grid_6 {
		width: 98% ;
	}
	
	.container-info-boxes .info-box-1 ,
	.container-info-boxes .info-box-2 {
		margin-bottom: 1em ;
	}
		
	.container-info-boxes h2 {
		min-height: 1.25em ;
	}
	
	.container-info-boxes p {
		min-height: 5em ;
	}

	.activity-box-1 .heading ,
	.activity-box-2 .heading {
		font-size: 1.25em ;
	}
	
	
	
	.container-content .grid_9 {
		width: 98% ;
	}
	
	.container-directory .index > div {
		width: 6.64% ;
		margin-bottom: 1em ;
	}
	.container-directory .index div.number {
		width: 6.64% ;
	}	
	
	.container-my-imda-home	.grid_3 {
		width: 31% ;
	}
	
	.container-working-group-profile header div.grid_7 ,
	.container-working-group-profile header div.grid_5 {
		width: 98% ;
	}
	
	.grid_3.g3to6 {
		width: 48% ;
	}
	
	.container-lp-info-boxes .grid_4 {
		width: 48% ;
	}
	
	.meeting-panels .grid_4 {
		width: 48% ;
	}
	
}	


@media screen and (max-width: 720px) {
		
	.container-info-boxes h2 {
		min-height: 2.65em ;
	}
	
	.container-info-boxes p {
		min-height: 5em ;
	}
}


@media screen and (max-width: 600px) {
	
	.container-banners .image ,
	.container-banners .text {
		width: 100% ;
		display: block ;
	}
	.container-banners .text a {
		padding: 1em ;
		position: relative ;
		min-height: 14em;
		padding-bottom: 2em ;
	}
	.container-banners .text .title {
		font-size: 1.4em ;
	}
	.container-banners .text p {
		font-size: 1.21em ;
		margin: 1em 0 0 0 ;
	}
	
	
	.container-info-boxes p {
		min-height: 6em ;
	}
	
	
	.profile-box .grid_2 {
		width: 31.333% ;
	}	
	.profile-box .grid_10 {
		width: 64.666% ;
	}	
	
	
	.container-footer {
		border-width: 1px 0 0 0 ;
		margin-top: 1em ;
		padding-top: 1em ;
	}
	
	.container-footer .grid_1 {
		width: 28% ;
		text-align: center ;
	}
	.container-footer .grid_7 {
		width: 68% ;
	}
	
	.container-footer .grid_2 {
		width: 98% ;
		margin-top: 1em ;
		padding-top: 1em ;
		border-width: 1px 0 0 0 ;
		text-align: center ;
	}
		.container-footer .site-links ul li {
			display: inline-block ;
			margin: 0 0.5em ;
		}
		
		.container-footer .sites-associated a {
			display: inline ;
			float: left ;
			width: 48% ;
			margin: 0 1% 0 1% ;
		}
	
	

	.container-directory  .grid_4.item-directory {
		width: 48% ;
	}
	
	
	.meeting-panels .grid_4 {
		width: 98% ;
	}
	
	
	.container-share-page {
		margin-top: 2em ;
	}
	
}



@media screen and (max-width: 480px) {
	
	.container-banners .text a {
		padding: 1em ;
		position: relative ;
		min-height: 14em;
		padding-bottom: 2em ;
	}
	.container-banners .text .title {
		font-size: 1.4em ;
	}
	.container-banners .text p {
		font-size: 1.21em ;
		margin: 1em 0 0 0 ;
	}
	
	.container-info-boxes .grid_3 ,
	.container-activities .grid_3 ,
	.container-activities .grid_6 {
		width: 98% ;
	}

	
	.container-info-boxes h2 {
		min-height: 1em ;
		margin: 0.75em 5% 0 5% ;
	}
	.container-info-boxes p {
		min-height: 2em ;
	}
	.container-info-boxes .link-btn {
		margin: 0.5em 5% 5% 5% ;
	}
	
	
	.form-layout .grid_6 {
		width: 98% ;
	}
	.form-layout .form-required {
		text-align: left ;
	}

	

	.container-directory .index > div {
		width: 13.78% ;
		margin-bottom: 1em ;
	}
	.container-directory .index div.number {
		width: 13.78% ;
	}	
	
	
	.container-directory  .grid_4.item-directory {
		width: 98% ;
	}
	
	.container-lp-info-boxes .grid_4 {
		width: 98% ;
	}
	
	.container-my-imda-home	.grid_3 {
		width: 48% ;
	}	
	
}

@media screen and (max-width: 360px) {
	.container-content .grid_6 {
		width: 98% ;
		margin-bottom: 2% ;
	}
}

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

	
	.container-banners .text .title {
		font-size: 1.25em ;
	}
	.container-banners .text p {
		font-size: 1em ;
		margin: 0.5em ;
	}

	.container-my-imda-home	.grid_3 {
		width: 98% ;
	}	
	
	.content-holder header h1 {
		font-size: 1.85em ;
		font-weight: bold ;
	}
	
}