/*
display-preferences.css
Enables user customisation of various presentational aspects of the website.
*/

#display-preferences {padding:15px;}
#preview {
    padding:16px;
}
#settings {
    float:left;
    width:43%;
}
#preview-container {
    float:right;
    width:57%;
}

/* Font size
-------------------------------------------------------------- */
/* body element */
body.dp-fontsize-1 {font-size:14px !important;}
body.dp-fontsize-2 {font-size:16px !important;} /* default */
body.dp-fontsize-3 {font-size:18px !important;}
body.dp-fontsize-4 {font-size:24px !important;}

/* other elements */
body .dp-fontsize-1 {font-size:14px !important;}
body .dp-fontsize-2 {font-size:16px !important;} /* Default */
body .dp-fontsize-3 {font-size:18px !important;}
body .dp-fontsize-4 {font-size:24px !important;}

/* Line height
-------------------------------------------------------------- */
.dp-lineheight-1 {line-height:1.3 !important;}
.dp-lineheight-2 {line-height:1.5 !important;} /* Default */
.dp-lineheight-3 {line-height:1.8 !important;}
.dp-lineheight-4 {line-height:2 !important;}

/* Word spacing
-------------------------------------------------------------- */
.dp-wordspacing-1 {word-spacing:normal !important;} /* Default */
.dp-wordspacing-2 {word-spacing:0.2em !important;}
.dp-wordspacing-3 {word-spacing:0.4em !important;}

/* Font family
-------------------------------------------------------------- */
.dp-fontfamily-1 {font-family:Arial, Helvetica, sans-serif !important;}
.dp-fontfamily-2 {font-family:"Comic Sans MS", cursive !important;}
.dp-fontfamily-3 {font-family:Georgia, "Times New Roman", serif !important;} /* Default */
.dp-fontfamily-4 {font-family:Verdana, "Vera Sans", sans-serif !important;}

/* Contrasts
-------------------------------------------------------------- */
.dp-contrast-1 {} /* Default */

.dp-contrast-2 .m.theme-2,
.dp-contrast-2 .theme-2 .tabs .sel {background-color:#447e8f;}
.dp-contrast-2 .m.theme-4,
.dp-contrast-2.theme-4 .tabs .sel {background-color:#b75f17;}
.dp-contrast-2.theme-2 .tabs {border-bottom-color:#447e8f;}
.dp-contrast-2.theme-4 .tabs {border-bottom-color:#b75f17;}
.dp-contrast-2 .m-h {background:rgba(0,0,0,0.8);}
.dp-contrast-2.theme-1 #breadcrumbs > a {
	color:#000;
}
.dp-contrast-2.theme-2 #breadcrumbs > a {
	background-color:#447e8f;
	background-image:url(/gui/i/bc-t2-c2.png);
}
.dp-contrast-2.theme-2 #breadcrumbs > a span {background:#447e8f;}
.dp-contrast-2.theme-4 #breadcrumbs > a {
	background-color:#b75f17;
	background-image:url(/gui/i/bc-t4-c2.png);
}
.dp-contrast-2.theme-4 #breadcrumbs > a span {background:#b75f17;}

body.dp-contrast-3,
.dp-contrast-3 input,
.dp-contrast-3 textarea {color:#000;}
.dp-contrast-3 input:-moz-placeholder,
.dp-contrast-3 textarea:-moz-placeholder {color:#4c4c4c;}
.dp-contrast-3 input::-webkit-input-placeholder,
.dp-contrast-3 textarea::-webkit-input-placeholder {color:#4c4c4c;}
.dp-contrast-3 input.placeholder,
.dp-contrast-3 textarea.placeholder {color:#4c4c4c;}
.dp-contrast-3 #header #nav-main > ul > li > a {color:#000;}
.dp-contrast-3 .m.theme-2,
.dp-contrast-3.theme-2 .tabs .sel {background-color:#325f6c;}
.dp-contrast-3 .m.theme-3,
.dp-contrast-3.theme-3 .tabs .sel {background-color:#a13128;}
.dp-contrast-3 .m.theme-4,
.dp-contrast-3.theme-4 .tabs .sel {background-color:#8b460f;}
.dp-contrast-3.theme-2 .tabs {border-bottom-color:#325f6c;}
.dp-contrast-3.theme-3 .tabs {border-bottom-color:#a13128;}
.dp-contrast-3.theme-4 .tabs {border-bottom-color:#8b460f;}
.dp-contrast-3.theme-1 #breadcrumbs > a {
	color:#000;
}
.dp-contrast-3.theme-2 #breadcrumbs > a {
	background-color:#325f6c;
	background-image:url(/gui/i/bc-t2-c3.png);
}
.dp-contrast-3.theme-2 #breadcrumbs > a span {background:#325f6c;}
.dp-contrast-3.theme-3 #breadcrumbs > a {
	background-color:#a13128;
	background-image:url(/gui/i/bc-t3-c3.png);
}
.dp-contrast-3.theme-3 #breadcrumbs > a span {background:#a13128;}
.dp-contrast-3.theme-4 #breadcrumbs > a {
	background-color:#8b460f;
	background-image:url(/gui/i/bc-t4-c3.png);
}
.dp-contrast-3.theme-4 #breadcrumbs > a span {background:#8b460f;}
.dp-contrast-3 .m-h {background:#000;}

/* Narrower windows
-------------------------------------------------------------- */
@media screen and (max-width:980px) {

	#display-preferences .col {
		float:none;
		width:100%;
		margin-bottom:12px;
		padding:0;
	}
	#display-preferences .row {
		margin-bottom:16px;
		padding-bottom:0;
	}
	#display-preferences .small,
	#display-preferences .medium,
	#display-preferences .large {width:100%;}
	#display-preferences .submit-area {margin-top:16px;}

}

@media screen and (max-width:660px) {

	#preview {
		margin:0 -15px;
		padding:0;
	}
	#settings,
	#preview-container {
	    float:none;
	    width:auto;
	}

}