/*
	screen.css

	vPath Stylesheet.

	Contains standard style information for the vPath website.

	© Alexander Wright, 2014

	Design

	 ___________________________________________________
	|                                                   |
	|   Head                              				|
	|___________________________________________________|
	|   Navigation						                |
	|___________________________________________________|
	|  	Content                                          |
	|                                                   |
	|                                                   |
	|                                                   |
	|                                                   |
	|                                                   |
	|                                                   |
	|                                                   |
	|___________________________________________________|
	|    Foot                                           |
	|___________________________________________________|



	Main colours: 		#FFFFFF - background
						#9cc0cc - block colour

						#4C7278 - block colour to dark
						#88A7AD - block colour to slightly darker (than block colour)



 */



/*
	===========================================================================

	Layout Containers

	===========================================================================
*/


* {
	margin:					0px;
	padding:				0px;
}

a, img {
    border:					none;
}

/* css rule to prevent text highlighting */
.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	cursor:default;
}

html {

}

body {
	background-color:           #333333; 	/* To make the footer look better when half way up the screen */
	padding:					0;
	margin:						0;
    text-align:            		center;
}

@media screen {

	#wrap {
		/*background-image:           url(../gfx/bk/bk.png);*/
		background-image:           url(../gfx/bk/whitetile.png);
		background-position:        top center;
		background-repeat:          repeat;
		/*background-attachment: 		fixed;*/
		margin:						0 auto;
		text-align:					center;
		background-color:           #CCCCCC;
	}


	#headerIndex {
		margin: 					0 20px;
		width:                  	auto;
		padding:					70px 0px 70px 0px;
		text-align:            		center;
	}

	#headerWrap {
		width:						100%;
		padding:					0px;
		margin:						0px;
	}

	#header {
		margin: 					0 auto;
		width:                  	980px;
		padding:					0px;
		text-align:            		center;
	}

	#headLeft {
		float: 						left;
		padding: 					10px;
	}

	#headRight {
		float: 						right;
		padding: 					10px;
		margin-top: 				0px;
		display:					inline;
	}

	.headerImageIndex {
		/*width: 						100%;
		max-width:                 	350px;*/
		width: 						140px;
		height: 					44px;
	}

	#headerIndex:hover {

	}

	.headerImage {
		width: 						140px;
		height: 					44px;
		/*max-width:                 	140px;
		max-height:                	44px;	*/
	}

	.socialIcons {
		width:						30px;
		padding: 					10px;
	}

	.imPageHead {
		width: 						100%;
		margin-bottom: 				10px;
		box-shadow: 				0px 2px 3px #888888;
	}





	#navBar {
		margin: 					0 auto;
		width: 						100%;
		text-align:            		center;
		padding:					5px 0px;
		box-shadow: 				0px 5px 10px #666666;

	}

	.alertBar {
		margin: 					0 auto;
		width:                  	960px;
		text-align:            		center;
		padding:					0px 10px;
		box-shadow: 				0px 2px 3px #888888;

	}

	.alertLeftIcon {
		float: 						left;
		padding: 					10px;
		width:						10%;
	}

	.alertLeft {
		float: 						left;
		padding: 					10px;
		width:						60%;
	}

	.alertRight {
		float: 						right;
		padding: 					10px;
		margin-top: 				5px;
		display:					inline;
	}




	/*
		End of WordPress Style NavBar
		-------------------------------------------------------------------------
	*/

	#contentBk {
		padding: 					0px 0px 0px 0px;
		margin: 					0 auto;
		width:                     	100%;
		height:                    	auto;
		text-align:            		center;
		/*box-shadow: 				0px 2px 3px #888888;*/
		background-image:           url(../gfx/bk/bkFlip.png);
		background-position:        bottom center;
		background-repeat:          no-repeat;
	}

	#contentBk.clear {
		background-color:           none;
	}


	#contentBk.white {
		/*background-color:           #FFFFFF;
		background-color:			rgba(255, 255, 255, 0.2);*/
	}

	#contentBk.grey {
		/*background-color:           #EEEEEE;
		background-color:			rgba(220, 220, 220, 0.2);	*/
	}


	#contentBk.black {
		/*background-color:           #000000;
		background-color:			rgba(0, 0, 0, 0.2);*/
	}


	#content {
		/*background-color:           #FFFFFF;	*/
		margin: 					0px auto;
		width: 						980px;
		text-align: 				center;
		padding: 					0px;
		background-color:           #FFFFFF;
		box-shadow: 				0px 2px 3px #888888;
	}

	.contentImage {
		width:						100%;
		max-width:					980px;
	}

	#contentInner {
		padding: 					0px 30px;
	}

	#contentFloat {
		font-size:					1em; 					/*
																Who knows why I have to put this in
																here to keep text size the same for
																p tags?
															*/
		margin: 					0px auto;
		width: 						980px;
		text-align: 				left;
		padding: 					0px;
	}



	#mobileBanner {
		background-color:           #FFFFFF;
		display: 					none;
	}



	#floatTextLeft {
		background-color:           #FFFFFF;
		float: 						left;
		margin: 					0px auto;
		width: 						600px;
		min-height: 				300px;
		text-align: 				left;
		padding: 					20px;
		border: 					2px dashed #888888;
		box-shadow: 				0px 5px 10px #333333;
	}

	#floatTextRight {
		background-color:           #FFFFFF;
		float: 						right;
		margin: 					0px auto;
		width: 						600px;
		min-height: 				300px;
		text-align: 				left;
		padding: 					20px;
		border: 					2px dashed #888888;
		box-shadow: 				0px 5px 10px #333333;
	}

	#floatTextLeft.logo {
		min-height: 				205px;
	}

	#floatTextRight.logo {
		min-height: 				205px;
	}


	#floatImLeft {
		background-color:           #FFFFFF;
		float: 						left;
		margin: 					0px auto;
		width: 						250px;
		text-align: 				left;
		padding: 					20px;
		border: 					2px dashed #888888;
		box-shadow: 				0px 5px 10px #333333;
	}

	#floatImRight {
		background-color:           #FFFFFF;
		float: 						right;
		margin: 					0px auto;
		width: 						250px;
		text-align: 				left;
		padding: 					20px;
		border: 					2px dashed #888888;
		box-shadow: 				0px 5px 10px #333333;
	}


	.screenList {
		display: 					inline;
	}

	.screenListHalf {
		float: 						left;
		width: 						50%;
	}

	.imHalf {
		float: 						left;
		width: 						47%;
		padding:					5px;
		max-height: 				299px;
		text-align: 				left;
		height: 					auto;
	}

	.screenListThird {
		float: 						left;
		width: 						33%;
	}

	.mobileGrid {
		display: 					inline;
		width:						100%;
	}

	.mobileGridST1 {
		display: 					none;
	}

	.curricListText{
		margin: 					15px 5px;
		float: 						left;
	}

	.curricListTextSize {
        font-size:                  1em;
    }



	.gradBoxContainerList {
		width: 						100%;
		margin: 					auto;
		text-align: 				left;
	}

	.gradBoxIcon {
		padding:					5px;
		margin: 					5px;
		box-shadow: 				0px 2px 3px #888888;
		text-align:            		center;
		float: 						left;
	}


	.gradBoxContainer {
		width: 						25%;
		float: 						left;
		text-align: 				center;
		padding-bottom:				10px;
	}

	.gradBoxContainerHalf {
		width: 						50%;
		float: 						left;
		text-align: 				center;
		padding-bottom:				10px;
	}

	.gradBoxContainerHi {
		width: 						20%;
		float: 						left;
		text-align: 				center;
		height: 					160px;
	}

	.gradBoxContainerFull {
		width: 						100%;
		margin: 					auto;
		text-align: 				center;
	}

	.gradBoxContainerSlide {
		display: 					block;
		width: 						25%;
		float: 						left;
		text-align: 				center;
		padding-bottom:				10px;
		height:						220px;
	}

	.gradBoxContainerSlideHalf {
		display: 					block;
		width: 						50%;
		float: 						right;
		text-align: 				center;
		padding-bottom:				10px;
		height:						220px;
	}

	.gradBoxContainerTweet {
		width: 						100%;
		max-width:					600px;
		margin: 					auto;
		padding: 					10px 0px;
		text-align: 				center;
	}

	.w80 {
		width: 						80%;
	}

	.gradBox {
		margin: 					5px 35px;
		padding:					10px;
		box-shadow: 				0px 2px 3px #888888;
		text-align:            		center;
	}

	.gradBoxArt {
		margin: 					5px 35px;
		padding:					20px;
		box-shadow: 				0px 2px 3px #888888;
		text-align:            		center;
		background-image:           url(../gfx/public/historic/woodtile100dark90.jpg);
		background-position:        top center;
		background-repeat:          repeat;
	}

	.gradBoxSlide {
		margin: 					0px 5px;
		padding:					10px;
		box-shadow: 				0px 2px 3px #888888;
		text-align:            		center;
		max-height: 				180px;
	}

	.gradBoxSlideLibrary {
		margin: 					10px auto;
		padding:					0px;
		width:						auto;
		max-width:					600px;
		box-shadow: 				0px 2px 3px #888888;
		text-align:            		center;
	}

	.gradBoxCaseContainer {
		margin: 					10px auto;
		padding:					0px;
		width:						auto;
		box-shadow: 				0px 2px 3px #888888;
		text-align:            		center;
	}

	.gradBoxSlideLibraryInner {
		padding:					10px;
		width: 						auto;
	}

	.gradBoxPub {
		margin: 					5px 5px;
		padding:					10px;
		box-shadow: 				0px 2px 3px #888888;
		text-align:            		center;
	}

	.gradBoxNewsWrap {
		margin: 					10px;
		padding:					0px;
		text-align:            		center;
		box-shadow: 				0px 2px 3px #888888;
	}

	.newsBoxIm {
		margin: 					0px 0px 0px 0px;
		padding:					0px;
		width:						100%;
	}

	.gradBoxNews {
		margin: 					0px 0px 0px 0px;
		padding:					10px;
		text-align:            		center;
		height:						auto;
	}


	.newsItem {
		margin: 					0px 00px 0px 0px;
		padding:					10px;
	}

	.imageShadow {
		margin: 					20px 0px;
		padding:					0px;
		box-shadow: 				0px 2px 3px #888888;
		text-align:            		center;
	}

	.box_content {
		float: 				left;
		width: 				60%;
	}


	.illustration {
		float: 				right;
		width: 				30%;
		text-align: 		right;
	}

	.clearer2 {
		clear: 				both;
	}



	.frontIm {
		box-shadow: 				0px 2px 3px #888888;
		display: 					block;
	}


	.imSig {
		padding: 					20px 20px;
		width:						200px;
	}

	.vidBox {
		background-color:			#FFFFFF;
		box-shadow: 				0px 2px 5px #888888;
		padding: 					15px;
	}


	.noPad {
		padding: 					0;
	}



	#clear{
		clear:						both;
	}

	#social {
		width: 						auto;
		padding: 					10px;
	}

	.logoIm {
		width: 						100%;
	}

	.socialLeft {
		width: 						33%;
		text-align: 				left;
		float: 						left;
	}

	.socialMid {
		width: 						33%;
		text-align: 				center;
		float: 						left;
	}

	.socialRight {
		width: 						33%;
		text-align: 				right;
		float: 						left;
	}


	#footerNav {
		margin: 					0 auto;
		width:                  	100%;
		text-align:            		center;
		padding:					0px;
	}

	#footerNavInner {
		margin: 					0 auto;
		width:                  	980px;
		text-align:            		center;
		padding:					0px;
	}


	#footer {
		margin: 					0 auto;
		width:                  	100%;
		text-align:            		center;
		padding:					0px;
	}

	#footerInner {
		margin: 					0 auto;
		width:                  	980px;
		text-align:            		center;
		padding:					0px;
	}

	.footerLeft {
		padding:					20px;
		width:                  	40%;
		float:						left;
		text-align:					left;
	}

	.footerRight {
		padding:					20px;
		width:                  	40%;
		max-width: 150px;
		float:						right;
		text-align:					right;
	}


	hr {
		border-style:				solid;
		height:						1px;
		margin:						10px 0px 30px 0px;
	}

	hr.title {
		margin:						0px 0px 10px 0px;
	}

	hr.margin10 {
		margin:						10px 0px 10px 0px;
	}


	diagnosis {
		text-align: 				left;
		font-size:					0.9em;
	}


	.openWithIcons {
		width: 						32px;
		margin: 					5px 10px;
		box-shadow: 				0px 2px 5px #888888;
	}



	/*

		BUttons and forms

		===========================================================================
	*/

	button {

		margin:						0px 10px;
		cursor:						pointer;
		font-size:					1em;
		/*font-weight:				bold;*/
		padding:					5px 10px 5px 10px;
		color: 						#FFFFFF;
		border-style: 				none;

		border-radius:				5px;
		-moz-border-radius:			5px;
		box-shadow: 				0px 3px 5px #110022;

		background-color:			#6600CC;
	}



	button:hover {
		color: 						#FFFFFF;
		background-color:			#9933FF;
	}



	button.loginButton {
		font-size:					1.2em;
		margin:						10px 0px 10px 0px;
		width:						100%;
		padding:					10px;
	}

	button.addButton {
		font-size:					1.2em;
		margin:						10px 0px 25px 0px;
		padding:					10px 20px;
		background-color:			#339933;
		box-shadow: 				0px 3px 5px #112211;
	}

	button.addButton:hover {
		background-color:			#66CC66;
	}


	button.deleteButton {
		font-size:					1.2em;
		margin:						10px 0px 25px 0px;
		padding:					10px 20px;
		background-color:			#993333;
		box-shadow: 				0px 3px 5px #221111;
	}

	button.deleteButton:hover {
		background-color:			#CC6666;
	}

	/*
		Mini Buttons
	*/

	button.addButtonMini {
		font-size:					1em;
		margin:						10px 0px 5px 0px;
		padding:					5px 0px;
		width: 						100%;
		background-color:			#339933;
		box-shadow: 				0px 3px 5px #112211;
	}

	button.addButtonMini:hover {
		background-color:			#66CC66;
	}



	button.deleteButtonMini {
		font-size:					0.8em;
		margin:						0px;
		padding:					5px;
		background-color:			#993333;
		box-shadow: 				0px 3px 5px #221111;
	}

	button.deleteButtonMini:hover {
		background-color:			#CC6666;
	}



	button.disabled {
		background-color:			#666666;
	}

	button.disabled:hover {
		background-color:			#888888;
	}

	.buttonHalfContainer {
		float: 						left;
		width: 						48%;
		padding: 					5px;
	}

	.leftFloat {
		float: 						left;
	}

	.rightFloat {
		float: 						right;
	}

	.buttonHalf {
		width: 						47%;
		margin: 					5px;
	}





	input.login {
		font-size:					1.2em;
		width:  					70%;
		margin:						10px 0px;
		padding:					5px;
	}


	select.login {
		font-size:					1.2em;
		width:  					70%;
		margin:						10px 0px;
		padding:					5px;
		color: 						#AAA;
	}

	/* 
	 * Added 29-04-2024
	 **********************************************/
		.container-centre {
		  position: relative;
		  height: 200px;
		  border: 0px solid #704e92;
		}

		.centered-element {
		  margin: 0;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		}

	.gradBoxContainer2 {
		width: 						50%;
		float: 						left;
		text-align: 				center;
		padding-bottom:				10px;
	}
	 /**********************************************/

}