/* ****************************************************
File    : default.css
Purpose : Default style sheet for SOBAC Web Pages
Date    : 30 May 2005
Author  : Bob Jonkman <bjonkman@sobac.com>
***************************************************** */

/*
Note    : Try to stick to the standard Tango colour values
          http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines#Color_Palette
    	  http://sobac.com/sobac/tangocolors.htm
*/


/* ***********************************
   ***** Experimental Styles     *****
   ***** These may (will) cause  *****
   ***** invalid CSS validation  *****
   ***********************************
   Removed from main body on 27 May 2007

*/

dl, dd, dt,
#rightsidebar,
.linkfarm ul,
ul.linkfarm,
li.linkfarm,
.linkfarm li,
.thumbnail,
.popup,
.box,
.history,
li img      		{	border-radius: 8px ;
                        -moz-border-radius: 8px ;
}


/* These are the chiclets */
.map, .ical,
.atomstyle,
.opmlstyle,
.microformatstyle   {   border-radius: 6px ;
                        -moz-border-radius: 6px ;
}

/* *********************************
   *****   End of experimental *****
   *********************************
*/

/******************************************
***                                     ***
***           Coloration                ***
***                                     ***
******************************************/

table,
dl,
.linkfarm ul,
ul.linkfarm
.even,
.popup,
#rightsidebar,
.shadelight	    {   background: white ;
                    color: black ;
}


.odd,
body,
.shadenormal	{   background: #ddc ;  /* Tango color: highlight aluminum */
                  color: black ;      /* Contrast ratio: 15.28 AAA */
}


dd,
.linkfarm li,
li.linkfarm ,
thead,
tfoot,
th,
.shaded,
.shademedium	{   background: #ccc ; /* Tango color: Aluminum */
                  color: black;      /* Contrast ratio: 13.07 AAA */
}

dd thead,
dd th        {   background: black ;
                 color:      white ;
}

.disabled,
.thumbnail,
.shadedark	    {   background: #444 ; /* Tango color: Shadow Aluminum */
                    color: white ;     /* Contrast ratio: 9.73 AAA */
}

/*  arbitrary colours */
.red,
.green,
.blue,
.yellow		{	border-width: thin ;
			      border-style: solid ;
			      padding: 0 .3em ;
		}

.red		  {	border-color: red ;
		     	  background-color: #FCC ;
			      color: red ;              /* Red on Pink: Contrast ratio 7.21 AAA */
		}

.green		{	border-color: green ;
		 	      background-color: #CFC ;
			      color: #040 ;             /* Green on light green: Contrast Radio 10.25 AAA */
		}

.blue		  {	border-color: blue ;
		        background-color: #CCF ;
			      color: #00A ;             /* Blue on light blue: Contrast Ratio 8.63 AAA */
		}
.yellow		{	border-color: yellow ;
			      background-color: #FFC ;
			      color: #650 ;             /* Dark yellow on light yellow: Contrast ratio 7.13 AAA */
		}

a                   {   border:  thin solid transparent ;
                        padding: 0px 1px 0px 1px ;
}

a:link              {  /* background: inherit ; */
                        color: blue ;
}

a:visited           {  /*  background: inherit ; */
                        color: purple ;
}


a:hover             {   color: black ;         /* Black on Sky Blue: Contrast Ratio 7.21 AAA */
                        background: #79c ;     /* Highlight Sky Blue */
                        border: thin solid black ;
}


.external a:hover,
a:hover.external    {   background: #F66 ;	/* Highlight Scarlet Red (was #fdd) */
                        color: black ;      /* Black on light Red: Contrast ratio 7.34 AAA */
}

.sortable thead th:hover,
.internal a:hover,
a:hover.internal    {   background: #fe6 ;      /* Highlight Butter */
                        color: black ;          /* Black on Butter: Contrast ratio 17.67 AAA */
}

/******************************************
***                                     ***
***           specific elements         ***
***                                     ***
******************************************/
/* Elements are styled first; IDs next, classes override elements and IDs */


body                {   margin: .5em ;
                        background-image: url("https://sobac.com/sobacbkg.png") ;
                        background-position: top right ;
                        background-attachment: fixed ;
                        background-repeat: no-repeat ;
                        font-family: "Trebuchet MS", serif ;
}


#rightsidebar       {   border: thin solid black ;
                        width: 20em ;
                   /*     height: 200ex ; */
                        margin: .5em;
                        padding: 2px 2px .5ex 2px ;
                        float: right ;
}


/* Jiggery-pokery to display the "Full Page" link only on inserts */
.maximize               {   display: none;
}

#rightsidebar .maximize {   display: inline ;
}

/*   ***** */


/* **********************************
*****
***** A nice idea, but too ugly.
*****
**********************************
a.external:after  {	    content: "  " url("/ext-link-icon.png") ;
					    margin: 0px 2px 0px, 2px ;
					    vertical-align: middle ;
}
*****
********************************** */


/********* Don't use these, they're ugly *************
a.internal          {   background-color: #ddf ;
                        color: #007 ;
}

a.external          {   background-color: #fcc ;
                        color: #700 ;
}
******************************************************/


img                 {   border: none ;
                        margin: 2px ;
						max-width: 99% ;
}

a img               {   text-decoration: none ;
                        background: transparent ;
}

img.screenshot      {   border: 1px solid ;
                        width: 48px;
                        height: auto;
                        vertical-align: middle ;
                        margin: 10px ;
}


img.icon            {   width: 32px;
                        height: 32px;
                        vertical-align: middle ;
                        margin-left:  1em ;
                        margin-right: 1em ;
}

.logo img,
img.logo            {   float: right ;
                        margin-left: 2px ;
                        margin-right: 2px ;
}

img.extlink         {   width: 16px ;
                        height: 20px ;
                        vertical-align: top ;
                        margin-left: 1em ;
                        margin-right: 1em ;
}

li img              {   vertical-align: top ;
}

li img,
dd>img				{	border: 5px solid white ;
						background: black;
						padding: 1% ;
						max-width: 95% ;
}

                    }

.caption            {   padding: 0 2em;
                        font-size: smaller;
                    }

ol > li               {   margin-top: 1.5ex;
                    }

br                  {  /* clear: both ; */
}

.clearboth,
.clear
                    {   clear: both ;
}

h1                  {   text-align: center ;
}

caption             { 	font-weight: bold ;
    		            font-size: larger ;
}

table               { 	border-collapse: collapse ;
           	            border-style: solid ;
}


td , th             { 	padding: .5em ;
           	            border-style: solid ;
           	            border-width: 1px ;
}

thead, tfoot, th    {   font-weight: bold ;
              	        color: black ;
}

thead               {   text-align: center ;
}

th                  {   text-align: left ;
}


.sortable thead th    {   text-decoration: underline ;
                          cursor: pointer ;
}


code                {   font-size: 110% ;   /* inline 'code' elements appear too small */
}

pre code,
code pre            {   display: block ;
                        white-space: pre ;
		                    color: #0F0 ;         /* Lime on Black: Contrast ratio 15.3 AAA */
		                    background: black ;
                        font-weight: bolder ;
                        border: thick solid silver ;
                        overflow: auto ;
                        margin: 1em ;
                        padding: 1em ;
}

pre code strong,
code pre strong     {   color: yellow ;       /* Yellow on Black: Contrast ratio 19.55 AAA */
}


/*  I haven't yet developed this to the point of usability
p                   {   border: thin solid black ;
                        margin: 4ex 2em 1ex 2em;
                        padding: .5em ;
                    }
*/


dl                  {   border: thin solid black ;
                        margin: 2em ;
                        padding: 1em ;
}

dt                  {   /* font-variant: small-caps ; */
            	        /* font-family: monospace ; */
                        font-weight: bold ;
            	        font-size: larger ;
                        margin-bottom: 1ex;
}

dd                  {   padding: 1em ;
                        margin-bottom: 2ex;
                        border: thin solid black ;
}



hr.short            {   text-align: center ;
                        width: 80% ;
}


samp , kbd			{ 	font-size: 125% ;
       					background: #ddd ;  /* Tango Aluminium is #ddc */
       					padding: 0 .1em 0 .1em ;
}


samp kbd,
kbd samp			{	font-size: smaller;
}

/* ***************************************************
UL                  {   border: thin solid black ;
                        background: silver ;
                        color: black ;
                        margin-left: .5em ;
                        margin-right: .5em ;
                        padding:    .5em;
}
*************************************************** */





/****************************************************
***                                               ***
***       Menus and Navigational aid classes      ***
***                                               ***
****************************************************/

@media all    {
    .print  {   display: none ;
    }
}

.accessiblenav,
#accessiblenav  {   display: none;
}

.content,
#content        {  /* clear: both ; */
}

.header,
#header         {   text-align: center ;
                    vertical-align: middle ;
        		    margin: 0 ;
                    clear: both ;
                    border-bottom: thin solid black ;
                    padding: .5em 0 ;
}

.footer,
#footer         {   text-align: center ;
                    clear: both ;
                    font-size: smaller ;
                    border-top: thin solid black ;
                    padding: .5em 0  ;
}

.header ul,
#header ul,
.footer ul,
#footer ul      {   display: inline ;
                    text-align: center ;
                    text-indent: 0em ;
}


.header li,
#header li,
.footer li,
#footer li      {   display: inline ;
                    text-indent: 0em ;
                    text-align: center ;
}


.header img.icon,
#header img.icon,
.footer img.icon,
#footer img.icon    {   float: left ;
}


.header hr,
#header hr,
.footer hr,
#footer hr          {   clear: both ;
}

/* Because we use <address> on the footer of every page, and don't want a line break */
.footer address,
#footer address             {   display: inline ;
}




.menu           {   font-size: smaller ;
                    margin-bottom: 2ex ;

}

.menu p         {   display: inline ;
}

.menu ul,
.menu dd        {   margin: 0 ;
}

.menu li        {   list-style-type: none ;
                    margin: 0 .5em ;
}

.menu li:before	{   content: " " ;
}

.menu li:after	{   content: " " ;
}



/* ***************************************************************
   ***************************************************************
   *****                                                     *****
   *****   Linkfarm styles copied from TWC Sandbox           *****
   *****                                                     *****
   *****   Designed by Bob Jonkman, 2006-2012                *****
   *****                                                     *****
   *****                                                     *****
   ***************************************************************
   *************************************************************** */

.linkfarm ul,
ul.linkfarm    {    margin-left:   2em;
		            margin-right:  2em;
         		    margin-top:    0 ;
 		            margin-bottom: 2em;

         		    padding-top:    1em ;
		            padding-bottom: 1em ;
        		    padding-left:   1em ;
		            padding-right:  1em ;

                    border: thin solid black ;
                    display: block ;
                    min-width: 10em ;
		            background: #bbb ; /* Tango colour Aluminium Shadow */
        		    text-align: center ;
}

.linkfarm li   {        /* For boxed menu-items to work well, img.icon should be set to "float: left" */
		    display: inline-block ;
		    margin-top:    1ex;
		    margin-bottom: 0 ;
		    margin-left:   .2em ;
		    margin-right:  0 ;

                    width: 10em ;
                    height: 6.2em ; /* golden ratio, anyone? */

                    padding: .3em ;  /* see below in ".linkfarm li a" */
                    font-size: smaller ;
                    font-family: sans-serif ;
                    text-align: right ;
                    vertical-align: top;
                    text-indent: 0em ;
                    overflow: auto ;
                    list-style-type: none ;
                    border: thin solid black ;
		    background: white ;
}

.linkfarm img   {   float: left ;
                    /* the following attributes duplicate "img.icon" */
                    width: 32px;
                    height: 32px;
                    vertical-align: middle ;
                    margin-left:  1em ;
                    margin-right: 1em ;
}

	/* links in linkfarm boxes should provide clickable link target for the whole box */
.linkfarm li a
		{   display: block;
		    margin: -0.3em; /* Match the (negative) padding in ".linkfarm li" */
		    padding: .3em;  /* Match the padding in ".linkfarm li" */
		    height: 6.2em;
		    border: transparent ;
}

/* class="multi" is used for multiple anchor links in a single li (avoid if possible) */
.linkfarm li a.multi { 	display: inline;
			margin: 0 ;
			padding: 0 ;
			height: auto ;
			border: thin solid black ;
}



.linkfarm img   {   float: left ;
                    /* the following attributes duplicate img.icon */
                    width: 32px;
                    height: auto;
                    max-height: 32px;
                    vertical-align: middle ;
                    margin-left:  1em ;
                    margin-right: 1em ;
		    border: 0 ;
}

/* Clears needed for linkfarm */
h1,h2,h3,h4,h5,h6
		{	clear: left ;
		}

.linkfarm li:hover a:link,
.linkfarm li:focus a:link
        {   color: black ;
        }


/* ***************************************************************
   ***************************************************************
   *****                                                     *****
   *****       End of Linkfarm                               *****
   *****                                                     *****
   ***************************************************************
   *************************************************************** */




.thumbnail,
.thumbnail img
                { /*  width: 204px ;  */
	                height: auto ;
    	            padding: 2px ;
	                margin: 1px ;
		              float: left ;
		              text-align: center ;
		              vertical-align: middle ;
    	            border: thin solid black ;

}

.thumbnail img  {   width: 204px ;
                }


.popup          {   width: 2em;
                    height: 2ex;
                    overflow: hidden ;
                    display: block ;
                    border: thin solid black ;
}

.popup:hover    {   width: 90% ;
                    height: auto ;
                    padding: 2em ;
                    margin: .5em ;
}

.navaid         {   font-variant: normal ;  /* Needed for "alpha" character entity (glyph doesn't exist in font-variant:small-caps)  */
                    font-size: smaller ;
}

/*********************************************
***                                        ***
*** generic classes (apply to any element) ***
***                                        ***
*********************************************/


.new            {   background: #AF4 ;
                    color: #050 ;     /* Green on light green: Contrast ratio 7.43 AAA    */
            	     font-size: smaller ;
}


.warning        {   color: #900 ;     /* Red on pink: Contrast ratio 7.94 AAA */
                    background: #FEE ;
                    font-weight: bold;
}


.hilite         {   color: white ;    /* White on Navy: Contrast ratio 15.49 AAA */
                    background: #008 !important ;
                    padding: 0em .1em ;
}

.hilite a:link,
a:link.hilite   {   color: yellow ;
                    background: inherit ;
}

.hilite a:visited,
a:visited.hilite    {   color: fuchsia ;
                        background: inherit ;
}

.plain          {   list-style-type: none ;
                    text-decoration: none ;
}

.box            {   margin: .5em ;
                    padding: .1em .5em .1em .5em ;
                    border: thin solid black;
}

/* This creates a full box-sized target for link */
a.box,
.box > a	{   display: block ;
	            padding: .1em .5em .1em .5em ;
	            margin: -.1em -.5em -.1em -.5em ;
}


div.box         {   margin: 2em ;
                    padding: 1em ;
}

.center         {   text-align: center ;
                    vertical-align: middle ;
                    margin-left: auto;
                    margin-right: auto;
}

.left           {   text-align: left;
                    float: left ;
}

.right          {   text-align: right;
                    float: right ;
}

/* Conflicts with class="menu bottom" &c.
.bottom         {   position: absolute ;
                    bottom: 0;
}
*/

.history        {   display: block ;        /* "display: block"  to show history; "display: none" to suppress history */
                    margin: .3em 0em ;
                    padding: .1em .5ex .1em .5ex ;
                /*    width: 50% ; */
                    text-align: left ;
                    color:  #050 ;          /* Dark green on light green: Contrast ratio 8.44 AAA */
                    background: #dfd  ;
                    font-size: smaller ;
                    border: 1px solid black;
}

.history dl,
.history dd,
.history dt         {      /* No shaded boxes inside other shaded boxes, reduce margins from normal dl */
                        background: #dfd ;  /* Needed for broken IE6.0 (which doesn't understand "inherit" or the concept of "cascading" */
                        color: inherit ;
                        border: none ;
                        margin: .1em;
}

.attribution {  border-top: medium double black;
                margin-top: 1ex;
                font-size: smaller ;
                clear: both;
                vertical-align: middle;
                text-align: center ;
}

.attribution img { float: left;
                   vertical-align: middle;
}



@media screen   {       /* Fancy scrolling box only on display screens */
    .history        {   height: 12ex ;
                        overflow: auto ;
    }
}



.endlogo        {   float: left ;
                    vertical-align: middle ;
}

tt,
.monospace      {  /* font-size: 95% ; */
                    font-weight: bold ;
                    font-variant: small-caps ;
                    font-family: monospace ;
}

.aside   {   float: right ;
                margin: .3em ;
                padding: .3em ;
                border: thin solid black ;
                min-width: 150px ;
                min-height: 150px ;
                background: white ;
                text-align: center ;
            }

.aside img
            {   max-width: 9em ;
            }

/* Make the whole aside container an active target */
.aside a {   display: block ;
                margin: -.3em ; /* negative div.aside padding */
                width: 10.475em ; /* div.aside width plus margin less borders */
                border: none ;
            }




/*********************************************
***                                        ***
***   Special purpose markup               ***
***                                        ***
*********************************************/

/* Small affiliation boxes, "chiclets" */
/* Chiclets */

.map, .ical
.atomstyle,
.opmlstyle,
.microformatstyle   {
                        margin: .1em .3em ;
                        padding: .1em .3em  ;
                   	font-variant: small-caps ;
            	        font-weight: bold ;
                   	font-size: .7em ;
                        vertical-align: middle ;
                        border: 1px solid black ;
}

.map		    {  background: #008 !important ;
                       color: white !important ;  /* White on Blue - Contrast ratio 15.49 AAA */
}

.ical		    {  background: #060  !important ;
                       color: white !important ; /* White on Green - Contrast ratio: 7.24 AAA */
}

.atomstyle          { 	background: #A20 !important ;
            	        color: white !important ; /* White on Orange - Contrast ratio 7.14 AAA */
}

.atomstyle:before  {   content: url("/atom-icon-16x16.png") ;
                       padding-top: 1px ;
                       padding-right: 2px ;
}


.opmlstyle          { 	background: #A00 ;
        		            color: white ;   /* White on Red - Contrast ratio 7.75 AAA */
}

.opmlstyle:before   {   /* content: url("/opml-icon-16x16.png") ; */
                        padding-top: 1px ;
                        padding-right: 2px ;
}

.microformatstyle   {   background: #260  !important ;
        		        color: white !important ; /* White on Green - Contrast ratio 7.07 AAA */
}

.microformatstyle:before    {   content: url("/microformat-icon-16x16.png") ;
                                padding-top: 1px ;
                                padding-right: 2px ;
}

a.atomstyle:hover:visited,
a.opmlstyle:hover:visited,
a.microformatstyle:hover:visited    {
                                color: purple ;
                                background: inherit ;
}

a.atomstyle:hover:link,
a.opmlstyle:hover:link,
a.microformatstyle:hover:link             {
                                color: blue ;
                                background: inherit ;
}

/* ****************************************************** *\
**                                                        **
**                                                        **
**            r Creative Commons Badges (images)         **
**                                                        **
**                                                        **
**                                                        **
\* ****************************************************** */


a[rel~="license"] {
  display:inline-block ;
}  

a[rel~="license"] img { 
  height: 22px !important ;
  margin-left:3px ;
  vertical-align:text-bottom ; 
}  




/*****************************************************
   File     : microformat.css
   Purpose  : Stylesheet for Microformats
   Author   : Bob Jonkman <bjonkman@sobac.com>
   Date     : 4 August 2006
   Note     ; microformat at http://microformats.org/wiki/
******************************************************/

.hresume            {	background-image: none ;
         		background: white ;
                        color: black ;
			margin: 0 -.5em 0 -.5em ; /* undoes the body margin of .5em */
			padding: .5em ;

 }
 
 
/* We expect there to be a containing element with text like "Postal address"
      then the address inside that element is indented
*/      
 
.h-adr p {     
   margin-left: 2em ;
}


/* *************************
*****
*****   This breaks in IE6.0 , the attributes aren't reset by "inherit"
*****
***** .hresume .summary   {   margin: 2em ;
*****                         font-size: x-large ;
*****                 		  font-weight: bold ;
*****                 		  text-align: center ;
***** }
*****
***** .vcalendar .summary {   margin: inherit ;
*****              			  font-size: inherit ;
***** 			              font-weight: inherit ;
*****                         text-align: inherit ;
***** }
***** */



/*****************************************************
    File    :   PRINT.CSS
    Purpose :   Stylesheet for printed output
    Author  :   Bob Jonkman <bjonkman@sobac.com>
    Date    :   25 May 2006
******************************************************/


@media print {
    body                {   background: white ;
                            color: black ;
    }

    abbr                {   text-decoration: none !important ;
                            border: none !important ;
    }

    .print              {   display: inline ;
    }

    form,
    .menu,
    .navaid,
    .noprint,
    .screen,
    .popup      { display: none ;
    }

    a[href]     {   text-decoration: none ;
                    color: black !important   ;
                    background: inherit ;
    }

    a:link,
    a:visited   {   text-decoration: none !important ;
                    background: inherit ;
                    color: black !important ;
    }

    a.external:after	{   content: "" ;
	                    padding: 0px ;
	                    margin: 0px;
    }

    dl,
    ol,
    ul,
    li,
    dd          {   page-break-inside: avoid ;
    }

}



/* EOF: default.css */