@charset "UTF-8";

/* CSS Document */

/*
     Name:           event-styles.css
     Designer:       Chrys Antaya, Whitehorse, Yukon
	 Assignment:     Website for Lama Lodro, Whitehorse, Yukon
	 Launched:       2012 February 01
     Updated:        2014 February 24
     W3C Validated:  for CSS Level 2.1
	 
	 This is one of three style sheets:

     1.  lamalodro-schedule-styles.css is the primary style sheet for one multimedia XHTML page: lamalodro-schedule. It targets regular computer screens.
		 
	 2.  print_styles.css style sheet targets printers.

	 3.  handheld_styles.css style sheet is a DRAFT in process that, ultimately, will format the XHTML pages for handheld media devices.
	
     The primary navigation bar on the XHTML multimedia page is a horizontal arrangement of an unordered list of the hyperlink anchor tags.
	 
	 Organization in this style sheet starts with the body.
	 Everything else, including navigation links, follows in alphabetical order based on the first letter of the line (A-Z).
*/


body {
	background-color:      #5200A3;
	background-image:      url(../images/events/northernlights-web2560x1440.jpg);
	background-repeat:     no-repeat;
	background-attachment: fixed;
	background-position:   top center;
	font-family:           Tahoma, Geneva, sans-serif;
	line-height:           150%;
}


/* from W3C re: sequence for attributes in just one background line  

    background-color
    background-image
    background-repeat
    background-attachment
    background-position

*/

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for pseudo-class hyperlinks -- excludes the additional styling for the primary navigation bar which is done at .nav below  ~~ */

/*a:link {
	color:           #0033FF;   /*  blue */
	text-decoration:  underline; /* provides underline for quick visual identification of unvisited links -- excluding the navigation bar
} */


a:link {
	color:           #7A007A;   /*  magenta */
    background-color: #99FFEB;  
	text-decoration:  none;
	border:           4px solid #00E6E6; /* pretty blue */
	padding:          6px;
}           


a:visited {
	color:           #0033FF;   /*  blue */
	text-decoration: underline;
}

a:hover, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color:            #000;   /*black font*/
	background-color: #75FFFF;  /* soft blue */
	border:           #9966FF 2px solid;
	padding:          1px;
	text-decoration:  none;     /*removes underline */
	font-weight:      bold;
}

a:active {
	color: #CC3300;   /*  turquoise */
}

#agenda ul { 
	padding-left:  180px;  /* large indent for lists of short line items */
}

.annotate {
	font-weight: normal;
	font-size:  18px;	
}

.annotate p ol {
	width:   800px;
	margin:  0 auto;
	text-align:justify;
	
	}

/* ~~this fixed width container surrounds the other divs and contains most of the body element ~~ */
.container {
	width: 1050px;
	margin: 0 auto; /* the auto value on the sides centers the layout */
}

/* ~~this fixed width "content" contains the main text and data on the web pages ~~ */
.content {
	width:   1050px;
	margin:  0 auto;	
}

/* .content p {
	background-color: #58BF97;
	font-weight:      bold;
    text-align:       center;  
	border:           3px solid #00E6E6;   active is pretty blue  unactive is teal #58BF97; russet brown  2px solid #7B3F23; 
}  */

/* ~~this fixed width "contents" is wider than text "content" to allow side extension of background image for graphic margins on left and right ~~ */
.contents {
	width:    1055px;
/*	border:   3px solid #0F6649;  */
}

.divider {
	border: solid 2px #0F6649;
}

/* ~~ Element/tag selectors ~~ */
dl, ol {
    background-color: #56AE92;
	padding-top:      10px; 
	padding-right:    20px;
	padding-left:     35px;
	margin:           0;
	border:           2px solid #0099FF;	
}

/* ~~ The footer ~~ */
.footer {
	padding:          5px 8px 5px 5px;
	margin-top:       20px;
	color:            #000000;
	background-image: url(../images/events/aurora2-gradient1050x40.jpg);
	font-style:       italic;
	font-size: 16px;
	border:           4px solid #00E6E6; /* pretty purple #99F; */
	text-align: center;
}

.footer img  {
	padding-top: 1.1em;
	padding-bottom: 1em;
	margin-right: 1em;
	margin-left: 0;
}

/* ~~ this formats an internal hyperlink that returns to top of the page ~~ */
.gotop {
	font-style:  normal;
	font-size:   .9em;
	font-weight: bold;
	font-style:  italic;
}

h1, h2, h3, h4, h5, h6, h7, h8, p {
	margin:     0;
	padding:    0;
}

h1 {
	font-size:    1.5em;
	font-weight:  bold;
	color:        #7A007A;  /* active is  burgandy; dark russet brown #7A0000;   blue #0000E6;  #7A007A;   two purples #7A00CC; #6600FF;  unactive is  */
	text-align:   center;
	padding:      0.5em 0 0 0;	
}

h2 {
	font-size:    1.35em;
	font-weight:  bold;
	color:        #000099;  /* active is indigo blue  #7A007A; two purples #7A00CC; #6600FF;  unactive is dark russet brown #7A0000; */
	text-align:   center;
	padding:      0.5em 0 0 0;
}

h3  {
	font-size:   1.3em;
	font-weight: bold;
	color:       #6600FF;  /* pretty purple */
	text-align:  center;
	margin:      0 auto;
	padding:     0.5em 0 0 0;		
}

h4 {
	font-size:    1.1em;
	font-weight:  bold;
	color:        #000099;  /* active is indigo blue; dark russet brown #7A0000;   purple #0000E6;  #7A007A;   two purples #7A00CC; #6600FF;   */
	text-align:   center;
	padding:      0.5em 0 0 0;
	line-height: 200%;
}

h5  {
	font-size:   1.1em;
	font-weight: bold;
	color:       #60C;     /*   #6600FF;   pretty purple */
	text-align:  center;
	margin:      0 auto;
	padding:     0.5em 0 0 0;
	line-height: 200%;
}

h6  {
	font-size:   0.9em;
	font-weight: bold;
	padding:     0.5em 0 0 0;
	color:       #7A007A;
	font-family: Tahoma, Geneva, sans-serif;
	font-style: normal;
	line-height: 200%;
	font-variant: normal;
}

h7  {
	font-size:   1em;
	font-weight: bold;
	padding:     0.5em 0 0 0;
	color:       #000000;
	line-height: 200%;
}

h8 {
	font-size: 1.1em;
	font-weight: bold;
	color:     #6600FF;
	font-family: Tahoma, Geneva, sans-serif;
	font-style: normal;
	line-height: 200%;
}

h9 {
	font-size:    1.3em;
	font-weight:  bold;
	color:        #7A007A;  /* active is  burgandy; dark russet brown #7A0000;   blue #0000E6;  #7A007A;   two purples #7A00CC; #6600FF;  unactive is  */
	text-align:   center;
	padding:      0 0 0 0;	
}

.header {
		text-align:       center;
		padding-bottom:   10px;
}

/* ~~ primary styles for horizontal navigation bar, which is immediately below the ID-logo heading at the very topl
      the navigation bar is very distinct, and the text is large and clear at request of my husband and other commentators (all of whom detest obsure navigation tools) ~~ */

/*.header .nav  {
	width:             1000px;	
}  */

.info  {
	background-image: url(../images/events/aurora3-gradient1050x40.gif);
	border:           4px solid #00E6E6; /* pretty blue */
	margin: 0 auto;
	text-align: center;
}

.info li {
	margin:     0;
	text-align: justify;
	font-weight: bold;
	font-size:  1.1em;
	color:      #7A007A;
	padding:   0 0 1em 0;
}

.info p {
	padding: 0 ;
	margin:  0 auto;
}

.info ul {
	margin:     0;
	text-align: justify;
	line-height:  110%;
	padding:    0 6em 0 7em;
}

.list2 ul {
	padding:  0.3em 0 0 6em;
}

.list2 li {
	text-align: left;
	font-weight: bold;
	font-size:  1.0em;
	color:      #7A007A;
	padding:    0 0 0 0em;
}

.margin { margin-bottom: 5em;
}

.nav {
	background-image: url(../images/events/aurora4-gradient1050x40.gif);  /* unactive is blue-green  url(../images/landscapes/emerald-gradient-web1015x40); */
	margin-right:      auto;
	margin-left:       auto;
	text-align:        center;
	font-size:         1em;
	font-weight:       bold;
	padding-top:       6px;
	padding-bottom:    6px;
	border:            4px solid #00E6E6; /*  #00FFFF; #00CCFF;  active is blue  unactives are pretty teal #58BF97;  russet brown 2px solid #7B3F23; and beige #9f8e61;  */
}


/* ~~ navigation bar is an unordered list, and these commands remove the bullets and floats hyperlinks into a horizontal line ~~ */
.nav li {
		display:          inline;
		list-style-type:  none;

	
}

/* ~~ creates a defined block of space around the navigation links which act as a hyperlink "button" ~~ */ 
.nav li a {
 	margin:            0 8px 0 8px;
	color:             #94FF70;   /*  pastel green */  
	background-image:  url(../images/events/aurora-gradientbutton2-web150x40.jpg);
/*  background-color:   off - put open frame around links and let nav background colour through;  unactive is earth-toned teal  #87b79b;  */
	padding:           5px 20px 5px 20px;
	margin-right:      20px;
	margin-left:       20px; 
	border:            2px solid #A319A3;    /* active border is same magneta shade as .info h1, other options are #58BF97;  #8e7c4d; */
}

/* ~~ styling for primary menu of site link anchor tags in the top navigation bar ~~ */

.nav li a:link {
	color:    #94FF70;   /*  pastel green */  
	text-decoration: none; /* removes underline, which is replaced as a visual cue for live hyperlinks by the navigation button format*/
}
	
.nav li a:hover, a:focus { /* this group of selectors is to give a keyboard navigator the same hover experience as with using a mouse.
							  font size expands only in navigation bar. the font size and background colour are same for all hyperlinks in webpages for continuity */
	color:            #639;
	background-image: url(../images/events/aurora-gradientbutton-web150x40.jpg);
	text-decoration:  none;
	border:           2px solid #9966FF;;  /* purple */
}	

/* ~~ styling for secondary submenus in the navigation bar ~~ */

.nav li ul {    /* keeps submenu from displaying with the primary anchor tags on the navigation bar */
	display: none; 
	background-color: #69f;
}

/* ~~ causes submenu to appear when cursor hovers over the containing list item 
	  using position: absolute to ensure submenus don’t push any content below the navigation out of the way ~~ */

.nav li:hover ul { 
	display: block;
	position: absolute;
/*	margin-top: 1.2em;
	margin-left: 6.5em;    */
	padding: 0;
}

.nav ul { /*  creates a narrow "ribbon" that visually connects the separately spaced navigation buttons  */
/*    background-color:  #58BF97; 
	border-top:        1.9px solid;
	border-bottom:     1.9px solid;
	border-color:      #1919FF;  */
	padding:           0;
}

.portrait1, .page_id {
	margin:      0 auto;
	text-align:  center;
}

.portrait1 img {
	margin:      0 auto;
	text-align:  center;
	border:      #00A3CC medium solid;
}

.referencelinks {
		background-color: #56AE92;
		padding-top:      15px;
		padding-bottom:   10px;	
}

table {
	margin:      0 auto;
	/*padding-left: 125px; */
	color:        #000099; /* dark blue */
	font-weight: bold;
}

td {
	text-align:left;
	font-family: Tahoma, Geneva, sans-serif;
	line-height: 150%;
}