/* ****************************************************
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,
.linkfarm ul,
.linkfarm il,
.thumbnail,
.popup,
.box,
.history      {         border: thin solid black ;
                        border-radius: 8px ;
                        -moz-border-radius: 8px ;
}


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

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



/******************************************
***                                     ***
***           specific elements         *** 
***                                     ***
******************************************/
/* Elements are styled first; classes override elements */


body                {   color: black ;
                        margin: .5em ;
                        background: #eee ; /* Highlight Aluminium */
                        background-image: url("/sobacbkg.png") ;
                        background-position: top right ;
                        background-attachment: fixed ;
                        background-repeat: no-repeat ;
}


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

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

a:hover             {   background: #def ;
            			color: inherit ;
}

.internal a:hover,
a:hover.internal    {   background: #ffd ;
                        color: inherit ;
}

.external a:hover,
a:hover.external    {   background: #fdd ;	/* Highlight Scarlet Red (was #fdd) */
                        color: inherit ;
}


/* **********************************
*****                     
***** 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 ;
}

a img               {   text-decoration: none ;
}

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 ;
}


br                  {   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 ;
              	        background: silver ;
   		                color: black ;
}

thead               {   text-align: center ;
}


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

pre code,
code pre            {   display: block ;
                        white-space: pre ; 
		                color: lime ;
		                font-weight: bolder ;
                        background: black ;
                        border: thick solid silver ;
                        overflow: auto ;
                        margin: 0em 5em ;
                        padding: .3em ;
}

pre code strong,
code pre strong     {   color: yellow ;
}

dd                  {   padding-bottom: 1em ;
}

dl                  {   border: thin solid black ;
                        background: silver ;
                        color: black ;
                        margin-left: 3em ;
                        margin-right: 3em ;
                        padding: 2em ;
}

.history dl         {      /* 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: 0em 1em ;
}

dt                  {   font-variant: small-caps ;
        	            font-family: monospace ;
                        font-weight: bold ;
        	            font-size: larger ;
}



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



/* ***************************************************         
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 ;
    }
}

.content
#content        {   clear: both ;
}

.header,
#header         {   text-align: center ;
                    vertical-align: middle ;
        		    margin: 0ex 5em ;
                    clear: both ;
}

.footer,
#footer         {   text-align: center ;
                    clear: both ;
}

.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 ;

}

.menu p         {   display: inline ;
}

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

.menu li        {   list-style-type: none ;
}

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

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





.linkfarm ul    {   margin: 0em 0em 2em 0em;
                    background: silver ;
                    padding: .3em ;
                    overflow: auto ;
                    border: thin solid black ;
                    display: block ;
                        border-radius: 8px ;
                        -moz-border-radius: 8px ;
}




.linkfarm li   {        /* For boxed menu-items to work well, img.icon should be set to "float: left" */
                    float: left ; 
                    width: 10em ;
                    height: 7em ;
                    margin: 1px ;
                    padding: 2px ;
                    font-size: smaller ;
                    font-family: sans-serif ;
                    text-align: right ;
                    text-indent: 0em ;
                    overflow: auto ;
                    list-style-type: none ;
/*                    background: #eef ;  */
                    border: thin solid black ;
                        border-radius: 8px ;
                        -moz-border-radius: 8px ;
}

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

.thumbnail      {   width: 204px ;
	                height: auto ;
    	            padding: 2px ;
	                margin: 1px ;
		            float: left ;
		            text-align: center ;
		            vertical-align: middle ;
    	            background: silver ;
	    	        color: black ;
                    border: thin solid black ;
}


.popup          {   width: 2em;
                    height: 2ex;
                    background: #ff7 ;
                    color:  black ;
                    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) ***
***                                        ***
*********************************************/

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

.center         {   text-align: center ;
                    vertical-align: middle ;
}


.history        {   display: block ;        /* "display: block"  to show history; "display: none" to suppress history */
                    margin: .5em 0em ;
                    padding: .1em .5em .1em .5em ;
                    width: 50% ;
                    text-align: left ;
                    color:  #080 ;
                    background: #dfd  ;
                    font-size: smaller ;
                    border: 1px solid black;
}

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



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

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

.new            {  	color: green ;
                	background: #DFD ;
            	    font-size: smaller ;
}

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

.shaded         {   color: black;
        	        background: silver ;
}


.warning        {   color: red;
                    background: #FEE ;
                    font-weight: bold;
}

.disabled           {   color: #555 ;
                        background: inherit ;
}

.hilite         {   color: white ;
                    background: navy !important ;
                    padding: 0em .1em ;
}

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

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



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

/* Small affiliation boxes, "chiclets" */

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


.atomstyle          { 	background: #CE5C00 !important ;
            	        color: white !important ;
}

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


.opmlstyle          { 	background: #A40000 ;
        		        color: white ;
}

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

.microformatstyle   {   background: #490  !important ;
        		        color: white !important ;
}

.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 ;
}




/*****************************************************
   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 ;
 }

/* *************************
***** 
*****   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 ;
    }


    .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 */