@import "scss/_allvariables"; /*start here and set the default values for all the variables*/
@import "scss/_header";
@import "scss/_footer";
@import "scss/_pagetypes";
@import "scss/editorstyles";
@import "scss/_sliders";
@import "scss/_webkitCustoms";
/* Important note: unlike some other Xerte themes this theme has been developed using sass and scss files */
/*You should not edit the .css files directly or change values directly unless you wish to override something*/
/*Use SASS and the file in the scss folder name _allvariables.scss to start any customisation*/

body {
	background:$bodybackgroundcolor;
	color:$mainfontcolour;
	font-family: $mainfonts;
}

.cke_editable {
	background: $bodybackgroundcolor;
}

/******Fonts******/
.ui-button .ui-button-text {
	font-family: $mainfonts;
}
/*Note: these font-sizes will be ignored when responsive text is on*/
p{
	font-size:1.1em;
	color:$mainfontcolour;
}
h1 {
	font-size:	1em;
	margin:		0;
}
h2 {
	font-size:	1.2em;
	margin:		5px 0 0 0;
}
h3 {
	font-size:	1.2em;
	margin:		0;
}

a, .ui-widget-content a {color:$linkcolor;}
a:visited, .ui-widget-content a:visited {color:$linkvisited;}
a:hover, .ui-widget-content a:hover {color:$linkhover;}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br, .ui-corner-top, .ui-corner-left, .ui-corner-bl {
	border-radius: $smallroundedcorners;
}

input, select, textarea {
	background: $yellow;
	border: 1px solid $bordercolor;
	caret-color: $blackordarkest;
	color: $mainfontcolour;
}

#x_pageDiv span.x_glossary, #x_pageDiv span.x_glossary:link, #x_pageDiv span.x_glossary:visited {
	color: $linkcolor;
}
#x_pageDiv span.x_glossary:visited {
	color: $linkvisited;
}
#x_pageDiv span.x_glossary:hover, #x_pageDiv span.x_glossary:active {
	color: $linkhover;
}
#x_glossaryHover {
	color: $headerfontcolor;
	background: $blackordarkest;
	border-color: $bordercolor;
}

#x_mainHolder {
	background:$defaultpagebackground;
	border-top-right-radius:$largeroundedcorners;
	border-bottom-left-radius:$largeroundedcorners;
	border: none !important;/*remove this to restore the default border*/
}
#x_pageDiv {
	padding-top: $defaultpagepadding;
	padding-left: $defaultpagepadding;
	padding-right:$defaultpagepadding;
	padding-bottom:$defaultpagepadding;
}
#infoHolder{
	border-radius:$mediumroundedcorners;
}
.focusBorder {
	border-color: $darkestyellow;
}
.highlight {
	background-image: none;
}
.x_tooltip {
	border-radius: 0;
	background: $headerbackgroundcolor;
	color: $headerfontcolor;
}
/*****panel all pages with a panel*****/
.panel {
	border-radius: $mediumroundedcorners;
	background:$panelcolor;
	box-shadow: none;
	color:$mainfontcolour;
	border-color: $bordercolor;
}
.panelPage{
	padding:1%;
	color:$mainfontcolour;
}
/*****all images*****/
img {
	border-radius: $imageroundedcorners;
}
.fa-x-cross:before {
	color: $red;
}
.fa-x-tick:before {
	color: $green;
}
.alertBorder {
	border: 1px dashed $red;
}
/******lightboxes******/
.featherlight .featherlight-content {
	background-color: $panelcolor;
	border: 1px solid $bordercolor;
}
.featherlight .featherlight-close-icon {
	margin-top: 2px;
	margin-right: 2px;
	background-color: $panelcolor;
	color: $btntxtcolor;
	border: 1px solid $bordercolor;
}
.featherlight .featherlight-close-icon:hover, .featherlight .featherlight-close-icon:focus, .featherlight .featherlight-close-icon:active {
	background-color: $btntxtcolor;
	color: $panelcolor;
	border: 1px solid $btntxtcolor;
}
/******@media changes******/
@media (min-width: 1366px) {
	/*tablet and above css below here*/
	#x_mainHolder{
		max-width:100%;
		max-height:100%;
		margin:auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
	#x_mainHolder{
		max-width:100%;
		max-height:100%;
		margin:auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
}