/*
Colour Palette

- top menu item left/right border

BLUE -----
#4556a8 Bright blue
		- Breadcrumbs
		- links bottom right of page

#d9d9ff Very Light blue
		- Vert left menu item block
		- Horiz top nav bar nackground		
		
#D3DAED Greyer light blue
		- Nolonger used

#9898b0 line blue
		- Line around bottom and right Navigation options that contribute to button effect
				
#181b28 Very dark blue
		- default text color
		
#2f2c4d Background blue
		- background colour outside of page content


GOLD -----
		
#E0CB22 Logo yellow 	- Not used, here as reference
#E6D820 Logo yellow 2	- Not used, here as reference
#FDE841 Logo yellow 3	- Not used, here as reference

#fef4be  Subdued Gold aka light Gold throughout CSS
		- top Horiz Nav Vert menu items block for hover
		- left Vert menu item block for hover
		- dynamic highlights e.g. row in list

OTHERS ---

#FAD4D0 A pale pink
		- used to highlight fields in forms that failed validation

#6f0000 line maroon
			- used to line top and bottom of horizontal navigation bar and footer
			- Trial as heading color


TODO: Is there a CSS mechanism for setting up constants for these
colours and then just using constant name instead of value each time?

*/

/********************************************************************
GENERAL
********************************************************************/

/*
Everything
- set default color for font to very dark blue
*/
* { 
	margin: 					0;
	padding: 					0; 

	color:						#181b28;
}

/*
body
- set a subtle background colour
- set default font

TODO: check hue of background-color
*/
html {
	background-color:			#2f2c4d; /* #6f0000; */
	
	/*
	To force display of a vertical scroll on every page,
	even when content doesn't require it. Tested on FF,
	IE 8, and Chrome
	*/
	overflow-y:					scroll;
}

body {	
	font: 						.70em/1.5em  Verdana, Tahoma, Helvetica, sans-serif;
}

/*
links (& Breadcrumbs)
- Bright blue with no underlines
- Remove that nasty dashed line around links
*/
a { 
	color:						#4556a8;
	text-decoration: 			none;
	outline-style:				none;
}

/*
- default spacings for text
*/
p {
	margin-bottom: 				10px;
}

/*
- Specific setting for headings
*/

h1 { 
	font: 						1.5em/1.5em  Verdana, Tahoma, Helvetica, sans-serif;
	color:						#6f0000;
	font-weight:				700;
	margin-bottom: 				7px;
}

h2{ 
	font: 						1.2em/1.5em  Verdana, Tahoma, Helvetica, sans-serif;
	font-weight:				700;
	margin-bottom: 				5px;
}

h3{ 
	font: 						1em/1.4em  Verdana, Tahoma, Helvetica, sans-serif;
	font-weight:				600;
	margin-bottom: 				6px;
}

h4{ 
	font: 						1em/1.4em  Verdana, Tahoma, Helvetica, sans-serif;
	font-weight:				600;
	margin-bottom: 				2px;
}

/*
- use disc for ALL bullet points in unordered list
*/
ul li {
	list-style-type:			disc;

}

/********************************************************************
Styles to use alongside Formats
********************************************************************/

.noSpacingBelow {
	margin-bottom:				0px;
}

.maroon {
	color:						#6f0000;
}

.noSpaceMaroon{
	margin-bottom:				0px;
	color:						#6f0000;
}


/********************************************************************
****                         div formating                       ****
********************************************************************/

/********************************************************************
WRAP - top level div
********************************************************************/

/*
wrap (div)
- fix width of layout here to 900px

TODO: what is margin setting for?
TODO: what is height 100% 
*/
#wrap {
	width:						900px;
	height:						100%;
	margin:						0 auto;
	background-color:			#FFFFFF;
}

/********************************************************************
CONTENT-WRAP
********************************************************************/

#content-wrap {	
}

/********************************************************************
HEADER
********************************************************************/

/*
- margin-top to pull banner down from screen edge
- website banner
*/
#header {
	margin:						10px 0px 0px 0px;
	
	position:					relative;
	
	height:						120px;
	background:					#FFFFFF url(Banner_Hands.jpg);
}

/********************************************************************
TOPNAV - top level navigation bar
********************************************************************/

/*
- background: specifies the image used to give gradient
*/
#topnav-wrap {
	position:					relative;
	
	border-top:					1px solid #6f0000;
	border-bottom:				1px solid #6f0000;
	
	/* fix height for gradient */
	height:						24px;
	
	/* try solid colour instead of gradient */
	/*
	background:					#FFFFFF url(topnav_gradient.jpg) repeat-x;
	*/
	/*
d9d9ff Very Light blue
		- left menu item block
		- footer top border
				
#181b28 Very dark blue
		- default text color
	*/
	background-color:			#d9d9ff;
}

#topnav {
	position:					relative;
	
	/* TODO: this is temp fix to put menu in centre ... need to centre it properly */
	padding-left:				23px;
}

/*
UL in the topnav
*/
#topnav ul {
	/* give a gold edge either side of the whole UL */
	border-left:				1px solid #FFFFFF;
	border-right:				1px solid #d9d9ff;
	
	/* float the UL so that it contains it's floated LI items */
	float:						left;
	
	/* remove ANY bullet points from menus as don't want them in main menu */
	list-style-type:			none;
}

/*
LI in the topnav
- path is UL>LI
*/
#topnav ul li {
	position:					relative;
	float:						left;
	
	/* use bold for menus */
	font-weight:				bold;
	
	/* remove ANY bullet points from menus as don't want them in main menu */
	list-style-type:			none;
}

/* 
LI A is for each entry in the TOP menu items
- path is UL>LI>A
*/		 
#topnav ul li a {
	float:						left;
	
	/* display style block makes other formatting apply to a block rather than just the link */
	display:					block;
	
	/* white text */
	color: 						#181b28;
	
	padding:					4px 10px 4px 10px;

	
	/* fix width */
	width:						100px;
	
	text-align:					center;
	
	/* gold border to left & right */
	border-style:				solid;
	border-top:					0px;
	border-bottom:				0px;
	border-left:				1px solid #9898b0;
	border-right:				1px solid #FFFFFF;
}

/*
LI UL is for a level 1 sub menu (full path is UL>LI>UL)
- path is UL>LI>UL
*/
#topnav ul li ul {
	/* Hidden until hover */
	visibility:					hidden; 
	
	/* Position control ... */
	position:					absolute;
	top:						2.5em; 
	left:						0; 
	height:						0;
	
	/* TODO: not sure */
	overflow:					hidden;
	
	/* gold border between each menu item in dropdown */
/*	border-bottom:				2px solid #FFFFFF; */
}

/* 
In following CSS rules, old IE browsers needs a different structure to other
browsers when setting up hover handling
- first line style for IE7 and non-IE browsers
- second line for IE5.5 and IE6
*/

/* 
Hover over a LI in top UL
- path is UL>LI>A
*/
#topnav ul li:hover a,
#topnav ul li a:hover {
	/* font is very dark blue */
	color:						#181b28;
	
	/* background is light gold */
	background:					#fef4be;

}

/*
When hover over LI in top UL, format for the level 1 UL (drop down)
- path is UL>LI>UL
- make it visible (the drop down effect)
*/
#topnav ul li:hover ul,
#topnav ul li a:hover ul {
	visibility:					visible; 

	background:					#d9d9ff;
	
				
	height:						auto;
	/* same as height of topnav ul */
	top:						25px;
	/* top nav UL has 1px border but dropdown has 2px so need to left shift by 1 *///
//	left:						-1px;
	
	overflow:					visible;
	
/*	border-top:					1px solid #9898b0;
	border-bottom:					1px solid #9898b0;
	border-left:					1px solid #9898b0;
	border-right:					1px solid #9898b0;
*/
}

/*
When hover over LI in top UL, format for LI/A in level 1 UL
- path is UL>LI>UL>LI>A
*/
#topnav ul li:hover ul li a,
#topnav ul li a:hover ul li a {
	display:					block; 
	background:					transparent; 
	height:						auto; 
	
	/* nicely spaced out */
	line-height:				1.2em;
	
	/* text is very dark blue */
	color:						#181b28;
	
	/* border between menu items */
	
	
	margin-bottom:				1px;
	border-top:					1px solid #ffffff;
	border-bottom:				1px solid #9898b0;

/*	border-top:					1px solid #ffffff;
	border-bottom:					1px solid #ffffff;*/
}

/* yuck */
* html #topnav li a:hover ul li a {
width:10em; w\idth:9em; /* hack for IE5.5 */
}

/* 
When hover over LI A in submenu
- path is UL>LI>UL>LI>A
*/
#topnav ul li:hover ul li a:hover,
#topnav ul li a:hover ul li a:hover {	
	/* background is light gold */
	background:					#fef4be;
}

/* no flyouts in our dropdowns thank you very much */

/********************************************************************
BREADCRUMBS
********************************************************************/

#breadcrumbs {
	margin:						5px 5px 0px 5px;
}

/********************************************************************
LEFTCOL
********************************************************************/

/* 
NOTE:
Fixing width of this div makes it hard to use padding ... the margin
spaces this from other divs but if we set padding to further spread
content, then div grows (unless you shrink it same amount). What
seems to be best approach is to divs to wrap elements inside this div
and apply margins when required 
*/
#leftcol {
	/* fix width of leftcol here */
	width:						190px;
	
	float:						left;
	margin:						5px 5px 5px 5px;
	padding:					0px 0px 0px 0px;
}

/*
top UL for menu in leftcol
*/
#leftcol ul {
	/* spacing around it */
	
//	margin:						5px 10px 10px 5px;
	margin:						0px 10px 5px 0px;
	border-top:					1px solid #6f0000;


}

/*
LI items in the leftcol menu
- path UL>LI
*/
#leftcol ul li {
	/* no bullet points */
	list-style-type:			none;
	
	/* space out */
	margin-bottom:				1px;
	margin-top				1px;
	
	/* bold */
	font-weight:				bold;
}

/*
A links in leftcol menu
- path is UL>LI>A
*/
#leftcol ul li a {
	/* display block applies style to a 'cell' effect, rather than tight to word */
	display:					block;
	
	/* spacing within the block */
	padding:					2px 5px 2px 10px;
	
	/* color is light blue with very dark blue font */
	background:					#d9d9ff;
	color:						#181b28;
	
	min-height:					18px;
	
	/* gold edge to left */
	border-left:					3px solid #6f0000;
	border-top:					1px solid #ffffff;
	border-bottom:					1px solid #9898b0;
	border-right:					1px solid #9898b0;
}

/*
Hover over links in leftcol menu
- path is UL>LI>A
*/
#leftcol ul li a:hover {
	/* background is light gold */
	background:					#fef4be;
}

.leftColDiv {
	margin:						0px 15px 5px 0px;
}


/********************************************************************
MAIN
********************************************************************/

#main {
	float:						left;
	padding:					0;
	width:						500px;
	margin:						5px 0px 5px 0px;

	/* to ensure lists in the main text are inside the div */
	list-style-position:		inside;

	/* 
	specify a minimum height just to avoid overly short pages all three lines
	are necessary to work on variety of browsers
	
	Note: Basically when you specify a height to a div, ie6 will take it as 
	minimum height. But ie7, firefox, chrome and modern browser will treat as
	height. So here is a simple way to have minimum height to all web browser.
	*/
	min-height:					300px;
	height:						auto!important;
	height:						300px;
}

/*
Because of top level reset of margin (see * rule) have to specify a left margin
here for indentation in lists
*/
#main ul {
	margin:						0px 0px 0px 10px;
}

#main ol {
	margin:						0px 0px 0px 8px;
}

/*
To give hanging indents in lists ...
*/
#main li {
	padding-left:				30px;
	text-indent:				-30px;
}

/********************************************************************
RIGHT COLUMN
********************************************************************/

#rightcol {
	float:						right;
	width:						190px;
	margin:						5px 5px 5px 5px;
	padding:					0px 0px 0px 0px;
}

.rightColDiv {
	border:						1px solid #D9D9FF;

	/*
	spacing outside a box in right col
	-  5px top    to give vert spacing
	- 10px left   to give nice gap between main body
	*/
	margin:						0px 0px 5px 10px;
	
	/*
	spacing inside a box ...
	-  5px L & R  to give nice inner spacing
	*/
	padding:					0px 5px 0px 5px;
}

/********************************************************************
FOOTER
********************************************************************/

#footer { 
	/* for div floating ... need to reset for float of sub divs to work */
	clear:						both;
	
	height: 					25px;
	
	/* line across page */
	border-top:					1px solid #6f0000;
}

#footer-left {
	float:						left;
	margin-left:				4px;
}

#footer-right {
	float:						right;
	margin-right:				4px;
}

/********************************************************************
SPECIFIC CONTENT FORMATTING
********************************************************************/

/********************************************************************
Simple Table formatting

Class simpleTable should be applied to all tables to give
consistent appearance, especially to fix vertical spacing.
********************************************************************/

.simpleTable {
	width:						400px;
	
	/* standard 10px spacing below like P */
	margin:						0px 0px 10px 0px;
}

/* remove padding within cells */
.simpleTable td {
	padding:					0px 0px 0px 0px;
}

/* remove default spacing below p in cells */
.simpleTable td p {
	margin-bottom:				0px;
}

/********************************************************************
Staff Vacancy List
********************************************************************/

.staffVacancyListTable {
	/* to remove any default margins/padding from table formatting */
	border-collapse:			separate;
	border-spacing:				0px 0px;
	
	/* border for top of first row */
	border-top:					1px solid #d9d9ff;
	
	width:						100%;
	
	/* give some vertical space below table to avoid it hitting top of footer */
	padding:					0px 0px 20px 0px;
}

.staffVacancyListTableHeader {
	font-weight:				bold;
}

.staffVacancyListTable tbody tr td {
	border-bottom:				1px solid #d9d9ff;
}

/* when over a row for entry, highlight color and change cursor */
.staffVacancyListEntry:hover {
	background-color:			#fef4be;
	cursor:						pointer;
}


/********************************************************************
Staff Vacancy Details
********************************************************************/

/*
*/
.staffVacancyTable {
	width:						500px;
	margin-bottom:				20px;
	
	background:					#F8F8F8;
	border-bottom:				1px solid #d9d9ff;
}

/*
Text align for every row
*/
.staffVacancyTable tr {
	vertical-align:				top;
}

/*
Padding for every cell 
*/
.staffVacancyTable td {
	padding:					2px 2px 2px 2px;
}

/*
Want some spacing between p
*/
.staffVacancyTable td p {
	margin-bottom:				5px;
}

/*
Highlight first row as that contains Role Title
*/
.staffVacancyTableRow1 {
	background:					#d9d9ff;
	font-weight:				bold;
}

/*
Set width of first column for all staff vacancy tables
*/
.staffVacancyTableCol1 {
	width:						30%;
}


/********************************************************************
Staff Vacancy Mini List on home page
********************************************************************/

.staffVacancyMiniList {
	padding-bottom:				3px;
}

.staffVacancyMiniListHeading {
	font-weight:				bold;
	border-bottom:				1px solid #d9d9ff;
}

.staffVacancyMiniListHeading a {
	color:						#000000;
}

.staffVacancyMiniListEntry {
	line-height:				100%;
	margin:						2px 0px 4px 0px;
}

/********************************************************************
Section Page
- generated content is a two column table, id sectionPageTable
- generated by Ditto
********************************************************************/

#sectionPageTable {
	/* to remove any default margins/padding from table formatting */
	border-collapse:			separate;
	border-spacing:				0px 0px;
	
	/* border for top of first row */
	border-top:					1px solid #d9d9ff;
	
	/* ensure table fills page width */
	width:						100%;
	
	/* give some vertical space below table to avoid it hitting top of footer */
	padding:					0px 0px 20px 0px;
}

#sectionPageTable tr {
}

#sectionPageTable td {
	padding:					3px 0px 3px 0px;
	vertical-align:				top;

	/* border between each row */
	border-bottom:				1px solid #d9d9ff;
}

/*
To try to ensure that column 1 is wide enough to show page titles 
WITHOUT wrapping, set it's width to 50%. Also ensures consistent
appearance of all the section page tables :)

TODO: is a class more appropriate?
*/
#sectionPageEntryColumn1 {
	width:						40%;
}

/********************************************************************
Newsletter page
- generated content is a two column table, id newsletterTable
- generated by FileDownload
********************************************************************/

#newslettersTable {
	/* to remove any default margins/padding from table formatting */
	border-collapse:			separate;
	border-spacing:				0px 0px;
	
	/* border for top of first row */
	border-top:					1px solid #d9d9ff;
	
	/* narrow content, so only need about 60% */
	width:						60%;
	
	/* give some vertical space below table to avoid it hitting top of footer */
	padding:					0px 0px 20px 0px;
}

#newslettersTable th {
	/* border between each row */
	border-bottom:				1px solid #d9d9ff;
}

/* apply same padding and alignment to TH aswell as TD */
#newslettersTable th,td {
	padding:					3px 0px 3px 0px;
	vertical-align:				center;
}

#newslettersTable td {
	/* border between each row */
	border-bottom:				1px solid #d9d9ff;
}

#newslettersTable_SizeColumn {
	text-align:					right;
}

/********************************************************************
Search Page
********************************************************************/

#ajaxSearch_form {
	/* To clearly indicate form fields use a grey background around them */
	background-color:			#f0f0f0;
	padding:					5px 5px 5px 5px;
	margin:						0px 0px 0px 0px;
}

#ajaxSearch_input {
	/* light blue border for form controls */
	border:						1px solid #d9d9ff;
	
	/* used to line up with submit button */
	padding:					1px 1px 1px 1px;
	width:						200px;
}

#ajaxSearch_submit {
	/* light blue border for form controls */
	border:						1px solid #d9d9ff;
	
	/* due to differences between browser display, specify width absolutely */
	width:						32px;
	
	/* TODO: height also different IE7/Firefox but not an obvious fix to that */
	
}

/*
When hover over submit button in search form, light gold
*/
#ajaxSearch_submit:hover {
	background-color:			#fef4be;
}

/*
TODO: need to fix alignment of the search close icon and the progress ind
vertical-align: middle puts it below middle!
*/
#searchClose {
	margin-bottom:				-3px;
}

#indicator {
	margin-bottom:				-3px;
}

/*
TODO: can't work out what sets the large margin between results, which
are of this class:

margin:						-10px 0px 0px 0px;

Fixed in MODx 1.0.3 :)
*/
.AS_ajax_result {
	/* spacing around result divs needs a tweak */
	margin:						10px 0px 10px 0px;
	
	/* then line between each one is spaced nicely */
	border-bottom:				1px solid #C9D2FF;
}

/*
Color for search result highlighting - light gold
*/
.ajaxSearch_highlight {
	background-color:			#fef4be;
}

/********************************************************************
General Query Form
********************************************************************/

/* For required fields that have nothing in them */
.required {
	background-color:			#FAD4D0;
}

/* For fields with invalid data */
.invalid {
	background-color:			#FAD4D0;
}

#generalQueryForm {
	/* To clearly indicate form fields use a grey background around them */
	background-color:			#f0f0f0;
	padding:					5px 5px 5px 5px;
	margin:						0px 0px 10px 0px;

	/*
	to put submit object in center ... set text-align 
	for whole form to be center
	*/
	text-align:					center;
}

#generalQueryForm table {
	border-collapse:			separate;
	border-spacing:				0px 0px;
	width:						100%;
	
	/*
	And, to left align everything in the table need to
	reset text-align to left to override the text-align
	above
	*/
	text-align:					left;
}

#generalQueryForm tr {
	vertical-align:				top;
}

#generalQueryForm td {
	padding:					0px 0px 5px 0px;
}

/*
TODO: This applied to all such elements!!!
*/
#generalQueryForm input,select,textarea,img {
//	border:						1px solid #d9d9ff;
}

/*
So, have to do it one by one
- border is light blue
- input fields have 1px padding to give same height as other controls and it looks neater anyway

TODO: There MUST be a way to avoid having to do this!
*/
#generalQueryForm_label {
	width:						200px;
}

#generalQueryForm_name {
	border:						1px solid #d9d9ff;
	padding:					1px 1px 1px 1px;
	width:						350px;
}

#generalQueryForm_email {
	border:						1px solid #d9d9ff;
	padding:					1px 1px 1px 1px;
	width:						350px;
}

#generalQueryForm_phone {
	border:						1px solid #d9d9ff;
	padding:					1px 1px 1px 1px;
	width:						350px;
}

#generalQueryForm_topic {
	border:						1px solid #d9d9ff;
	/* formatting of combo box control means it requires an extra 4px width to line up with input controls */
	width:						354px;
}

/*
TODO: IE does not get the margin right
*/
#generalQueryForm_query {
	border:						1px solid #d9d9ff;
	padding:					1px 1px 1px 1px;
	width:						350px;
	/* formatting of textarea control means have to pull up the margin at the bottom to give consistent spacing */
	margin:						0px 0px -2px 0px;
}

#generalQueryForm_captcha {
	border:						1px solid #d9d9ff;
	/* formatting of image control means have to pull up the margin at the bottom to give consistent spacing */
	margin:						0px 0px -3px 0px;
}

#generalQueryForm_vericode {
	border:						1px solid #d9d9ff;
	padding:					1px 1px 1px 1px;
	/* formatting of input control for code needs to be specific width to line up with CAPTCHA image */	
	width:						146px;
}

#generalQueryForm_submit {
	border:						1px solid #d9d9ff;
	/* make submit button an arbitrary 105px */
	width:						150px;
	margin:						10px 0px 10px 0px;
	background-color:			#d9d9ff;
}

/*
When hover over submit button in form, light gold
*/
#generalQueryForm_submit:hover {
	background-color:			#fef4be;
}

/********************************************************************
School Events & News Items Mini View
********************************************************************/

/*
For Mini view on home page
*/

.newsAndEventMiniViewHeading {
	font-weight:				bold;
	margin-bottom:				2px;
}

.newsAndEventMiniView {
	margin:						0px 0px 5px 0px;
	border-top:					1px solid #d9d9ff;
}

.newsAndEventMiniViewDate {
	font-size:					80%;
	line-height:				80%;
	padding:					2px 0px 1px 0px;
}

.newsAndEventMiniViewTitle {
	clear:						both;
	text-align:					left;
	line-height:				100%;
	padding:					2px 0px 2px 0px;
	margin:						0px 0px 0px 0px;
}

/*
For full view on Events page
*/

.schoolEventHeadline {
	padding:					0px 0px 0px 0px;
	margin:						5px 0px 0px 0px;
	border-top:					1px solid #d9d9ff;
	
//	background-color:			#f0f0f0;
}

.schoolEventHeadlineDate {
	padding:					0px 0px 0px 0px;
	margin:						0px 0px 0px 0px;
	line-height:				100%;
}

.schoolEventHeadlineTitle {
	padding:					0px 0px 0px 0px;
	margin:						0px 0px 0px 0px;
}

/********************************************************************
News - for news item list of teasers
********************************************************************/

.newsItemTeaser {
	padding:					0px 0px 0px 0px;
	margin:						5px 0px 2px 0px;
	border-top:					1px solid #d9d9ff;
	
//	background-color:			#f0f0f0;
}

.newsItemTeaser table {
	padding:					0px 0px 0px 0px;
	margin:						0px 0px 0px 0px;
	
	/* to remove any default margins/padding from table formatting */
	border-collapse:			separate;
	border-spacing:				0px 0px;
}

.newsItemTeaserTitleAndDate {
	padding:					0px 0px 0px 0px;
	margin:						0px 0px 0px 0px;
	line-height:				100%;
}

.newsItemTeaserTitle {
	padding:					0px 0px 0px 0px;
	margin:						0px 0px 0px 0px;
}

.newsItemTeaserDate {
	padding:					0px 0px 0px 0px;
}

.newsItemTeaserSummary {
	padding:					0px 0px 3px 0px;
}

/*
For each entry in the list of news item teasers
*/
#newsItemTeaserX {
	padding:					0px 0px 0px 0px;
	
	/* line below each entry */
	border-bottom:				1px solid #d9d9ff;
}

/*
Each entry is laid out in a table
*/
#newsItemTeaser table {
	/* to remove any default margins/padding from table formatting */
	border-collapse:			separate;
	border-spacing:				0px 0px;
}

/*
Reset the padding to give compact format
*/
#newsItemTeaserTitle {
	padding:					0px 0px 0px 0px;
}

/*
Reset the padding to give compact format
*/
#newsItemTeaserDate {
	padding:					0px 0px 0px 0px;
}

/*
Reset the padding to give compact format, exc padding at bottom
*/
#newsItemTeaserSummary {
	/* a bit of spacing between text of summary */
	padding:					0px 0px 3px 0px;
}


/********************************************************************
Image formatting
********************************************************************/

.rightAlignedImage {
	margin-left:        10px;
}

/********************************************************************
Chunks in Left Col
********************************************************************/

.leftColImage {
	/* force to fill width of containing div */
	width:						100%;
	margin:						0px 0px 10px 0px;
}