/*
	aw.css
	
	Alexander-Wright.com Stylesheet.
	
	Contains standard style information for the Alexander Wright website.
	
	© Alexander Wright, 2013
	
	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;	
}

html {

}

body {
	background-color:           #4C7278; 	/* 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.jpg);
		background-position:        top center; 
		background-repeat:          no-repeat;
		/*background-attachment: 		fixed;*/
		margin:						0 auto;
		text-align:					center;
		background-color:           #FFFFFF;
	}


	#headerIndex {
		margin: 					0 20px;
		width:                  	auto;
		padding:					70px 0px 70px 0px;
		text-align:            		center;
	}	
	
	#header {
		margin: 					0 auto;
		width:                  	940px;
		padding:					0px;
		text-align:            		center;
	}
	
	#headLeft {
		float: 						left;
		padding: 					10px;
	}
	
	#headRight {
		float: 						right;
		padding: 					10px;
		display:					inline;
	}
	
	.headerImageIndex {		
		width: 						100%;
		max-width:                 	350px;
	}
	
	#headerIndex:hover {
	
	}
	
	.headerImage {
		width: 						100%;
		max-width:                 	150px;	
	}
	
	.socialIcons {
		width:						30px;
		padding: 					10px;
	}
	
	.imPageHead {	
		width: 						100%;
		margin-bottom: 				10px;
		box-shadow: 				0px 5px 10px #888888;
	}





	#navBar {
		margin: 					0 auto;
		width: 						100%; /*940px;*/
		text-align:            		center;
		padding:					5px 0px;
		box-shadow: 				0px 5px 10px #888888;	
		
	}
	
	



	/*
		End of WordPress Style NavBar
		-------------------------------------------------------------------------
	*/
	
	#contentBk {
		padding: 					0px 0px 30px 0px;
		margin: 					0 auto;
		width:                     	100%;
		height:                    	auto;
		text-align:            		center;
		/*box-shadow: 				0px 5px 10px #888888;*/	
		background-image:           url(../gfx/bk/bkFlip.jpg);
		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: 						940px;
		text-align: 				center;
		padding: 					10px 20px;	
	}
	
	#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%;
	}
	
	.mobileGrid {
		display: 					none;
	}

	.imageGrid {
		display: 					inline;
	}
	
	.gradBoxContainerList {
		width: 						90%;
		margin: 					auto;
		text-align: 				left;
	}
	
	.gradBoxIcon {	
		padding:					5px;	
		margin: 					5px;		
		box-shadow: 				0px 5px 10px #888888;	
		text-align:            		center;
		float: 						left;
	}
	
	.curricListText{
		margin: 					15px 5px;	
		float: 						left;
	}
	
	
	.gradBoxContainer {
		width: 						25%;	
		float: 						left;
		text-align: 				center;
	}
	
	.gradBoxContainerHi {
		width: 						20%;	
		float: 						left;
		text-align: 				center;
		height: 					160px;
	}
	
	.gradBoxContainerFull {
		width: 						100%;
		margin: 					auto;
		text-align: 				center;
	}
	
	.w80 {
		width: 						80%;	
	}
	
	.gradBox {
		margin: 					5px;	
		padding:					10px;		
		box-shadow: 				0px 5px 10px #888888;	
		text-align:            		center;
	}
	
	.imageShadow {
		margin: 					20px 0px;	
		padding:					0px;		
		box-shadow: 				0px 5px 10px #888888;	
		text-align:            		center;
	}
	
	.imageShadowBlue {
		margin: 					20px 0px;	
		padding:					0px;		
		box-shadow: 				0px 5px 10px #444444;	
		text-align:            		center;
	}
	
	.box_content {
		float: 				left;
		width: 				60%;
	}


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

	.clearer2 {
		clear: 				both;
	}
	
	#clearAgain {
		clear: 				both;
	}

	
	
	.frontIm {
		box-shadow: 				0px 5px 10px #888888;	
		display: 					block;
	}
	
	
	.imSig {
		padding: 					20px 20px;
		width:						200px;
	}
	
	.pubBox {
		background-color:			#FFFFFF;
		box-shadow: 				0px 2px 5px #888888; 
		padding: 					15px;
	}
	

	

	#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;
	}


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



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



	 
}

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.addButton {
	font-size:					1.5em;
	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.5em;
	margin:						10px 0px 25px 0px;
	padding:					10px 20px;
	background-color:			#993333;
	box-shadow: 				0px 3px 5px #221111;
}

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

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

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