@charset "utf-8";


/*
------------------------------------------------------------------------
  This is the universal selector: It allows us to style every element
  on a page. In this case, we remove the default browser padding 
  and margin on every element. What's impt to know is that IE and Moz
  behave differently in terms of the box model. If you add margins or
  padding to a div, Moz will increase the size of that div, whereas IE
  will keep the div the same size. To avoid complicated hack coding, 
  we make margins and paddings zero. 
------------------------------------------------------------------------
*/
* {
  margin: 0;
  padding: 0;
}


html {
  font-size: 100%; /* browsers default to 16px */
}


/* Styles applying to the entire page */
body {
  font-size: 1em; /* which is 16px since browsers default to 16px */
  color: #000000;
  background: #ffffff;
  text-align: center; /* for IE5 and 6 - centers everything */ 
  height: 100%;

  /* Chinese fonts: the idea is to choose the least likely fonts belonging to the least popular platforms, 
     so starting with linux and going to mac then to microsoft, then finally to a totally generic font. 
     Note that Android comes with Droid Sans that has nice Chinese characters, so no need to even specify, 
     it is the default font and will be picked by sans-serif otherwise. */
  font-family: Arial, 
              "文泉驛正黑", "文泉驿正黑", "WenQuanYi Zen Hei", 
              "儷黑 Pro", "LiHei Pro", Heiti TC, Heiti SC, Hei, 
              "微軟正黑體", "Microsoft JhengHei", "微软雅黑体", "Microsoft YaHei",
              "標楷體", DFKai-SB, 
              sans-serif; 
}


/* 
-------------------------------------------------------------------------------------------
Styles for the gallery page
-------------------------------------------------------------------------------------------
*/

body {  /* overriding the previous definitions */
   background-color: #292929;
}


#contentGalleryPage {
   background-image: url('img/pageheader596x70repeating.jpg');
   background-repeat: repeat-x;
}


/* 
-------------------------------------------------------------------------------------------
Media queries to choose which page headers and font-sizes to use for different 'screens'.
Image is only 'set' and therefore downloaded after the media query, so you don't make 
user download all the different versions of the page header banners. I am catering for
the following screen/browser resolutions (widths):

  - 1440px 
  - 1280px
  - 1024px
  - 768px
  - 480px
  - 320px

How the bg img is displayed:
(Source: http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/)

- using 'cover' for background-size we are telling browsers to scale UP the image to 
  cover the container's size.

- we specify width as 100% so the image is always expanded to fit the container width
  i.e. to fit the browser window width.

- but we don't want the image to get expanded vertically out of the container, so we
  use padding-bottom to 'squeeze it back in'... The formula for the percentage of padding
  is given by the ratio height/width of the image.

-------------------------------------------------------------------------------------------
*/


@media only screen and (min-width:1281px) { 

   body { font-size: 1.25em; /* expand to 20px from browsers default 16px */  }

   #pageheader {
      background-image: url('img/pageheader1400x460.jpg');
      background-size: cover;
      width: 100%;
      padding-bottom: 32.86571429%; 
      background-position: center; /* IE fix */
   }
}

@media only screen and (max-width:1280px) {

   body { font-size: 1.125em; /* expand to 18px from browsers default 16px */ }

   #pageheader {
      background-image: url('img/pageheader1200x460.jpg');
      background-size: cover;
      width: 100%;
      padding-bottom: 38.3333333%; 
      background-position: center; /* IE fix */
   }
}

@media only screen and (max-width:1024px) {

   body { font-size: 1em; /* stick to browsers default 16px */ }

   #pageheader {
      background-image: url('img/pageheader1000x460.jpg');
      background-size: cover;
      width: 100%;
      padding-bottom: 46%; 
      background-position: center; /* IE fix */
   }
}

@media only screen and (max-width:768px) {

   body { font-size: 1em; /* stick to browsers default 16px */ }

   #pageheader {
      background-image: url('img/pageheader760x460.jpg');
      background-size: cover;
      width: 100%;
      padding-bottom: 60.5263158%; 
      background-position: center; /* IE fix */
   }
}

@media only screen and (max-width: 480px) {

   body { font-size: 0.875em; /* go down to 0.875em, i.e. 14px since browsers default to 16px */ }

   #pageheader {
      background-image: url('img/pageheader480x300.jpg');
      background-size: cover;
      width: 100%;
      padding-bottom: 62.5%; 
      background-position: center; /* IE fix */
   }

}

@media only screen and (max-width: 320px) {

   body { font-size: 0.75em; /* go down to 0.75em, i.e. 12px since browsers default to 16px */ }

   #pageheader {
      background-image: url('img/pageheader317x200.jpg');
      background-size: cover;
      width: 100%;
      padding-bottom: 63.0914826%; 
      background-position: center; /* IE fix */
   }

}


/* 
-----------------------------------------------------------------
 The wrapper div contains the nav, content, links, footer divs.
 It's positioned in the center of the page using auto margins 
 Note however auto margins don't work in IE5 and 6 -- for these
 browsers, specify text-align:center under the body element and 
 set text-align:left here. 
-----------------------------------------------------------------
*/
#wrapper {

  width: 100%;
  /*height: 100%;*/  /* Don't use this - unnecessary - and causes a horizontal line to show across screen in Firefox! */
  margin: 0 auto;
  text-align: left;
  }

#content {  /* content is a container DIV; contains various DIVs */

  width: 100%;
  z-index: 1;
  text-align: left;

  border: 1px solid #a0a0a0;
  overflow: auto; /* will keep nested elements within this div */
  position: relative;
  top: 0px;

    /* background gradient fill, generated at the fantastic http://www.cssmatic.com/gradient-generator */
    background: rgba(143,218,255,1);
    background: -moz-linear-gradient(top, rgba(143,218,255,1) 0%, rgba(214,243,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(143,218,255,1)), color-stop(100%, rgba(214,243,255,1)));
    background: -webkit-linear-gradient(top, rgba(143,218,255,1) 0%, rgba(214,243,255,1) 100%);
    background: -o-linear-gradient(top, rgba(143,218,255,1) 0%, rgba(214,243,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(143,218,255,1) 0%, rgba(214,243,255,1) 100%);
    background: linear-gradient(to bottom, rgba(143,218,255,1) 0%, rgba(214,243,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fdaff', endColorstr='#d6f3ff', GradientType=0 );

} 

  
/* ------------------------------------------------------------ */
/* links and buttons							*/
/*								*/
/* Note: navigation links are formatted in responsive-nav.css   */
/* but are actually the same as in here，except that <a> links  */
/* are not specified to be displayed as inline-block.		*/
/* And font-family defined for body element			*/
/* ------------------------------------------------------------ */

a {  
  color: #0052c1;
  font-size: 1.125em;  /* 18px for common browser default of 16px */
  text-decoration: none;
}

a:hover, a:active {
  color: #000000;
}

/* browsers render buttons differently, so the site will come up 
loloking quite different across different computers and browsers..
I'd rather style the button simply, as text in a box, to fit in 
with the style of my links, as the button would be placed in the
nav bar anyway..
*/ 
button {
  color: #0052c1;
  font-size: 1em; 			/* same size as links */
  border: 1px solid #0052c1;		/* defining button border/bg color turns off browser's button styling */
  border-radius: 4px; 			/* slightly rounded border */
  background-color: rgba(143,218,255,1);/* same color as backgrd */ 
  margin-left: 0.625em;			
  vertical-align: top;			/* positioning... used with margin-top */
  margin-top: 0.25em;
}



/* ------------------------------------------------------------ */
/* headers, titles						*/
/* ------------------------------------------------------------ */

h2 {
  color: #224466;
  margin: 2.5em; 
  } 
  
h3 {
  font-size: 1.2em;
  font-weight: bold;
  color: #116699;
  margin-top: 1.5em; 
  margin-right: 5em;
  margin-bottom: 3em;
  margin-left: 5em;
  }  

h4 {
  font-size: 1em;
  font-weight: bold;
  color: #116699;
  margin-right: 2em;
  }  

  
/* ------------------------------------------------------------ */
/* Calendar events for Activities.htm page			*/
/* ------------------------------------------------------------ */  


.calendarEvent {
  color: #000044;
  font-size: 1.0em;
  text-align: left;
  margin-top: 0em;
  margin-right: 5em;
  margin-bottom: 3em;
  margin-left: 5em; /* indent */
  line-height: 2em;
  }   


.dtstart, .dtend {
  font-size: 1em;
  font-weight: bold;
  color: #116699;
  }  

.TGCL { 
/* I want the info to be parsed by whatever is retrieving the event info, 
but the location info does not need to be shown as it is the usual place */ 
  display: none;
}


/* ------------------------------------------------------------ */
/* lists, paragraphs						*/
/* ------------------------------------------------------------ */  


ul {
  color: #000044;
  font-size: 1.0em;
  text-align: left;
  margin-top: -2em;  /* reduce top margin so p will be closer to header */
  margin-right: 5em;
  margin-bottom: 4em;
  margin-left: 5em; /* indent */
  line-height: 2em;
  list-style-type: disc;
  }   
  
li {
  margin-bottom: 1.2em;
  }  
  
p {
  margin-top: -2em;  /* reduce top margin so p will be closer to header */
  margin-right: 5em;
  margin-bottom: 4em; /* bottom 4em, top -2em, so effective 2em bottom */
  margin-left: 5em;
  line-height: 2em;
  
  }    


/* ------------------------------------------------------------ */
/* images							*/
/* ------------------------------------------------------------ */
  
img {
  margin-top: 0em;
  margin-bottom: 0em;
  }  
  
img.floatRight {
  border: 1px silver solid;
  float: right;
  margin-left: 1.5em;
  margin-right: 0em;
  }  

img.floatLeft {  
  border: 1px silver solid;
  float: left;
  margin-left: 0em;
  margin-right: 1.5em;
  display: block;
  }  
  
img.lineUpClose {  
  border: 1px silver solid;
  float: none;
  margin-left: 0.1em;
  margin-right: 0.1em;
  }  
  
img.plain {
  border: none;
  }  

img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto 
}
  

/* ------------------------------------------------------------ */
/* others							*/
/* ------------------------------------------------------------ */

.emphasis {
  font-weight: bold;
}


.center {
  text-align: center;
  }

#footer {
  text-align: center;
  margin-top: 2em;
  margin-right: 0em;
  margin-left: 0em;
  margin-bottom: 3em;
  font: 0.8em serif;
  }  

table, td {
  border: 1px solid silver;
  border-collapse:collapse;
  width: 100%;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  font-size: 1em;
  color: #000000;
}