/*------------------------------------*\
	#OVERRIDE STLES
	This style sheet can be used for two different functions:
	1. Override specific Bootstrap styles.
	2. Add your own styles.
\*------------------------------------*/

/**
 * Padding-top is required if using .navbar-fixed-top.
 * This can be removed Remove if using .navbar-static-top.
 * The height may need to be changed if the height of you
 * navigation changes.
*/

body { 
padding-top: 0px; 
}



/**
 * Bootstrap requires a containing element to wrap site contents 
 * and house the grid system. You may choose one of two containers.
 * Use .container for a responsive fixed width container.
 * Use .container-fluid for a full width container.

 * If using container-fluid, you may need to set a maximum width, 
 * so that the container will not spread to the entire viewport.
*/

/*.container-fluid { max-width: 1200px; } changed 23/04/15 */


.divtable {height:600px; width: 1000px; }
.divrow { height: 10px; padding: 1px; clear:both; }
.divrownopad { width: 900px; height: 80px; padding: 0px; clear:both;margin-top:20px;}
.divrowmarg { width: 900px; height: 80px; padding: 0px; clear:both; margin-left:10px;}
.divrowimg { width: 900px; height: 80px; padding: 0px; clear:both; margin-bottom:10px; margin-left:5px;}
.divcell {float: left; padding-right:10px; padding-left:10px; }
.width10 {margin-left: 10px;}


/* color ALL */
.colorALL {background-color: #0D0A64;}
/* color green */
.color1 {background-color: #99cc66;}
/* color aqua green */
.color2 {background-color: #669999;}
/* color pink */
.color3 {background-color: #ff0099;}
/* color purple */
.color4 {background-color: #663399;}
/* color orange */
.color5 {background-color: #cc6633;}
/* color dark orange */
.color6 {background-color: #cc3333;}
/* color white */
.color7 {background-color: #ffffff;}

.fontColorWhite{
color:#ffffff;
}

.fontcolor4
{color:  #663399;}

.boxbkwhite {
  padding: 10px;
  opacity: .9;
  margin-left: 10px;
  margin: auto 0!important;
  text-align: middle;
  vertical-align: middle;
}
		/* border: #cccccc;
	border-width: 3px;
	border-style: inset;*/
	
	
	/* rounded corners 
-webkit-border-radius: 12px;
-moz-border-radius: 7px; 
border-radius: 7px;
}
			
*{
	border-radius:3px;	

*/


.boxbkwhite2{
  padding: 10px;
  opacity: 0.85;
  margin-left: 10px;
  margin: auto 0!important;
  text-align: middle;
  vertical-align: middle;
}




.homePageImage{
			height:100%;
			width:100%;
			background-image: url(../../images/image_bg_students.jpg);/*your background image*/  
			background-repeat:no-repeat;/*we want to have one single image not a repeated one*/  
			background-size:cover;/*this sets the image to fullscreen covering the whole screen*/  
			/*css hack for ie*/     
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
			-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
		}


.homePageLogo{
			height:99px;
			width:236px;
			background-image: url(../../images/school_logo.jpg);/*your logoimage*/  
			background-repeat:no-repeat;/*we want to have one single image not a repeated one*/   
			/*css hack for ie*/     
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
			-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
		}




h1,h2,h3,h4,h5,h6
{
	margin: 0 0 .5em;
	font-weight: 500;
	color: #royalblue; 
	line-height: 1.1;
}

h1 { font-size: 2.25em; } /* 36px */
h2 { font-size: 1.75em; } /* 28px */
h3 { font-size: 1.375em; } /* 22px */
h4 { font-size: 1.125em; } /* 18px */
h5 { font-size: 1em; } /* 16px */
h6 { font-size: .875em; } /* 14px */

p
{
	font-size: 1em;
	margin: 0 0 1em;
	line-height: 1.2;
}

blockquote
{
	padding: 1em 2em;
	margin: 0 0 2em;
	border-left: 5px solid #eee;
}

hr
{
	height: 0;
	margin-top: 1em;
	margin-bottom: 2em;
	border: 0;
	border-top: 1px solid #ddd;
}

table
{
	background-color: transparent;
	border-spacing: 0;
	border-collapse: collapse;
	border-top: 1px solid #ddd;
}

th
{
	padding: 1em 1em;
	vertical-align: top;
	text-align: left;
	border-bottom: 1px solid #ddd;
	color: blue;
}

td
{
	padding: .5em 1em;
	vertical-align: top;
	text-align: left;
	border-bottom: 1px solid #ddd;
}


table.one
{
	background-color: transparent
	border-spacing: 0;
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
	font-size: 1em;
}

tr.one
{
	width: 100%;
}


td.one
{
	padding: .5em 1em;
	vertical-align: top;
	text-align: left;
	background-color: #ffffff;

}



a:link { color: #663399; text-decoration: none;}
a:visited { color: #blue; }
a:focus { color: black; }
a:hover { color: black; }
a:active { color: black; }

a.one:link {color:#ffffff; font-weight: bold}
a.one:visited {color:#ffffff;}
a.one:hover {color:#000000;}

/* -----------------------
Layout styles
------------------------*/

.container
{
	max-width: 70em;
	margin: 0 auto;

}

.header
{
	color: #cccccc;
	background: #ffffff;
	padding: 1em 1.25em;
}

.header-heading { margin: 0; }

.nav-bar
{
	background: #F1F6F8;
	padding: 0;
}

.content
{
	overflow: hidden;
	padding: 1em 1.25em;
	/*background-color: #fff;*/

}

.main, .aside
{
	margin-bottom: 1em;
}

.footer
{
	color: #000;
	background: #ccc;
	padding: 1em 1.25em;
}

/* -----------------------
Nav
------------------------*/

.nav
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav li
{
	display: inline;
	margin: 0;
}

.nav a
{
	display: inline;
	padding: .7em 1.25em;
	color: #blue;
	text-decoration: none;
	/*border-bottom: 1px solid gray;*/
}

.nav a:link { color: black; }
.nav a:visited { color: blue; }

.nav a:focus
{
	color: black;
	/*background-color: white;*/
}

.nav a:hover
{
	color: black;
	/*background-color: #E9DBEA;*/
}

.nav a:active
{
	color: white;
	/*background-color: #E9DBEA;*/
}

/* -----------------------
Single styles
------------------------*/

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		text-align: right;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	/*td:nth-of-type(1):before { content: "Centre"; text-align: left; }*/
	.table td:nth-of-type(1):before { content: ""; text-align: left; color: #663399;}
	.table td:nth-of-type(2):before { content: "Start Date";text-align: left; color: #663399; }
	.table td:nth-of-type(3):before { content: "Time";text-align: left; color: #663399; }
	/*.table td:nth-of-type(4):before { content: "Duration."; text-align: left; color: #663399;}*/
	.table td:nth-of-type(5):before { content: "Cost"; text-align: left; color: #663399;}
	.table td:nth-of-type(6):before { content: "Availability";text-align: left; color: #663399; }
	.table td:nth-of-type(7):before { content: ""; text-align: left;}



	/*
	Label the data
	*/
	/*td:nth-of-type(1):before { content: "Centre"; text-align: left; }*/
	.table2 td:nth-of-type(1):before { content: ""; text-align: left; color: #663399;}
	.table2 td:nth-of-type(2):before { content: "Date";text-align: left; color: #663399; }
	.table2 td:nth-of-type(3):before { content: "Day";text-align: left; color: #663399; }
	.table2 td:nth-of-type(4):before { content: "Start Time"; text-align: left; color: #663399;}
	.table2 td:nth-of-type(5):before { content: "End Time"; text-align: left; color: #663399;}
	

}


@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {



	 /* alternative table to booking table
	table.one, td.one, tr.one { 
		display: inline; 
	}

table.one
{
	background-color: transparent
	border-spacing: 0;
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
	font-size: 1em;
}

tr.one
{
	width: 100%;
}


td.one
{
	padding: .5em 1em;
	vertical-align: top;
	/*text-align: left;

}

	td.one :nth-of-type(1):before { content: ""; }
	td.one:nth-of-type(2):before { content: "";}
	td.one:nth-of-type(3):before { content: ""}

*/






.img-responsive { max-width: 100%; }

.btn
{
	color: #fff !important;
	background-color: royalblue;
	border-color: #222;
	display: inline-block;
	padding: .5em 1em;
	margin-bottom: 0;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: .2em;
	text-decoration: none;
}

.btn:hover
{
	color: #fff !important;
	background-color: purple;
}

.btn:focus
{
	color: #fff !important;
	background-color: black;
}

.btn:active
{
	color: #fff !important;
	background-color: purple;
}


.btn_small
{
	color: #fff !important;
	background-color: red;
	border-color: #222;
	display: inline-block;
	padding: .4em 1em;
	margin-bottom: 0;
	font-weight: 400;
	line-height: .8;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: .2em;
	text-decoration: none;
}

.btn_small:hover
{
	color: #fff !important;
	background-color: purple;
}

.btn_small:focus
{
	color: #fff !important;
	background-color: black;
}

.btn_small:active
{
	color: #fff !important;
	background-color: purple;
}




.table
{
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
	font-size: 1em;
}

tbody tr:nth-child(odd) {
   background-color: #ebf8ff;
}


.list-unstyled
{
	padding-left: 0;
	list-style: none;
}

.list-inline
{
	padding-left: 0;
	margin-left: -5px;
	list-style: none;
	color: #000000;
	/*background-color: #ffffff ;*/
}

.list-inline > li
{
	display: inline-block;
	padding-right: 5px;
	padding-left: 5px;
}

select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 200px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #CC99CC;
    background-color: ;
}





/* -----------------------
Wide styles
------------------------*/

@media (min-width: 55em)
{
	/*.header { padding: 1.5em 3em; }*/
	.nav-bar { padding: 1em 3em; }
	.content { padding: 2em 3em; }

	.main
	{
		float: left;
		width: 100%;
		margin-right: 5%;
		margin-bottom: 1em;
	}

	.aside
	{
		float: left;
		width: 0%;
		margin-bottom: 1em;
		margin-right: 5%;
	}

	.footer { padding: 1em 1em; }
	

	.nav li
	{
		display: inline;
		margin: 0 1em 0 0;
	}
	
	.nav a
	{
		display: inline;
		padding: 0;
		border-bottom: 0;
	}
}