/*==============================================================================
Title: ASSETS 2008                         
Version: 2                                                            
Author: Darren Lunn                                                     
Created: 31/07/2007                                                               
Modified: 10/10/2008  
Description: Style for the Website of ASSETS 2008 the 10th ACM Conference on 
             Computers and Accessibility                         
%==============================================================================*/





/***************************************************************/
/* Overrides the defaul HTML tag values to provide the basic   */
/* look and feel of the Website.
/***************************************************************/
body
   {
    background:url(../images/background.jpg) repeat-x #E7EFF9;
    color:#083643;
    font-size: 1em;
    text-align: justify;
    margin: 0px;
    margin-top:5px;
   }

a
   {font-weight:bold;}

a:link
   {color:#C03000;}

a:visited 
   {color:#083643;}

a:hover, a:active 
   {color:#FFFFFF; background-color:#C03000;}

h1, h2, h3, h4, h5, h6
   {
    text-align:left;
    font-weight:bold;
   }

img
   {border:none;}

hr
	{
	 color: #083643;
	 background-color: #083643;
	}

hr.subfooter
		{
		 color: #CEDFF3;
		 background-color: #CEDFF3;
		}
		
table
	{
	 border-spacing:1px;
	 background-color: #083643;
	 color: #083643;
	 margin: 0 auto;
	}

caption
	{
	 margin: 0 auto;
	 padding: 3px;
	 border: #083643;
	 border-bottom: 2px solid #083643;
	 color: #083643;
	 font-size: 1.0em;
	 font-weight: bold;
	 font-style:italic;
	 text-transform:uppercase;
	}

thead th
	{
	 text-align:center;
	 color: #FFFFFF;
	 background: #083643;
	 border:none;
	}

tbody tr
	{
	 text-align:left;
	 border:none;
	}

tbody tr.even
	{background:#ADC1FC;}

tbody tr.odd
	{background:#CEDFF3;}

tbody td.greyedOut
		{background:#CCCCCC;}
	
dt
	{margin-left: 10px;font-weight: bold;}

dd
	{margin-bottom: 10px;}
	
ol.upper
	{ list-style-type: upper-alpha }  /* A B C D E etc. */

ol.lower    
	{ list-style-type: lower-alpha }      /* a b c d e etc. */

/***************************************************************/
/***************************************************************/




/***************************************************************/
/* Defines the Area that defiens the key to understanding the  */ 
/* table                                                       */
/***************************************************************/
.key
		{margin: 10px;}
		
.greyKey
	{
	 background:#CCCCCC;
	 height: 20px;
	 width: 20px;
	 float: left;
	 border: 1px solid #083643;
	}

/***************************************************************/
/***************************************************************/	





/***************************************************************/
/* Defines the block structures and layout that are used to    */
/* create the banner that sits at the top of the page          */
/***************************************************************/
#lighthouse
   {
    height:109px;
    width:177px;
    padding:0;
    margin:0;
    margin-left:5px;
    border:none;
    float:left;
    display: inline;
    background:url(../images/lighthouse.gif);
   }

#humanFigureTop
   {
    padding:0;
    margin:0;
    margin-right:5px;
    border:none;
    height:109px;
    width:147px;
    float:right;
    display: inline;
    background:url(../images/figureTop.gif);
   }

#humanFigureBottom
   {
    padding:0;
    margin:0;
    margin-right:5px;
    border:none;
    height:50px;
    width:147px;
    float:right;
    background:url(../images/figureBottom.gif);
    clear:right;
   }

#bannerText
   {
    padding:0;
    width: auto;
    margin-left:177px;
    margin-right:147px;
    display: block;
    border:none;
	 color:#C03000;
    height: 109px; 
    background:url(../images/headerBorderCentre.gif) bottom repeat-x;
   }

#bannerText h1.pageTitle
   {
    font-size: 3em;
    margin:0;
   }

#bannerText p.tagLine
   {
    font-size: 1.4em; 
    margin:0;
    text-align: right;
    font-weight:bold;
   }


/* Hack for IE.  Hidden from IE5-mac. Only IE-win sees this. \*/
* html #bannerText 
   {
    height: 109px;
    margin-left: -3px;
    margin-right: -3px;
   }

* html #humanFigureTop 
   {
    height: 109px;
    margin-left: -3px;
   }

* html #lighthouse 
   {
    height: 109px;
    margin-right: -3px;
   }
/* end of IE hack */


/***************************************************************/
/***************************************************************/





/***************************************************************/
/* Defines the Navigation menu on the left hand side
/***************************************************************/
#menuAndSponsors
	{
 	 position: absolute;
    top: 114px;
    left: 5px;
    width:196px;
    margin: 0;
    float:left;
    clear:left;
	}
	
#websiteMenu
   {
     border: thin solid #083643;
   }

h3.menuHeading
   {
    margin: 0;
    padding: 3px;
    background-color: #083643;
    color: #FFFFFF;
	 font-size: 1.0em;
   }

	h2.menuHeading
	   {
	    margin: 0;
	    padding: 3px;
	    background-color: #083643;
	    color: #FFFFFF;
		 font-size: 1.0em;
	   }
	
#websiteMenu a:visited.websiteMenuLink,  #websiteMenu a:link.websiteMenuLink
   {
    color: #083643;
    text-decoration: none;
	 display: block;
	 padding: 2px 5px 2px 20px;
	 font-size: 0.8em;
	 background:#ADC1FC;
   }

#websiteMenu a:hover.websiteMenuLink,  #websiteMenu a:active.websiteMenuLink
   {
    color: #FFFFFF;
    background: #C03000;
    text-decoration: none;
	 display: block;
	 font-size: 0.8em;
	 padding: 2px 5px 2px 20px;
   }

/***************************************************************/
/***************************************************************/





/***************************************************************/
/* Defines the Important Dates and Spomnsors Table on the right hand side
/***************************************************************/
#importantInformation
   {
    position: absolute;
    top: 163px;
    right:5px;
    width:196px;
    margin: 0px;
    border: none;
    float:right;
    clear:right;
   }



#importantLinks
	{
	 border: thin solid #083643;
	 margin: 25px;
	 font-size: 1.1em;
	}

#importantLinks div.even
	{
	 background:#ADC1FC;
	 padding:5px;
	}

#importantLinks div.odd
	{
	 background:#CEDFF3;
	 padding:5px;
	}

#importantDates table
   {
    border-spacing:1px;
    background-color: #083643;
    color: #083643;
    margin: 0 auto;
   }


#importantDates caption
	{
    margin: 0;
    padding: 3px;
    background-color: #083643;
    color: #FFFFFF;
	 font-size: 1.0em;
	 font-weight: bold;
	 font-style: normal;
	 text-transform: none;
	 text-align: left;
	}


#importantDates thead th
   {
    text-align:center;
    color: #FFFFFF;
    background: #083643;
    border:none;
   }

#importantDates tbody tr
   {
    text-align:left;
    border:none;
    font-size: 0.8em;
   }

#importantDates tbody tr.even
	{background:#ADC1FC;}

#importantDates tbody tr.odd
	{background:#CEDFF3;}


#sponsors
	{
	 margin-top: 0px;
	 border: thin solid #083643; 
	 background:#ADC1FC;
	}
	
#sponsors a:hover.sponsorsLink, #sponsors a:active.sponsorsLink, 
#sponsors a:visited.sponsorsLink, #sponsors a:link.sponsorsLink
	{
	 text-decoration: none;
	 display: block;
	 background:#ADC1FC;
	 padding-left: 2px;
	 padding-top: 3px;
	border-top: thin solid #083643; 
	}
	
#partners
	{
	 margin-top: 0px;
	 border: thin solid #083643; 
	 background:#ADC1FC;
	}

#partners a:hover.partnersLink, #partners a:active.partnersLink, 
#partners a:visited.partnersLink, #partners a:link.partnersLink
	{
	 text-decoration: none;
	 display: block;
	 background:#ADC1FC;
	 padding-left: 2px;
	 padding-top: 3px;
	border-top: thin solid #083643; 
	}

/***************************************************************/
/***************************************************************/





/***************************************************************/
/* Defines the Footer information at the bottom of the page
/***************************************************************/
#footer
   {
    margin: 40px 10px 40px 10px;
    padding: 0px; 
    display:block;
    clear:both;
    font-size: 0.8em;
   }

#authorInfo
   {
    width: 250px;
    float:right;
    text-align: right;
   }

#validationInfo
   {
    width: 250px;
    float:left;
   }

#footer a:visited,  #footer a:link
   {
    color: #083643;
    text-decoration: none;
   }

#footer a:hover,  #footer a:active
   {
    color: #FFFFFF;
    text-decoration: none;
   }

/***************************************************************/
/***************************************************************/





.currency
	{
	 font-style:italic; 
	 font-size: 0.8em;
	}

.canadianDollars
	{font-size: 1.1em;}
/***************************************************************/
/***************************************************************/





/***************************************************************/
/* Defines the Main Content and other sundries
/***************************************************************/
#mainContentWrapper
   {
    margin:  0;
    margin-left: 210px;
	margin-right: 25px;
	 min-height: 1150px
   }

.hide
   {
	 position: absolute;
	 left: 0px;
	 top: -500px;
 	 width: 1px;
 	 height: 1px;
   }


.greyHide
   {
	 position: absolute;
	 left: 0px;
	 top: -500px;
 	 width: 1px;
 	 height: 1px;
   }
	
/* ================================================================== */
/*  DEFINES THE STYLE OF TAGS THAT HIGHLIGHT IMPORTANT INFORMATION    */
/* ================================================================== */

/* Through the text are pices of information that are highlighted with a
   simple inline header and next to it the information.  
	eg Date: 4th May 2007.
	We want Date: to have a different style to draw attention to it.  These
	classes all represent pieces of such information and how to highlight 
	it 
*/
.chair, .email, .institution, blogger-labels
	{font-weight: bold;}


/* Makes additional information slightly paler so it is there but not predominant*/
.institutionLocation
	{font-style:italic;}
	
/* Defines how an image should look */
img
    {border: 0px;}

img.leftimage
    {
     vertical-align: top;
     float: left;
     margin-top:5px;
     margin-bottom:5px;
     margin-right:15px;
     text-decoration: none;
    }

img.rightimage
     {
      vertical-align: top;
      float: right;
      margin-top:5px;
      margin-bottom:5px;
      margin-left:15px;
      margin-right:15px;
      text-decoration: none;
     }

img.bookmarkIcon
	{
	 width:12px;
	height:12px;
	}
	
#socialBookmarks
	{
		margin:  0;
		margin-right: 210px;
		margin-left: 210px;
		padding: 0px; 
	}

#socialBookmarksInfo
   {
    width: 160px;
    float:right;
    text-align: right;
   }

#socialBookmarksTitle
   {
    width: 160px;
    float:left;
   }

#socialBookmarkLinks
	{
		text-align: center;
	 margin-left: auto;
    margin-right: auto;
    clear: both;
	}
	

	/***************************************************************/
	/* Defines the Important Dates Table on the right hand side
	/***************************************************************/
#alternativeVersions
	   {
	    position: absolute;
	    top: 5px;
	    right:150px;
	    width:300px;
	    margin: 0px;
	    border: none;
	    float:right;
	    clear:right;
		 font-size: 0.8em;
		text-align: right;
	   }
	
#alternativeVersions a:visited,  #alternativeVersions a:link
	{
	 color: #083643;
	 text-decoration: none;
	}

#alternativeVersions a:hover,  #alternativeVersions a:active
	{
	 color: #FFFFFF;
	 text-decoration: none;
	}





/***************************************************************/
/* Defines the Alignment of teh tag cloud
/***************************************************************/	
ul.tagCloudList li
 	{text-align: left; display: inline;}

.googleMap{display:inline; float:right; width:425px;margin-bottom:1em;}
.hotelAddress{display:inline;float:left; width:210px;margin-bottom:1em;}

div.googleMap a{font-size: 0.8em; float:right;	text-align: right;}





/***************************************************************/
/* Defines the Style for the prgramme of events
/***************************************************************/
.event
	{font-weight: bold;}
	
.eventLocation
	{font-style:italic;}

.programme
	{border-top: dashed 1px #083643;}

table.schedule tbody tr td
	{padding: 2px;}

.notice
	{text-transform:uppercase;}

.reception
		{background-color: rgb(255, 255, 204);}	

.conferenceAddress
	{background-color: #ADC1FC;}

.conferenceSession
		{background-color: #CEDFF3;}
		
		
.sessionTime
	{background-color: #FFFFFF;}
	
	
.participant
	{
	 clear:both;
	 margin-bottom: 5px;
	
	min-height: 140px;
	padding: 20px;
	padding: 10px;
	}
	
img.participantImage
	{
	 width:115px;
	 height:130px; 
	 display:inline;
	 float:left;
	border: 1px solid rgb(0,0,0);
	}

.participant dl
	{
	 margin-top: 0px;
	margin-left: 125px;
	}





/*ARCHIVE EBSITE*/

.topMenu
	{
 	 position: absolute;
    top: 125px;
    left: 5px;
    margin: 0;
    float:left;
    clear:left;
	width: auto;
	}
	

/* Creates a wrapper for the navigation sub menu box and defines the text style */
#linearMenu
    {
     padding: 0px;
     margin: 0px;
     list-style: none;
	  display: inline-block;
     display: inline;
	  float: left;
    }

/* The list elements of the navigation menu that contain the links.  These
   should be in one long line and have a dark background to match the header */
#linearMenu li
    {
     float: left;
     margin-top: 10px;
     border: 0px;
     border-left: 1px solid #083643;
     padding: 5px;
     padding-left: 10px;
     padding-right: 10px;
     text-decoration: none;
    }


#linearMenu li.endNavigationItem
    {border: 0px;}
	
	
.newMainContent
{
 margin:  0;
 margin-left: 5px;
margin-top: 50px;
}

.leftColumn
	{
	 display: inline;
    float: left;
	 width: 48%;
	margin: 5px;
	}
	
.rightColumn
	{
	 display: inline;
    float: right;
	 width: 48%;
	margin: 5px;
	}