/*

Global CSS for ZyNet applications.

Comments starting with a + sign should be retained by the CSS compressor.

*/

/*-------------------------------------------------------------------------*/
/*+ Normalisation based on Yahoo UI library: http://developer.yahoo.net/ */
/* Reset/remove various layout attributes to create a standard simple default state to work from */
/* This is all done using our private class rather than globally, so it doesn't interfere with the styles on edited pages */

.zyStyle {
  color:		black;
}

/* No margins or padding */
body.zyStyle,div.zyStyle,dl.zyStyle,dt.zyStyle,dd.zyStyle,ul.zyStyle,ol.zyStyle,li.zyStyle,h1.zyStyle,h2.zyStyle,h3.zyStyle,h4.zyStyle,h5.zyStyle,h6.zyStyle,pre.zyStyle,form.zyStyle,fieldset.zyStyle,input.zyStyle,p.zyStyle,blockquote.zyStyle,th.zyStyle,td.zyStyle {
  margin:  		0px;
  padding: 		0px;
}

/* Simple table borders */
table.zyStyle {
  border-collapse:  	collapse;
  border-spacing:   	0;
}

/* Remove unwanted borders */
fieldset.zyStyle,img.zyStyle {
  border:  		0;
}

/* Don't emphasise anything by default */
address.zyStyle,caption.zyStyle,cite.zyStyle,code.zyStyle,dfn.zyStyle,em.zyStyle,strong.zyStyle,th.zyStyle,var.zyStyle {
  font-style:  		normal;
  font-weight: 		normal;
}

/* No bullets etc on lists */
ol.zyStyle,ul.zyStyle {
  list-style:  		none;
}

/* Don't center labels */
caption.zyStyle,th.zyStyle {
  text-align:		left;
}

/* Headings the same size as everything else */
h1.zyStyle,h2.zyStyle,h3.zyStyle,h4.zyStyle,h5.zyStyle,h6.zyStyle {
  font-size:  		100%;
}

/* No auto-quotes */
q.zyStyle:before, q.zyStyle:after {
  content:  		'';
}

/* Standardise font face and sizes across browsers.
   All font sizing elsewhere should be done in percentages.
   Use this table to convert a pixel size to a percentage to use.
   	 px    %
     10   77  
     11   85  
     12   92  
     13  100  
     14  107  
     15  114  
     16  122  
     17  129  
     18  136  
     19  144  
     20  152  
     21  159  
     22  167  
     23  174  
     24  182  
     25  189  
     26  197  
*/
body.zyStyle,div.zyStyle {
  font:			13px verdana,arial,helvetica,clean,sans-serif;
}

/* Tables don't mess up fonts */
table.zyStyle {
  font-size:  		inherit;
}

/* Tidy up input fonts for Safari */
select.zyStyle, input.zyStyle, textarea.zyStyle {
  font:  		99% verdana,arial,helvetica,clean,sans-serif;
}

/* Make grey out in firefox more consistent - IE only used this CSS in standards mode */
select[disabled].zyStyle, input[disabled].zyStyle, textarea[disabled].zyStyle {
 background-color: #ece9d8;
}

a.zyDisabled {
 color: gray;
}

select.zyStyle { width: 150px; }

/* Up-size monospaced fonts a bit so they look right */
pre.zyStyle, code.zyStyle {
  font:        		115% monospace;
}

/* Make the line spacing sensible and related to the font size so things scale nicely */
div.zyStyle,body.zyStyle * {
  line-height:  	1.22em;
}

/*+ End of Yahoo based normalisation */

/* Opera Normalisations */

/* Opera have 2px margin left and right of images */

img.zyStyle {
  margin: 0px;
}

/* don't colour or highlight links - this should set color:inherit but that doesn't work in IE */
.zyStyle:link, .zyStyle:active, .zyStyle:visited {
  color:		black;
  text-decoration: 	none;
  outline: 		0; /* sort out firefox outlines? Normalise as IE doesn't do them */
}


/*-------------------------------------------------------------------------*/
/* zybutton styles which control the appearance of buttons in various states
   Each button can be in one of four states: normal, hover, pressed or disabled.
*/

/* the anchor that encloses the button (so it can be clicked) */
.zybuttona, .zybuttona:link, .zybuttona:visited {
  text-decoration:  	none;
  background-image: 	url(/static/_v20100212/images/button/normal.gif);
  background-color: 	#c0d3eb;
  background-repeat: 	repeat-x;
  color:            	black;
  line-height:      	143%;
  font-weight:      	bold;
  
  padding:          	1px 4px;
  border:           	solid 1px #adafb2;
  white-space:      	nowrap;
}

/* changes when hovering over a button */
.zybuttona:hover {
  background-image: 	url(/static/_v20100212/images/button/hover.gif);
  background-color: 	#266d97;
  background-repeat: 	repeat-x;
  color:		#555;
}

/* changes when a button is pressed */
.zybuttona:active {
  background-image: 	url(/static/_v20100212/images/button/pressed.gif);
  background-color: 	#8bc612;
  background-repeat: 	repeat-x;
  color:            	#f70;
}

/* changes when a button is disabled */
.zybuttond, .zybuttond:link, .zybuttond:visited, .zybuttond:hover, .zybuttond:active {
  color:            	#ccc	;
  border-color:     	#999;
  background-image: 	url(/static/_v20100212/images/button/disabled.gif);
  background-color: 	#eee;
  background-repeat: 	repeat-x;
}

/* Deal with Mozilla bug 286368 - outline causes reflow */
.zybuttona:focus { 
  outline: 		0; 
  -moz-outline: 	 #adafb2 solid 2px;
  -moz-outline-offset: 	-2px;
}

div.zybspace {
  margin: 		0px 4px 4px 0px ;
  float: 		left;
  height: 		22px;
}

div.zyFMBBar {
  clear: 		both;
  height: 		24px;
}

/*-------------------------------------------------------------------------*/
/* our own bits and pieces */

/* warning boxes for the front page */
.zywarningbox {
  display:      	block;
  border:       	solid 4px #f00;
  color:        	black;
  background:  	 	#faa;
  position:     	absolute;
  left:         	10%;
  width:        	25%;
  padding:      	8px;
  z-index:      	100;
}

/* style for warning dialogues - mustn't set any absolute sizes or dojo can't work out how big they are */
.zywarningdialogue {
  border:       	solid 4px;
  border-color: 	#f00;
  color:        	black;
  background:   	#faa;
  padding:      	8px;
  text-align:   	center;
}

/* style for referring to buttons in text so you can talk about them */
.zybuttonref {
  font-weight:      	bold;
  white-space:      	nowrap;
}
span.zybuttonref:after {
  content: 		"]";
}
span.zybuttonref:before {
  content: 		"[";
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* Control Panel tabs */

/* Topbar tiling */
.zyCPtopbar { 
  background: 		url(/static/_v20100212/images/page/topbar-tile.png)  0 0 repeat-x ; 
}

/* normal tab */
.zyCPTabNormal {
  background-image:	none ; 
  padding: 		0px;
}

/* selected tab */
.zyCPTabSelected {
  background: 		url(/static/_v20100212/images/page/overtab-tile.png) 0 0 repeat-x ;
  padding: 		0px;
}

/* Tab Text */
.zyCPtexttab { 
  position: 		relative; top: 5px; font: 900 12px verdana 
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* General purpose tab set */

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

TD.zyTab { /* Applied to all tabs but not trailer */
  font-size:        	10px;
  font-weight: 		900;
  height:           	24px;
  margin:           	0px;
  white-space:      	nowrap;
  background:       	url(/static/_v20100212/images/dialog2/tab-bg.png) top repeat-x transparent; 
  padding:          	0px 15px 0px 15px;
  margin:           	0px;
  width:            	1%;
  cursor:           	pointer;
  color:            	#777;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #c6c6c6;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #c6c6c6;
}

TD.zyTab > A {
  color:            	#777;
  text-decoration: 	none;
}

TD.zyTabTrailer {
  background:       	url(/static/_v20100212/images/dialog2/tab-behind.png) top repeat-x transparent; 
  font-size:        	10px;
  margin:           	0px;
  border:            	0px;
  padding:          	0px;
  height:           	24px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #c6c6c6;
}

TD.zyTabSelected {
  cursor:           	default;
  color:            	black;
  background-color:	white;
  background-image: none;
  border-bottom-style: none;
}
TD.zyTabSelected > A {
  color:            	black;
  text-decoration: 	none;
}

TD.zyTabHighlighted {
  background:       	url(/static/_v20100212/images/dialog2/tab-bgover.png) top repeat-x transparent; 
  color:		green;
}

TD.zyTabHighlighted > A {
  color:		green;
  text-decoration: 	none;
}

div.zyTabContent {
  padding:		8px 0px;
  text-align: 		left;
  overflow:   		auto;
  outline:		none; /* Firefox outlines div areas with overflow: auto, so we have to remove this. */
			      /* http://shepherdweb.com/lab/2007/FirefoxOverflowBug/ */
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* 350 layout related code */

body.zyStyle {
  height:		100%;
  /* from 350.com site for fading background */
  color:		#1a1a1a;
  background:		url(/static/_v20100212/images/page/back.jpg) top repeat-x #ffffff;
}

div.zyShadowedPage {
  margin: 		0px auto;
  height: 		90%;
  width: 		90%;
  min-width: 		945px;
  background:       	white;
  border-right:		4px solid #EAEAEA; 
  border-bottom: 	4px solid #EAEAEA;
  overflow:		auto;
  position: 		relative;
}
div.zyShadowedPage2 {
  margin: 		0px auto;
  width: 		90%;
  min-width:		945px;
  background:       	white;
  border-right:		4px solid #EAEAEA; 
  border-bottom: 	4px solid #EAEAEA;
  /* overflow:		auto; */
  position: 		relative; 
  top:			0px;
}

div.zyFooter {
  margin: 		8px auto;
  width: 		90%;
}

a.zyFooter, p.zyFooter, .zyFooter:link, .zyFooter:active, .zyFooter:visited {
  text-align: 		center;
  font-size: 		85%;
  color:		#e8e8e8;
}

/* text that is "just text" and shouldn't have a special cursor - note zyLabel and zyLabelLeft etc have this themselves */
div.zyText, p.zyText, span.zyText, td.zyText {
  cursor:		default;
}

/* items that shouldn't wrap */
.nowrap {
  white-space: nowrap ;
}

/* Labels on forms on the control panel */

/* Dialogue control layout */

div.zyFormRow, div.zyShortFormRow, div.zyMediumFormRow, div.zyLongFormRow, div.zyGEFormRow {
  float: 		left;
  padding-top: 		3px;
  }

div.zyFormRow {
  width: 		250px;
  }

div.zyMediumFormRow {
  width: 		300px;
  }

div.zyShortFormRow {
  width: 		180px;
  }

div.zyGEFormRow {
  width: 		220px;
  }
/* Double Length form of zyFormRow - use with one zyLabelLeft and zyLongFormField */
div.zyLongFormRow {
  width: 		400px;
  }

div.zyFormHeading {
  width:		 95%;
  padding: 		6px;
  margin: 		2px;
  font-weight: 		bold;
  text-align: 		left;
  font-weight: 		bold;
  background-color:	#eeeeee;
}

span.zyFormField, span.zyShortFormField, span.zyLongFormField {
  float:		right;
  text-align: 		left;
  padding: 		0;
  font-size:		85%;
}

span.zyFormField {
  width: 		150px;
}

span.zyShortFormField {
  width: 		80px;
}

span.zyLongFormField {
  width: 		300px;
}

span.zyFormSubmit {
  margin:		0 auto;
  text-align:		center;
  padding:		4px;
}

p.zyLabel {
  text-align: 		right;
  margin: 		0 0.5em 0 1em;
  font-weight: 		bold;
  cursor:		default;
}

span.zyLabelLeft {
  float:		left;
  width: 		93px;
  text-align: 		right;
  font-weight: 		bold;
  font-size:		85%;
  cursor:		default;
}

span.zyMediumLabelLeft {
  float:		left;
  width: 		143px;
  text-align: 		right;
  font-weight: 		bold;
  font-size:		85%;
  cursor:		default;
}

span.zyGELabelLeft {
  float:		left;
  width: 		63px;
  text-align: 		right;
  font-weight: 		bold;
  font-size:		85%;
  cursor:		default;
}

span.zyAdvice, p.zyAdvice {
  font-size: 		75%;
  font-style: 		italic;
  cursor:		default;
  line-height:  	1.22em;
}

p.zyNotice {
  font-size:		125%;
  font-weight:		bold;
  cursor:		default;
  line-height:		125%;
}

p.zyTip {
  font-size: 		75%;
  cursor:		default;
  line-height:  	1.22em;
}

/* Photo Editor slide controls */
/* The basic slider CSS is in the relevant template directory, this is just concerned with the layout of controls on the page */

div.zySlider {
  float: 		left;
  padding-top: 		3px;
  width: 		200px;
  margin: 		0px 4px 0px 0px;
  }

div.zySliderSeparator {
  float: 		left;
  width: 		10px;
  height:   39px;
  border: 1px solid red;
  }

span.zySliderLabel {
  float:		left;
  width: 		100px;
  text-align: 		left;
  font-weight: 		bold;
  font-size:		85%;
  cursor:		default;
}

span.zySliderBox {
  float:		right;
  text-align: 		right;
  padding: 		0 3px 0 0;
  font-size:		85%;
}

div.zySliderSlide {
  clear: both;
}


/* Used in signin and account, this is the area displayed when an error is encountered */
div.formerrorsignin {
	clear: 		both;
	color: 		red;
	font-size: 77%;
	margin:		2px 2px 5px 100px;
}
div.formerror {
	color: 		red;
	margin:		2px 0 5px 5px;
}
span.formerror {
	color: 		red;
}

/* Mostly for file manager - wrap the content of a dialog with some suitable padding and style information */
div.zymodaldlg {
  /* width:		100%; */
  margin:		0px;
  padding: 		8px;
}

div.zymodalbut {
  clear: 	both;
  padding: 	4px; 
  text-align: 	right;
}

/* Specific dialog heights */

.zyTabFP {
 /* height: 		230px; not needed now it is a tab set? */
 padding:	    	4px 0 4px 0;
}

/* Paypal Editor Content div */
.zyTabPaypal {
 width: 300px; /* contains only zyFormRow elements */
}

/* Emphasis, used for username in control panel initially */

em.zyStyle {
  font-style: 		italic;
  font-weight: 		bold;
  color: 		#63A7C4;
}

/* Use for <a> tags that should look and behave like a traditional link, but never show as visited. e.g. newly published pages, folder in file store */
.zyHyperlink:link, .zyHyperlink:active, .zyHyperlink:visited {
  color: 		blue;
  text-decoration: 	underline;
}

/* file manager specific style */

TD.zyfmhead, span.zyfmhead, img.zyfmhead {
  margin: 		2px 0;
  font-weight: 		bold;
  vertical-align: 	top ;
  text-align: 		left; /* text-align: start ; was created somewhere - FF? */
  cursor:		default;
}
TD.zyfmbar {
  background-image: url('/static/_v20100212/images/cp/fm/bar-tile.png'); background-repeat: repeat-x;
}

.zyfm:link, .zyfm:active, .zyfm:visited {
  vertical-align: 	top ;
  text-align: 		left; /* text-align: start ; was created somewhere - FF? */
}

ul.zylist {
  margin: 		8px 16px;
  padding-left:		16px;
  list-style-image: 	url('/static/_v20100212/images/page/bullet.gif');
  list-style-position: 	outside;
  text-align:		left;
}

li.zylist {
  font-style: 		italic;
  font-weight: 		bold;
  color: 		#63A7C4;
  text-align: 		justify;
  margin: 		8px 4px;
}

.zylist:hover {
 color: 		blue;
 cursor: 		pointer;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
a.zyFontPickButton {
 text-align: 		center;
 width: 		100px;
 margin: 		6px 3px;
 float: 		left;
}

/* Sort height and scrolling for file manager dialogues */
div.fileManagerDialog {
  height: 		200px;
  overflow: 		auto;  
}

div.fileManagerDialogList {
 margin: 		10px 0;
 height:		135px;
 width: 		100%;
 overflow: 		auto;
 border: 		1px solid #ccc;
}

/* Sort height and scrolling for picker dialogues */
div.editImageDialog {
  height:		380px;
  overflow:		auto;
}

div.editPageDialog {
  height:		380px;
  overflow:		auto;
}

/* Setting for the Photo Editor */
div.zyEditorBitmapButton {
  float:		left;
  clear: 		both;
  position: 		relative;
  left: 		233px;
  margin:		4px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* Styles previously in colourpicker.htm - moved here for performance reasons.                          */

div.cp_patch1, div.cp_patch1t, div.cp_patch1b, div.cp_patch3, div.cp_patch3e {
  width:		18px;
  height:		18px;
  text-align:		center;
  color:		black;
  font-size:		xx-small;
  padding:		0;
  margin:		0;
}

div.cp_patch1t {
  border-style:		solid;
  border-color:		black;
  border-top-width:	1px;
  border-left-width:	1px;
  border-right-width:	1px;
  border-bottom-width:	0px;
  padding:		2px 0 0 0;
}
div.cp_patch1b {
  border-style:		solid;
  border-color:		black;
  border-top-width:	0px;
  border-bottom-width:	1px;
  border-left-width:	1px;
  border-right-width:	1px;
  padding:		2px 0 0 0;
}


 
div.cp_patch3 { 
  float:		left;
  margin-right:		1px;
  margin-bottom:	1px;
}

div.cp_patch3e { 
  float:		left;
  margin-bottom:	1px;
}
div.cp_patch4 { 
  width:		100%;
}

div.cp_label {
  width:		208px; 
  margin:		4px auto;
  cursor:		default;
}

.cp_clickpatch {
  cursor:		pointer;
}

.zycpiehack:link, .zycpiehack:hover, .zycpiehack:visited, .zycpiehack:active {
  margin:		0;
  padding:		0;
  text-decoration:	none;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* Styles for Form Editor and Gallery editor table like layout								*/

td.zyGEcell,td.zyFEcell1,td.zyFEcell2,td.zyFEcell3,td.zyFEcell4,td.zyFEcell5,td.zyFEcell6,td.zyFEcell7 {
	vertical-align: top;
	border-top: 1px solid black;
	padding: 2px;
}
td.zyFEcelllast {
	border-bottom: 1px solid black;
}

td.zyFEcell1 {
	text-align: left;
}
td.zyFEcell2 {
	text-align: right;
}
td.zyFEcell3 {
	text-align: left;
}
td.zyFEcell4 {
	text-align: left;
}
td.zyFEcell5 {
	text-align: right;
}
td.zyFEcell6 {
	text-align: left;
}
td.zyFEcell7 {
	text-align: center;
}

img.zyGEthumb {
	margin: 4px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* Styles for Props copy     		 								*/

td.zyPCEntry {
	padding: 2px;
        border-color: black;
        border-style: solid;
        border-width: 0 0 1px 0;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* Styles for new file manage look  	 								*/

div#zyNewFileList {
 clear: left;
 height: 485px;
 border: 1px solid lightgrey;
 overflow-y: auto;
 overflow-x: hidden;
}

div.zyFileListItem {
 width:150px;
 margin: 5px;
 float: left;
 text-align: left;
 padding: 5px;
}

.zyFileListFolder {
 background-color: #fff;
 height: 70px;
}

.zyFileListFile {
 background-color: #fff;
 height:120px;
}

img.zyFileThumb {
 border: 1px solid gray;
}

a.zyFileLabel {
 font-size: 10px;
}

a.zyFileLabel:hover {
 color: darkgrey;
}
a.zyFileLabel:hover {
 color: darkgrey;
}

div.zyFilePublishedFlag {
 position: relative;
 top: -106px;
 left: -1px;
 height: 25px;
 width: 28px;
 z-index: 500;
}

img.zyFilePublishingFlag:hover {
 outline: 1px solid blue;
}
div.zyFilePublishedFlagsmall {
 position: relative;
 top: -60px;
 left: 42px;
 height: 25px;
 width: 28px;
 z-index: 500;
}
img.zyFilePublishingFlagsmall:hover {
 outline: 1px solid blue;
}

span.zyFileListDivider {
 font-weight: 900;
 font-size: 20px;
}

div.zyFileListDivider {
 clear:	both; 
 width: 100%;
}

/* ---------------------------------------------------- */
/* Styles for the new control panel 2010-06-07          */

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

li.cpan {
 margin-left: 21px;
 padding: 7px 0 7px 0px;
 list-style-type:square
}    

li.grey {
 color: #808080;
}
li.blue {
 color: #266d97;
}
li.green {
 color: #8bc612;
}

span.cpan {
 color: #515152;
 font-size: 12px;
 font-weight: normal;
}

a.cpan:link, a.cpan:visited {
 color: #606060;
}

a.cpan:hover {
 color: #000000;
}