
<!--

   file: /site-style/gsc/colour.css
    rev: 22 Oct
  owner: M Krzywinski

   desc: Genome Sequence Center Style Sheet 

	 Fun colour classes. 

-->

<!-- Colour classes that specify only the foreground colour -->

.whitetext {color : #fff;}
.vlightgreytext {color : #333;}
.lightgreytext {color : #666;}
.greytext {color : #999;}
.darkgreytext {color : #ccc;}
.vdarkgreytext {color : #fff;}
.blacktext {color : #000;}
<!-- Red colour classes -->
.vvlightredtext {   color       : #fee; }
.vlightredtext {   color       : #fcc; }
.lightredtext  {   color       : #f99; }
.mediumredtext {   color       : #f66; }
.darkredtext   {   color       : #933; }
.vdarkredtext  {   color       : #600; }
<!-- Blue colour classes -->
.vvlightbluetext {  color       : #eef; }
.vlightbluetext {  color       : #ccf; }
.lightbluetext  {  color       : #99f; }
.mediumbluetext {  color       : #66f; }
.darkbluetext   {  color       : #339; }
.vdarkbluetext  {  color       : #006; }
<!-- Green colour classes -->
.vvlightgreentext { color       : #efe; }
.vlightgreentext { color       : #cfc; }
.lightgreentext  { color       : #9f9; }
.mediumgreentext { color       : #6f6; }
.darkgreentext   { color       : #393; }
.vdarkgreentext  { color       : #060; }
<!-- Yellow colour classes -->
.vlightyellowtext {color       : #ffe; }
.vlightyellowtext {color       : #ffc; }
.lightyellowtext  {color       : #ff9; }
.mediumyellowtext {color       : #ff6; }
.darkyellowtext   {color       : #993; }
.vdarkyellowtext  {color       : #660; }
<!-- Purple colour classes -->
.vvlightpurpletext {color       : #fef; }
.vlightpurpletext {color       : #fcf; }
.lightpurpletext  {color       : #f9f; }
.mediumpurpletext {color       : #f6f; }
.darkpurpletext   {color       : #939; }
.vdarkpurpletext { color       : #606; }
<!-- Cyan colour classes -->
.vvlightcyantext   {color       : #eff; }
.vlightcyantext   {color       : #cff; }
.lightcyantext    {color       : #9ff; }
.mediumcyantext   {color       : #6ff; }
.darkcyantext     {color       : #399; }
.vdarkcyantext    {color       : #066; }
<!-- Orange colour classes -->
.vlightorangetext   {color       : #fe9; }
.vlightorangetext   {color       : #fc9; }
.lightorangetext    {color       : #fc6; }
.mediumorangetext   {color       : #fc0; }
.darkorangetext     {color       : #c90; }
.vdarkorangetext    {color       : #960; }

<!-- Colour classes that specify both foreground and background colours -->

   <!-- Foreground matched to background -->

.black { background-color : #000;	color       : #fff; }
<!-- Red colour classes -->
.vvlightred { background-color : #fee;	color       : #600; }
.vlightred { background-color : #fcc;	color       : #600; }
.lightred  { background-color : #f99;	color       : #600; }
.mediumred { background-color : #f66;	color       : #600; }
.darkred   { background-color : #933;	color       : #fcc; }
.vdarkred  { background-color : #600;	color       : #fcc; }
<!-- Orange colour classes -->
.vdarkorange   {background-color: #960       ; color: #fe9; }
.darkorange    {background-color: #c90       ; color: #fc9; }
.mediumorange  {background-color: #fc0       ; color: #960; }
.lightorange   {background-color: #fc6       ; color: #960; }
.vlightorange  {background-color: #fc9       ; color: #960; }
<!-- Blue colour classes -->
.vvlightblue { background-color : #eef;	color       : #636; }
.vlightblue { background-color : #ccf;	color       : #636; }
.lightblue  { background-color : #99f;	color       : #636; }
.mediumblue { background-color : #66f; 	color       : #ccf; }
.darkblue   { background-color : #339;	color       : #ccf; }
.vdarkblue  { background-color : #006;	color       : #ccf; }
<!-- Green colour classes -->
.vvlightgreen { background-color : #efe;	color       : #060; }
.vlightgreen { background-color : #cfc;	color       : #060; }
.lightgreen  { background-color : #9f9; color       : #060; }
.mediumgreen { background-color : #6f6;	color       : #060; }
.darkgreen   { background-color : #393;	color       : #cfc; }
.vdarkgreen  { background-color : #060;	color       : #cfc; }
<!-- Yellow colour classes -->
.vvlightyellow {background-color : #ffe; color       : #660; }
.vlightyellow {background-color : #ffc; color       : #660; }
.lightyellow  {background-color : #ff9;	color       : #660; }
.mediumyellow {background-color : #ff6;	color       : #660; }
.darkyellow   {background-color : #993;	color       : #ffc; }
.vdarkyellow  {background-color : #660;	color       : #ffc; }
<!-- Purple colour classes -->
.vvlightpurple {background-color : #fef;	color       : #606; }
.vlightpurple {background-color : #fcf;	color       : #606; }
.lightpurple  {background-color : #f9f;	color       : #606; }
.mediumpurple {background-color : #f6f; color       : #606; }
.darkpurple   {background-color : #939;	color       : #fcf; }
.vdarkpurple  {background-color : #606; color       : #fcf; }
<!-- Cyan colour classes -->
.vlightcyan   {background-color : #cff; color       : #066; }
.vvlightcyan   {background-color : #eff; color       : #066; }
.lightcyan    {background-color : #9ff;	color       : #066; }
.mediumcyan   {background-color : #6ff;	color       : #066; }
.darkcyan     {background-color : #399;	color       : #cff; }
.vdarkcyan    {background-color : #066;	color       : #cff; }

   <!-- Foreground always black -->

<!-- Red colour classes -->
.vlightredbw { background-color : #fcc;	color       : #000; }
.lightredbw  { background-color : #f99;	color       : #000; }
.mediumredbw { background-color : #f66;	color       : #000; }
.darkredbw   { background-color : #933;	color       : #fff; }
.vdarkredbw  { background-color : #600;	color       : #fff; }
<!-- Orange colour classes -->
.vdarkorangebw   {background-color: #960       ; color: #fff; }
.darkorangebw    {background-color: #c90       ; color: #fff; }
.mediumorangebw  {background-color: #fc0       ; color: #000; }
.lightorangebw   {background-color: #fc6       ; color: #000; }
.vlightorangebw  {background-color: #fc9       ; color: #000; }
<!-- Blue colour classes -->
.vlightbluebw { background-color : #ccf;color       : #000; }
.lightbluebw  { background-color : #99f;color       : #000; }
.mediumbluebw { background-color : #66f;color       : #fff; }
.darkbluebw  { background-color : #339;	color       : #fff; }
.vdarkbluebw  { background-color : #006;color       : #fff; }
<!-- Green colour classes -->
.vlightgreenbw { background-color : #cfc;color       : #000; }
.lightgreenbw  { background-color : #9f9;color       : #000; }
.mediumgreenbw { background-color : #6f6;color       : #000; }
.darkgreenbw   { background-color : #393;color       : #fff; }
.vdarkgreenbw  { background-color : #060;color       : #fff; }
<!-- Yellow colour classes -->
.vlightyellowbw {background-color : #ffc;color       : #000; }
.lightyellowbw  {background-color : #ff9;color       : #000; }
.mediumyellowbw {background-color : #ff6;color       : #000; }
.darkyellowbw   {background-color : #993;color       : #fff; }
.vdarkyellowbw  {background-color : #660;color       : #fff; }
<!-- Purple colour classes -->
.vlightpurplebw {background-color : #fcf;color       : #000; }
.lightpurplebw  {background-color : #f9f;color       : #000; }
.mediumpurplebw {background-color : #f6f;color       : #000; }
.darkpurplebw   {background-color : #939;color       : #fff; }
.vdarkpurplebw  {background-color : #606;color       : #fff; }
<!-- Cyan colour classes -->
.vlightcyanbw   {background-color : #cff;color       : #000; }
.lightcyanbw    {background-color : #9ff;color       : #000; }
.mediumcyanbw   {background-color : #6ff;color       : #000; }
.darkcyanbw     {background-color : #399;color       : #fff; }
.vdarkcyanbw    {background-color : #066;color       : #fff; }


<!-- New blue ones -->
.vvlightbluebw { background-color : #eef;color       : #000; }