.infohub{ position: relative; overflow: hidden; }

@media (min-width: 1px) {
	
	.infohub-group1-m{ display: none; }/**Marcus: Only visible on Nettbook view**/
	.infohub-whatshappening-m{ display: none; }
	
	/**
		Marcus: List that wraps around all the info blocks
		Including the Year and Month Selection
	**/
	.infohub-list-m { position: relative; overflow: hidden; }
	
	/**Marcus: Year and Month Drop Down Selection**/
	.infohub-date-m{ position: relative; }
		/**Year Drop Down Selection**/
		.infohub-year-m{ position: relative; height: 37px; background-color: #222222; }
			.infohub-back-m{ position: absolute; top: 7px; left: 11px; background-color: #51c290; }
			.infohub-back-m:hover{ background-color: #5fe5aa; }
			.infohub-back-image-m{ position: absolute; top: 7px; left: 7px; }
			.infohub-back-a-m{ position: relative; display: block;  padding-top: 3px; padding-bottom: 4px; padding-left: 22px; padding-right: 12px; 
			text-decoration: none; font-size: 12px; font-weight: bolder; color: #143828; letter-spacing: 1.5;
			}
			/**Text Display for YEAR**/
			.infohub-year-year-m{ display: none; }
			/**Display current YEAR selected**/
			.infohub-year-current-m{ position: relative; overflow: hidden; width: 100px;  cursor: pointer; 
			margin-left: auto; margin-right: auto; padding-top: 10px; padding-left: 15px; 
			text-align: center; color: #5ce3a8; font-weight: bolder;  }
	
			.infohub-year-current-image-m.inactive{ display: inline; }
			.infohub-year-current-image-m.active{ display: none; }
			
			.infohub-year-current-m.active .infohub-year-current-image-m.inactive{ display: none; }
			.infohub-year-current-m.active .infohub-year-current-image-m.active{ display: inline; }
		
			.infohub-year-list-m{ position: absolute; top: 37px; left: 0px; height: 0px; width: 100%; overflow: hidden; z-index: 1000; background-color: #222222; }
			.infohub-year-list-m.active{ height: auto; }
			.infohub-year-option-m{ position: relative; border-bottom: 1px solid #3d3d3d; padding: /*10*/7px 0px; margin-left: 10px; margin-right: 10px; }
			.infohub-year-option-m:last-child{ margin-bottom: 20px; }
			.infohub-year-option-a-m{ position: relative; display: block; text-decoration: none; color: #5fe4a9; text-align: center; font-size: /*16*/15px; }
		/**Month Drop Down Selection**/	
		.infohub-month-m{ position: relative; height: 37px; background-color: #5fe4a9; display: none; }
			.infohub-month-wrapper-m{ position: relative; width: 208px; height: auto; margin: 0 auto; padding-top: 7px; }
			.infohub-month-text-m{ 
				position: relative; overflow: hidden; background-color: #133527; width: 60px; float: left; 
				color: #adafac; font-weight: bolder; font-size: 14px;
				padding-left: 8px; padding-top: 4px; padding-bottom: 4px; }
			.infohub-month-current-m{ 
				position: relative; overflow: hidden; background-color: #133527; float: left; cursor: pointer;
				color: #5ce3a8; font-weight: bolder; width: /*96*/140px; font-size: 14px; text-align: center; 
				/*padding-left: 8px;*/ padding-top: 4px; padding-bottom: 4px; }
			.infohub-month-current-image-m{ position: absolute; top: 6px; right: 7px; }
			.infohub-month-current-m .infohub-month-current-image-m.active{ display: none; }
			.infohub-month-current-m .infohub-month-current-image-m.inactive{ display: inline; }
			.infohub-month-current-m.active .infohub-month-current-image-m.active{ display: inline; }
			.infohub-month-current-m.active .infohub-month-current-image-m.inactive{ display: none; }
			.infohub-month-list-m{ position: absolute; overflow: hidden; width: /*104*/140px; height: 0px; top: 30px; left: /*104*/68px; z-index: 2000; }
			.infohub-month-list-m.active{ height: auto; }
			.infohub-month-option-m{ position: relative; overflow: hidden; background-color: #133527; text-align: center; padding: /*10*/5px 0px; }
			.infohub-month-option-m:first-child{ padding-top: 18px; }
			.infohub-month-option-m:last-child{ padding-bottom: 18px; }
			.infohub-month-option-a-m{ 
				position: relative; overflow: hidden; display: block; 
				text-decoration: none; color: #5ce3a8; /*font-weight: bolder;*/ font-size: /*14*/13px;
				/*padding-left: 8px;*/  }
	
	.infohub-date-m.bottom .infohub-year-current-image-m.inactive{ display: none; }
	.infohub-date-m.bottom .infohub-year-current-image-m.active{ display: inline; }
	.infohub-date-m.bottom .infohub-year-list-m{ top: auto; bottom: 100%; }
			
	/**InfoHub Contents Start Here**/		
	.infohub-group-m{ position: relative; overflow: hidden; /*height: 580px;*/ }
	
	.infohub-dialogbox-m{ position: relative; background-image: url(../../images/osren/infohub/light_green_background.png); /*overflow: hidden; *//*height: 240px;*/ width: 100%; }
	.infohub-dialogbox-wrapper-m{ position: relative; overflow: hidden; padding-top: 20px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; }
	
	.infohub-imagebox-m{ position: relative; overflow: hidden; width: 100%; /*height: 340px; */ }
	.infohub-image-m{ position: relative; overflow: hidden; display: block; width: 100%; }/*On mobile view port, image should always scale with width*/
	.infohub-image-n, .infohub-image-d{ display: none;  }
	
	.infohub-dialogbox-triangle-m{ position: absolute; overflow: hidden; height: 42px; width: 42px; background-image: url(../../images/osren/infohub/light_green_triangle.png); top: -41px;  right: 20px; }
	/*BLOG february 24, 2015*/
	.infohub-dialogbox-header-m{ position: relative; overflow: hidden; margin-bottom: 6px; }
	.infohub-dialogbox-type-m{ position: relative; overflow: hidden; background-color: #328660; font-size: 13px; color: #05130d; font-weight: bolder; padding: 2px 6px; float: left; text-transform: uppercase; letter-spacing: 1.3px; }
	.infohub-dialogbox-date-m{ position: relative; overflow: hidden; color: #0c2f20; font-size: 12px; font-style: italic;padding: 2px 6px;  float: left; padding-top: 4px; }
	/*Detailing the Mercedex-Benz A45 AMG*/
	.infohub-dialogbox-title-m{ position: relative; overflow: hidden; font-size: 24px; font-weight: bolder;  color: #0c2f20; margin-bottom: 2px; line-height: 28px; }
	/*... ... ....*/
	.infohub-dialogbox-desc-m{ position: relative; overflow: hidden; font-size: 13px; color: #14422e; line-height: 16px; margin-bottom: 14px; }
	/*READ POST >*/
	.infohub-dialogbox-link-m{ position: relative; overflow: hidden; background-color: #0d271c; float: left; 
	background-image: url(../../images/osren/infohub/InfoHub_ActionBtn_White.png); 
	background-repeat: no-repeat; 
	background-position: calc(100% - 8px) center;}
	.infohub-dialogbox-link-a-m{ position: relative; overflow: hidden; display: block; color: #eafff5; font-size: 13px; font-weight: bolder; text-decoration : none; padding: 2px 10px; padding-right: 20px; padding-top: 3px; }
	/*FACEBOOK + TWITTER + GOOGLE*/
	.infohub-dialogbox-share-m{ position: relative; overflow: hidden; padding-left: 20px; float: right; }
	.infohub-dialogbox-social-m{ position: relative; overflow: hidden; display: block; text-decoration: none; float: left; margin-left: 10px; }
	.infohub-dialogbox-social-m img.active{ display: block; }
	.infohub-dialogbox-social-m img.inactive{ display: none; }
	.infohub-dialogbox-social-m:hover img.active{ display: block; }
	.infohub-dialogbox-social-m:hover img.inactive{ display: none; }
	
	/**CONNECT TO US in Nettbook**/
	.infohub-connecttous-m{ display: none; }
	/**CONNECT TO US in Desktop**/
	.infohub-connecttous-d.desktop{ display: none; }
}

@media (min-width: 768px) {

	/**Marcus: Left Side Bar**/
	.infohub-group1-n{ display: block; }
	.infohub-group1-n{ background-color: #05130d; /*min-height: 655px;*/ width: 25%; float: left; height: auto; }
	.infohub-whatshappening-n{ display: block; position: relative; overflow: hidden; 
		font-size: 12px; font-weight: bolder; color: #8e8e8e; letter-spacing: 2px;
		margin-top: 30px; margin-bottom: 3px; margin-left: 20px; }
	.infohub-group1-title-n{ float: none; font-size: 28px; color: #ffffff;  
		font-size: 31px; font-weight: bolder; line-height: 30px; letter-spacing: 0.3px;
		margin-left: 20px; margin-bottom: 15px; }
	.infohub-group1-title-br-n{ display: block; }
	.infohub-group1-viewall-n{ position: relative; display: block; float: left; background-color: #4dba8a; 
		margin-top: 0; margin-left: 20px; margin-bottom: 53px; /*padding: 0px 10px;*/ }
	.infohub-group1-viewall-n:hover{ background-color: #5fe5aa; }
	.infohub-group1-viewall-a-n{ display: block; padding-top: 4px; padding-bottom: 3px; padding-right: 12px; padding-left: 10px; color: #113728; font-weight: bolder; text-decoration: none; font-size: 15px; }
	
	.infohub-date-n{ background-color: #1f4f39; float: left; height: /*35*/39px; width: 100%; }
	/**Marcus: Year**/	
	.infohub-year-n{ float: left; overflow: hidden; height: 35px; background-color: transparent; }
	.infohub-back-n{ display: none; }
	.infohub-year-current-n{ display: none; }
	.infohub-year-year-n{ display: block; float: left;  margin-left: 10px; margin-top: 12px; 
		color: #829488; font-size: 13px; font-weight: bolder; letter-spacing: 0.3px; }
	.infohub-year-list-n{  position: relative; height: auto; width: auto; top: 0px; float: left; background-color: transparent; margin-left: 9px; }
	.infohub-year-option-n{	background-color: #122e22; float: left; height: auto; width: auto; 
		margin-top: 8px;  margin-left: 0px; padding: 0px;
		color: #ffffff; }
	.infohub-year-option-n:hover{ background-color: #5fe4a9; }
	.infohub-year-option-n:hover .infohub-year-option-a-n{ color: #122e22; }
	.infohub-year-option-a-n{ display: block; font-size: 14px; color: #ffffff; font-weight: bolder; padding: 3px 7px; }
	.infohub-year-option-n.active{ background-color: #4bb988; }
	.infohub-year-option-n.active .infohub-year-option-a-n{ color: #122e22; }
	.infohub-date-n.bottom .infohub-year-list-n{ top: auto; bottom: auto; }
	/**Marcus: Month**/
	.infohub-month-n{ background-color: transparent; float: right; margin-right: 15px; }
	.infohub-month-wrapper-n{ width: auto; padding: 0; margin: 0; }
	.infohub-month-text-n{ background-color: transparent; padding-top: 8px; margin: 0; margin-right: 5px; width: auto; font-size: 13px; }
	.infohub-month-current-n{ width: /*125*/105px; background-color: #4cba89; 
		margin-top: 5px; padding-left: 10px; padding-right: 10px; 
		font-size: 14px; color: #163523; text-align: left; }
	
	/***********************************************************************************************/
	.infohub-month-list-n{ left: 60px; width: /*133px*/auto; }
	.infohub-month-option-n{ background-color: #4cba89; }
	.infohub-month-option-a-n{ color: #163523; width: 105px; padding-left: 10px; padding-right: 10px; text-align: left; }
	/***********************************************************************************************/

	.infohub-group-n{ position: relative; overflow: hidden; height: 212px; width: 100%; float: left; border-bottom: 1px solid #3e9068; }
	.infohub-group-n:last-child{ border-bottom: none; }
	.infohub-imagebox-n{ height: 100%; width: 25%; float: left; }
	.infohub-dialogbox-n{ height: 100%;  width: 75%; float: left; }
	.infohub-dialogbox-triangle-n{ left: -19px; top: 19px; height: 19px; width: 19px;
		background-image: url(../../images/osren/infohub/InfoHubList_corner.png); }
	
	.infohub-dialogbox-wrapper-n{ padding-top: 15px; padding-bottom: 15px; padding-left: 18px; padding-right: 18px; }
	.infohub-dialogbox-type-n{ font-size: 12px; padding-left: 8px; padding-right: 8px; }
	.infohub-dialogbox-date-n{ padding-top: 2px; }
	.infohub-dialogbox-title-n{ font-size: 20px; line-height: 20px; margin-bottom: 8px; }
	.infohub-dialogbox-link-a-n{ font-size: 12px; letter-spacing: 0.3px; }
	
	/*CONNECT TO US*/
	.infohub-connecttous-n{ position: relative; overflow: hidden; display: block; margin-left: 20px; }
	.infohub-connecttous-desc-n { position: relative; overflow: hidden; color: #50a184; font-size: 14px; font-weight: bolder; letter-spacing: 0.3px; margin-bottom: 3px; }
	.infohub-connecttous-social-n{ position: relative; overflow: hidden; }
	.infohub-connecttous-share-n{ position: relative; overflow: hidden; float: left; height: 34px; width: 34px; margin-right: 8px; }
	.infohub-connecttous-share-n > img.inactive{ display: block; }
	.infohub-connecttous-share-n > img.active{ display: none; }
	.infohub-connecttous-share-n:hover > img.inactive{ display: none; }
	.infohub-connecttous-share-n:hover > img.active{ display: block; }
	
	.infohub-image-m, .infohub-image-d{ display: none; }
	.infohub-image-n{ display: block;  width: 100%; }
}

@media (min-width: 1280px) {
	
	.infohub-whatshappening-d{ font-size: 16px; }
	.infohub-group1-title-d{ font-size: 48px; line-height: 47px; }
	.infohub-group1-viewall-a-d{ font-size: 17px; padding-top: 7px; padding-bottom: 7px; padding-left: 10px; padding-right: 14px; }
	
	.infohub-connecttous-desc-d{ font-size: 17px; margin-bottom: 5px; }
	
	.infohub-year-year-d{ font-size: 14px; margin-top: 11px; }
	.infohub-year-option-a-d{ font-size: 14px; padding: 4px 9px; padding-bottom: 5px; }
	.infohub-year-option-d{ margin-top: 7px; }
	
	.infohub-dialogbox-wrapper-d{ padding-top: 20px; padding-bottom: 20px; padding-left: 25px; padding-right: 25px; }
	.infohub-dialogbox-type-d{ font-size: 13px; padding-left: 9px; padding-right: 9px; }
	.infohub-dialogbox-title-d{ font-size: 26px; line-height: 30px; margin-bottom: 5px; }
	.infohub-dialogbox-desc-d{ font-size: 14px; line-height: 18px; }
	.infohub-dialogbox-link-d{ clear: both; display: block; margin-bottom: 26px; }
	.infohub-dialogbox-share-d{ 
		clear: both; float: none; 
		padding-left: 0px;
		}
	.infohub-dialogbox-social-d{ margin-left: 0px; margin-right: 10px; }	
	.infohub-dialogbox-triangle-d{ height: 27px; width: 27px; background-image: url(../../images/osren/infohub/InfoHubList_corner_Desktop.png); left: -27px; top: 27px; }
	
	.infohub-month-d{ float: left; margin-left: 30px; display: none; }
	.infohub-month-list-d{ top: 29px; width: 133px; }
	.infohub-group-d{ height: 250px; }
	
	.infohub-image-m, .infohub-image-n{ display: none; }
	.infohub-image-d{ display: block;  width: 100%; }
}

/**
Marcus: Miscellaneous notes useful for developmenr
.body
	.infohub-group1
		
	.infohub-list
		.infohub-date
			.infohub-year
				.infohub-back
				.infohub-year-year
				.infohub-year-current
				.infohub-year-list
			.infohub-month
				.infohub-month-wrapper
		.infohub-group
			.infohub-imagebox
				.infohub-image
			.infohub-dialogbox
				.infohub-dialogbox-wrapper
					.infohub-dialogbox-header
						.infohub-dialogbox-type
						.infohub-dialogbox-date
					.infohub-dialogbox-title
					.infohub-dialogbox-desc
					.infohub-dialogbox-link
						.infohub-dialogbox-link-a
			.infohub-dialogbox-triangle
**/