/* RESET MARGINS & PADDING */

html, body, div, span,
p, blockquote, pre, code,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
form, fieldset, legend, label, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	}

img {
	border: 0;
	}

/***************************/

/* Layout Styles */

body {
	font-family: Arial, Verdana, Sans-serif;
	font-size: 85%;
	color:#666 !important;
	text-align: left;
	background-color: #444;
	}

#headerwrapper {
	width: 100%;
	height: 100px;
	background-color: #00AFF0;
	text-align: center;
	/*margin-bottom: 20px;*/
	}

#header {
	width: 1000px;
	height: 100px;
	margin: auto;
	}

.logo {
	display: block;
	height: 100px;
	width: 150px;
	background-image: url("images/oat-logo.png");
	background-repeat: no-repeat;
	float: left;
	}

.strapline {
	display: block;
	height: 100px;
	width: 300px;
	display: block;
	background-image: url("images/strap.jpg");
	background-repeat: no-repeat;
	float: left;
	margin-left: 40px;
	}

h1 {
	color: #666;
	font-weight: normal;
	padding-bottom: 21px;
	font-size: 2.4em;
	text-align: center;
	}

.welcome {
	margin: 10px 0 25px 0;
	display: block;
	float: left;
	width: 100%;
	}

.welcome h1,
.usefulLinks p {
	font-size: 1.2em;
	font-weight: normal;
	color: #00AFF0;
	}

.outerWrapper {
	width: 100%;
	background-color: #fff;
	float: left;
	padding: 20px 0;
	}

.innerWrapper {
	width: 1000px;
	margin: auto;
	display: block;
	}

a.halfPage {
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 2.7em;
	letter-spacing: -0.025em;
	font-weight: bold;
	line-height: 490px;
	width: 490px;
	height: 490px;
	float: left;
	border-radius: 10px;
	background-color: #eee;
	background-image: url(images/register-pic.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
	transition: background-size 0.35s ease;
	}

.alpha {
	margin-right: 20px;
	}

a.halfPage.alpha {
	background-image: url(images/sign-in-pic.jpg) !important;
	background-size: 100%;
	}
	
a.halfPage.alpha:hover,
a.halfPage:hover {
	background-size: 110%;
	}

.signInButton {
	clear: both;
	margin: 100px auto 20px auto;
	width: 356px;
	}

a.transButton {
	width: 340px;
	height: 100px;
	background-color: #a0c80a;
	color: #fff;
	font-size: 2.8em;
	text-align: center;
	display: block;
	text-decoration: none;
	line-height: 100px;
	border-radius: 58px;
	border: 8px solid #d7e897;
	transition: background-color 0.25s ease;
	}

a.transButton:hover {
	background-color: #8eb401;
	}

.orReg {
	text-align: center;
	margin-bottom: 60px;
	}

.orReg a,
.orReg a:visited {
	font-size: 0.95em;
	color: blue;
	}

.orReg a:hover {
	color: purple;
	}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    a.halfPage.alpha:hover, a.halfPage:hover {background-size: 100%;} /* Targets ONLY IE 10 and 11 */
	}

p.success {
	margin-bottom: 10px;
	background-image: url(images/success.png);
	background-repeat: no-repeat;
	background-position: left center;
	padding: 10px 0 10px 35px;
	}

.formWrapper {
	clear: both;
	float: left;
	width: 500px;
	margin-top: 0px;
	margin-bottom: 20px;
	padding: 20px;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 5px;
	}

.formWrapper.fullWidth {
	width: 90%;
	}

.formWrapper p {
	margin-bottom: 15px;
	}

.formWrapper p input {
	margin-top: 5px;
	width: 480px;
	height: 25px;
	padding: 5px;
	font-size: 1.1em;
	letter-spacing: -0.025em;
	}

.formWrapper input.submitButton {
	-webkit-appearance: none;
	margin-top: 10px;
	color: #fff;
	font-size: 1em;
	background-color: #a0c80a;
	width: 100px;
	height: 40px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s ease;
	}

.formWrapper input.submitButton:hover {
	background-color: #84a700;
	}

.usefulLinks {
	clear: both;
	float: left;
	margin-top: 40px;
	}

a.tile {
	border-radius: 5px;
	width: 95px;
	height: 90px;
	background-color: #ddd;
	background-repeat: no-repeat;
	background-position: center 34px;
	float: left;
	display: block;
    margin-right: 20px;
	margin-bottom: 20px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding: 10px 5px 5px 5px;
	transition: box-shadow 0.3s ease;
	}

/*a.tile.schemeGreen {background-color: #a0c80a;}
a.tile.schemeOrange {background-color: #f58223;}
a.tile.schemePurple {background-color: #5a2d91;}
a.tile.schemeMagenta {background-color: #fa3caa;}*/
a.tile.schemeBlue {background-color: #4674c0;}
a.tile.schemeRed {background-color: #ba3d1e;}
a.tile.schemeWhite {background-color: #eee;}

a.tile.schemeCyan {background-color: #00AFF0;}
a.tile.schemeLime {background-color: #A5D200;}
a.tile.schemeWine {background-color: #782D55 !important;}
a.tile.schemeTeal {background-color: #0F8282;}
a.tile.schemeMaize {background-color: #FFC323;}
a.tile.schemePink {background-color: #F9C3E0;}

a.tile:hover {box-shadow: inset 0px 0px 100px 100px rgba(0, 0, 0, .3);}

a.breathe {background-image: url(portal/images/breathe.png);}
a.crm {background-image: url(portal/images/crm.png);}
a.directory {background-image: url(portal/images/directory.png);}
a.doodle {background-image: url(portal/images/doodle.png);}
a.educare {background-image: url(portal/images/educare.png);}
a.evolve {background-image: url(portal/images/evolve.png);}
a.expenses {background-image: url(portal/images/expenses.png);}
a.finance {background-image: url(portal/images/finance.png);}
a.gel {background-image: url(portal/images/gel.png);}
a.google {background-image: url(portal/images/google.png);}
a.help {background-image: url(portal/images/help.png);}
a.kykloud {background-image: url(portal/images/kykloud.png);}
a.meal {background-image: url(portal/images/meal.png);}
a.oatnet {background-image: url(portal/images/oatnet.png);}
a.office {background-image: url(portal/images/office365.png);}
a.onedrive {background-image: url(portal/images/onedrive.png);}
a.outlook {background-image: url(portal/images/outlook.png);}
a.papercut {background-image: url(portal/images/papercut.png);}
a.rewards {background-image: url(portal/images/rewards.png);}
a.room {background-image: url(portal/images/room.png);}
a.sharepoint {background-image: url(portal/images/sharepoint.png);}
a.skype {background-image: url(portal/images/skype.png);}
a.stationery {background-image: url(portal/images/stationery.png);}
a.theschoolbus {background-image: url(portal/images/theschoolbus.png);}
a.travel {background-image: url(portal/images/travel.png);}
a.website {background-image: url(portal/images/website.png);}
a.meltwater {background-image: url(images/meltwater.png);}
a.surveymonkey {background-image: url(images/surveymonkey.png);}
a.bhsf {background-image: url(images/bhsf.png);}
a.hoge100 {background-image: url(images/hoge100.png);}
a.learninglink {background-image: url(images/learninglink.png);}
a.yammer {background-image: url(images/yammer.png);}
a.ihasco {background-image: url(images/ihasco.png);}
a.coronavirus {background-image: url(images/coronavirus.png);}
a.teamviewer {background-image: url(images/teamviewer.png);}
a.vacancyfiller {background-image: url(images/vacancyfiller.png);}
a.oattv {background-image: url(images/oat-tv.png);}
a.internalvacancies {background-image: url(images/internalvacancies.png);background-position-y: 45px;}
a.template {background-image: url(images/template.png);}
a.paper {background-image: url(images/template.png);}
a.style {background-image: url(images/style.png);}
a.branding {background-image: url(images/branding.png);}
a.form {background-image: url(images/form.png);}



#footerWrapper {
	padding-top: 20px;
	clear: both;
	width: 100%;
	height: 100px;
	text-align: left;
	background-color: #444;
	}

#footer {
	width: 1000px;
	height: 100px;
	margin: auto;
	}

.footerOne, .footerTwo, .footerThree {
	color: #fff;
	width: 31%;
	float: left;
	margin-right: 20px;
	padding: 0 0 20px 0;
	}

.footerOne {
	border-right: 1px solid #777;
	}

.footerThree {
	border-left: 1px solid #777;
	margin-right: 0;
	}

.footerThree ul {
	padding-left: 20px;
	}

#footer a {
	color: #fff;
	text-decoration: none;
	}

#footer a:hover {
	text-decoration: underline;
	}

#footer ul {
	list-style-type: none;
	}

#footer ul li {
	margin-bottom: 8px;
	line-height: 1.4em;
	}

.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
.panel-body{padding:15px}
.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}
.panel-primary{border-color:#337ab7}
.panel-primary>.panel-heading{color:#fff;background-color:#337ab7;border-color:#337ab7}
.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#337ab7}
.panel-primary>.panel-heading .badge{color:#337ab7;background-color:#fff}
.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#337ab7}



/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) (**** FIRST RESIZE ****) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

	#header {width: 750px; margin: auto;}
	.innerWrapper, #footer {width: 750px;}
	a.halfPage { width: 365px; height: 365px; font-size: 2.2em; line-height:365px;}
	
	
	/*.maincolumn {width: 750px;}
	a.feat8, a.feat16, a.feat24 {margin-right: 20px;}
	a.feat6, a.feat12, a.feat18, a.feat24, a.feat30 {margin-right: 0;}
	#rssDivMob {display: none;}*/
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) (**** SECOND RESIZE ****) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	#header {width: 500px; margin: auto;}
	.innerWrapper, #footer {width: 500px;}	
	a.halfPage { width: 240px; height: 240px; font-size: 1.5em; line-height:240px;}
	.footerOne, .footerTwo, .footerThree { clear: both; width: 500px; margin: 0 0 20px 0; border: none;}
	.footerThree ul { padding-left: 0;}

	/*.maincolumn {width: 500px;}
	a.feat {margin: 0 24px 24px 0;}
	a.feat4, a.feat8, a.feat12, a.feat16, a.feat20, a.feat24, a.feat28 {margin-right: 0;}
	a.feat1, a.feat2, a.feat3, a.feat5, a.feat6, a.feat7, a.feat9, a.feat10, a.feat11, a.feat13, a.feat14, a.feat15, a.feat17, a.feat18, a.feat19, a.feat21, a.feat22, a.feat23, a.feat25, a.feat26, a.feat27, a.feat29, a.feat30, a.feat31 {margin-right: 24px;}
	#rssDivMob {display: none;}*/
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) (**** THIRD RESIZE ****) */
@media only screen and (max-width: 479px) {

	#header {width: 300px;margin: auto;}
	.strapline {display: none;}
	.innerWrapper, #footer {width: 300px;}
	a.halfPage { clear: both; width: 300px; height: 120px; background-position: center -15px; font-size: 1.8em; line-height: 200px;}
	.alpha {margin-right: 0;margin-bottom: 20px;}
	
	a.transButton {
	width: 284px;
	height: 60px;
	margin-top: 60px;
	font-size: 1.8em;
	line-height: 60px;
	}
	
	.formWrapper { width: 280px;}
	.formWrapper p input { width: 260px; }
	.footerOne, .footerTwo, .footerThree { clear: both; width: 300px; margin: 0 0 20px 0; border: none; }
	.footerThree ul { padding-left: 0;}	
	
	/*.maincolumn {width: 300px;}
	a.feat {width: 140px; height: 140px; margin-bottom: 20px; background-size:280px 140px; background-position: 0 0;}
	a.feat:hover {background-position: -140px 0;}
	a.feat1, a.feat3, a.feat5, a.feat7, a.feat9, a.feat11, a.feat13, a.feat15, a.feat17, a.feat19, .feat21, .feat23, .feat25, .feat27, .feat29 {margin-right:20px}
	a.feat2, a.feat4, a.feat6, a.feat8, a.feat10, a.feat12, a.feat14, a.feat16, a.feat18, a.feat20, a.feat22, a.feat24, a.feat26, a.feat28, a.feat30 {margin-right: 0;}
	#rssDiv {display: none;}
	#rssDivMob {float: left;display:inline ;margin-bottom: 20px;border-left: 1px solid #a0c80a;padding-left: 10px;}*/
	
}