@charset "utf-8";
/* MB Photo 2.0 Home CSS Document - all devices */

@media (orientation: landscape)
{
 .main DIV.cover_pic
	{
	 background: url(graphics/024-21_1920x1234.jpg) bottom left;
	 background-size: cover;
	}
}

@media (orientation: portrait)
{
 .main DIV.cover_pic
	{
	 background: url(graphics/024-21_640x1080.jpg) top right;
	 background-size: cover;
	}
}


@media all
{
 BODY
	{ }
	DIV.loading
		{ /* mb_photo_20_loading.css */ }	

	DIV#main
		{ }
		.main H1,H2,H3
			{ }

	DIV#main.loading /* Javascript handle */
		{ }
		 DIV#main.loading IMG
			{ }	
	
		.main DIV#top
			{ }
			.main DIV.cover_pic
				{ }
			.main DIV.page_title
				{ }
				.main .page_title H1, H2, H3
					{ }	

			.main DIV.page_title.sub_title
				{ }
				.main DIV.page_title A.language
					{ color: white; }
				.main .page_title .icon
					{ vertical-align: text-bottom; }

		.main DIV#menu { } /* mb_photo_20_menu.css */

		.main DIV.container
			{ }
			.main DIV.container DIV.content
				{ }
	
				.main DIV.container DIV.content DIV.share_wrapper
					{ }

				.main DIV.container DIV.content DIV.left
					{ width: 100%; }
					.main DIV.container DIV.content DIV.left H1
						{
						 float: none;
						 font-family: 'ArrusBT-Roman';
						 margin: 0.5vw 0 1vw;
						}


					/*.main DIV.container DIV.content .album DIV.topic
						{
						 width: 22vw; height: 22vw;
						 box-sizing: border-box;
						 padding: 0;
						 overflow: hidden;
						 text-align: center;
						}*/
			
						.main DIV.container DIV.content DIV.left DIV.album DIV.topic_cover
							{ overflow: hidden; }
							 .album DIV.topic IMG
								{ }
							 .album DIV.topic IMG.portrait
								{
								 width: 100%; height: auto;
								 margin-top: -25%;
								}
							 .album DIV.topic IMG.landscape
								{
								 width: auto; height: 100%;
								 margin-left: -25%
								}

					.main DIV.container DIV.content DIV.topic:not(:nth-child(3n))
						{ }
						.main DIV.container DIV.content DIV.topic DIV.text_container
							{ }
						.main DIV.container DIV.content DIV.topic DIV.text_container.title
							{ }
						.main DIV.container DIV.content DIV.topic DIV.text_container.title
							{
							 width: 100%; height: auto;
							 text-align: center;
							}
							.main DIV.container DIV.content DIV.topic DIV.text_container.title H2
								{ padding: 1vw 1vw; }
						.main DIV.container DIV.content DIV.topic IMG
							{ }
		
					.main DIV.container DIV.content DIV.topic.double_wide
						{ }
						.main DIV.container DIV.content DIV.topic.double_wide DIV.text_container
							{ }
		
						.main DIV.container DIV.content DIV.topic P
							{ }
						.main DIV.container DIV.content DIV.topic P.indent
							{ }
						.main DIV.container DIV.content DIV.topic P.anchor
							{ }
						.main DIV.container DIV.content DIV.topic UL
							{ }
		
/*#topics.specific		default styling plus in-element title positioning */

				.main DIV.container DIV.content DIV.right
						{ }
					.main DIV.container DIV.content DIV.right IMG
							{ }

/* Drag'n Drop local stylings */


					DIV.dragndrop
						{ }
						DIV.dragndrop .drop_box
							{ }
							DIV.dragndrop .drop_box .background
								{ }
								DIV.dragndrop .background .inner
									{ }
								DIV.dragndrop .background .ready
									{ color: darkblue; }
								DIV.dragndrop .background .waiting
									{
									 color: blue;
									 outline: medium dashed white; /*blue;*/
									}
								DIV.dragndrop .background .working
									{ color: darkblue; }

					DIV.utility DIV.dragndrop
						{ }
						DIV.utility .dragndrop .drop_box
							{ }
							DIV.utility .dragndrop .drop_box .background
								{ }
								DIV.utility .dragndrop .inner
									{ padding: 0; }
								DIV.utility .dragndrop .ready
									{ }
									DIV.utility .dragndrop .ready .fa-local
										{ display: none; }
									DIV.utility .dragndrop .ready .dnd_menu
										{ }
										DIV.utility .dragndrop .ready .dnd_menu .fa-local
											{
											 display: initial;
											 width: auto; height: auto;
											 position: static;
			
											 color: rgba(0,0,139,0.8);
											 font-size: 2vw;
											 letter-spacing: 0.2ex;
											 margin-left: 1vw;
											}
									DIV.utility .dragndrop .waiting
										{ }
										DIV.utility .dragndrop .waiting .drop_it
											{
											 width: 100%; height: auto;
											 position: absolute;
											 left: 0; top: 11%;
											 margin: 0; padding: 0;
			
											 text-align: center;
											 font-size: 3vw;
											 color: blue;
											}
									DIV.utility .dragndrop .working
										{
										 text-align: center;
										 perspective: 10vw;
										}
										DIV.utility DIV.dragndrop DIV#working DIV#spinning
											{
											 text-align: center;
											 perspective: 10vw;
											 padding: 0;
											 padding-top: 1.2vw;
											}
		
		
							DIV.utility DIV DIV#form_upload_container_0002/**/
								{
								 text-align: center;
								 padding: 0;
								 padding-top: 1.2vw;
								} 

					DIV.topic DIV.dragndrop
						{ }
						DIV.topic DIV.dragndrop DIV
							{ text-align: center; }
						DIV.topic DIV.dragndrop DIV.ready
							{ }
							DIV.topic DIV.dragndrop DIV.ready .dnd_menu
								{ display: none; }
							DIV.topic DIV.dragndrop DIV.ready .fa-local
								{
								 color: rgba(0, 0, 139, 0.5);
								 font-size: 5vmax;
								 line-height: 4.5vmax;
								 padding-top: 8vmax;
								}
						DIV.topic DIV.dragndrop DIV.waiting
							{
							 font-size: 3vw;
							 line-height: 6vmax;
							}
							DIV.topic DIV.dragndrop DIV#waiting .drop_it
								{
								 width: 100%; height: auto;
								 position: absolute;
								 left: 0; top: 35%;
								 margin: 0; padding: 0;

								 font-size: 3vw;
								 line-height: 6vw;
								 text-align: center;
								 color: blue;
								}
						DIV.topic DIV.dragndrop DIV.working
							{
							 font-size: 3vmax;
							 line-height: 6vmax;
							}
							DIV.topic DIV.dragndrop DIV.working #spinning
								{ padding-top: calc(50% - 3vmax); }

					#edit_album #cover_image .dragndrop
						{ }
						#edit_album .dragndrop .drop_box
							{ }
							#edit_album .drop_box .background
								{ }
								#edit_album .background .inner
									{ text-align: center; }
								#edit_album .background .ready
									{ }
									#edit_album .ready .dnd_menu
										{ display: none; }
									#edit_album .ready .fa-local
										{ 
										 width: 100%; height: auto;
										 position: absolute;
										 left: 0; top: 35%;
		
										 color: rgba(128,128,144,0.5);
										 font-size: 5vw;
										 line-height: 4.5vw;
										}/**/
								#edit_album .background .waiting
									{
									 outline: none;
									 border: medium dashed orange;
									 background-color: rgba(255,255,255,0.6);
									}
									#edit_album .background .waiting .drop_it
										{
										 position: absolute;
										 left: 0; top: 44%;
										 color: blue;
										 font-size: 3vw;
										}
								#edit_album .background .working
									{ background-color: rgba(255,255,255,0.6); }
									#edit_album .background .working #spinning
										{
										 position: absolute;
										 left: 0; top: 44%;
										 font-size: 3vw;
										}






		.main DIV.footer
			{ }
			.main DIV.footer UL.bottom_menu
				{ }
				.main DIV.footer UL.bottom_menu LI
					{ }
	
			.main DIV.footer P
				{ }
			.main DIV.footer SPAN.copyright
				{ }

/* Linkage, anchorage, navigationage */
/* BODY
	{ }
	DIV#main
		{ }
		.main DIV.container
			{ }
			.main DIV.container DIV.content
				{ }
				.main DIV.container DIV.content DIV.left
					{ }
					.main DIV.container DIV.content DIV.topic
						{ }*/
						.main DIV.container DIV.content DIV.topic DIV.text_container
							{ z-index: 100; }
						.main DIV.container DIV.content DIV.topic A
							{ color: white; }
						.main DIV.container DIV.content DIV.topic:hover A
							{ text-decoration: underline; }
						.main DIV.container DIV.content DIV.topic A:active
							{ top: 0; }
					.main DIV.container DIV.content DIV.topic_cover:active
						{
						 /*position: absolute*/;
						 left: 2px; top: 2px;
						}


}

@media (orientation: landscape)
{
		.main DIV#top
			{ }
			.main DIV.cover_pic
				{ }
			.main DIV.page_title
				{
				 position: absolute;
				 right: 0; top: 12vh;
				 z-index: 11; /* storing padding factor for js*/
				 text-align: right; /* letting js know which side to pad */
				}
}

@media (orientation: portrait)
{
}