/*
CSS for Hisa 24 site
*/

#container  {
position: relative;
width: 97%;
margin: 0 auto;
min-height: 100%;
padding-bottom: 60px;
}


#bodycontent {
"font-family: Verdana, Helvetica, Arial, sans-serif;"
background-color: #e2edff;
font-size: small;
color: #333333;
line-height: 125%;
position: relative;
height: 100%;
padding-bottom: 60px;
width: 97%%;
}

#bodycontent2 {
"font-family: Verdana, Helvetica, Arial, sans-serif;"
background-color: #e2edff;
font-size: small;
color: #333333;
line-height: 125%;
position: relative;
height: 100%;
padding-bottom: 60px;
width: 600px;
}


#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#e2edff;
border-top: 5px solid #99CCFF;
}


body {
"font-family: Verdana, Helvetica, Arial, sans-serif;"
background-color: #e2edff;
padding: 0;
padding-bottom: 60px;
line-height: 125%;
height: 100%;
}

#header {
border-top: 3px solid #CCFFFF;
width:100%;
}

#SiteBranding {
height: 50px;
width: 960px;
}



#tagline {
font-style: italic;
text-align: center;
"font-family: Georgia, Times, serif;"
background-color: #99CCFF;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .5em;
padding-bottom: .5em;
padding-left: .8em;
margin: 0;
width: 100%;
}

#navigation {
width: 100%;
top: 80px;
height: 50px;
}



<!-- css to create 2 unequal columns 60-40 -->
/* Clear floats after the columns */
.row:after {
"    content: """";"
    display: table;
    clear: both;
}

.column {
    float: left;
}

.left {
    width: 60%;
}

.right {
    width: 40%;
}

<!-- end of css to create 2 unequal columns -->


<!-- css to create 2 unequal columns 70-30 -->
/* Clear floats after the columns */
.row2:after {
"    content: """";"
    display: table;
    clear: both;
}

.column2 {
    float: left;
}

.left2 {
    width: 70%;
}

.right2 {
    width: 30%;
}

<!-- end of css to create 2 unequal columns -->

<!-- css to create 2 equal columns -->
/* Clear floats after the columns */
.row3:after {
"    content: """";"
    display: table;
    clear: both;
}

.column3 {
    float: left;
}

.left3 {
    width: 50%;
}

.right3 {
    width: 49%;
    padding-left: 1%;
}

<!-- end of css to create 2 equal columns -->


p {
font-size: small;
color: #333333;
}

em {
text-transform: uppercase;
}

"h1, h2, h3 {"
"font-family: Georgia, Times, serif;"
}

h1 {
font-size: x-large;
color: navy;
padding-top: .5em;
padding-bottom: .6em;
margin: 0;
}
h2 {
margin-top: 15px;
}

h2 {
color: navy;
font-size: large;
font-weight: bold;
line-height:20%;
padding-top: 5px;
}

h3 {
color: navy;
font-size: medium;
font-weight: bold;
line-height:20%;
padding-top: 5px;
}


#box  {
width: 300px;
border:1px solid #7da5d8;
background-color: #CBD5E6;
padding-left: 5px;
padding-right:5px;
border-radius: 10px ;
}

#box2  {
width: 300px;
text-align: center;
border:1px solid #7da5d8;
background-color: #CBD5E6;
padding-left: 5px;
padding-right:5px;
border-radius: 10px ;
}
#box3  {
max-width: 100px;
text-align: center;
border:1px solid #7da5d8;
background-color: #FFFFCC;
padding-left: 5px;
padding-right:5px;
border-radius: 20px ;
}

#box4  {
max-width: 30%;
text-align: center;
border:1px solid #7da5d8;
background-color: #FFFFCC;
padding-left: 5px;
padding-right:5px;
}

#box5  {
max-width: 500px;
text-align: center;
border:1px solid #7da5d8;
background-color: #CBD5E6;
padding-left: 5px;
padding-right:5px;
border-radius: 10px ;
}

#box6  {
max-width: 200px;
text-align: center;
border:1px solid #7da5d8;

padding-left: 5px;
padding-right:5px;
border-radius: 20px ;
}

#box7  {
max-width: 960px;
text-align: center;
border:3px solid #7da5d8;

padding-left: 5px;
padding-right:5px;
border-radius: 20px ;
}

#box8  {
width: 300px;
font-size: x-large;
text-align: center;
border:1px solid #7da5d8;
background-color: #90EE90;
padding-left: 5px;
padding-right:5px;
border-radius: 10px ;
}

#box9  {
max-width: 100%;
text-align: center;
border:3px solid #7da5d8;

padding-left: 5px;
padding-right:5px;
border-radius: 20px ;
}

#box10  {
max-width: 80%;
text-align: center;
border:1px solid #7da5d8;
background-color: #CBD5E6;
padding-left: 5px;
padding-right:5px;
border-radius: 10px ;
}

#box11 {
max-width: 97%;
text-align: center;
border:1px solid #7da5d8;
padding-left: 5px;
padding-right:5px;
border-radius: 10px ;
}



#smallbox  {
max-width: 200px;
border:1px solid #7da5d8;
background-color: #CBD5E6;
padding-left: 5px;
padding-right:5px;
border-radius: 10px ;
}

#smallbox2 {
max-width: 200px;
background-color: #CBD5E6;
padding: 5px;
border-radius: 0   20px 20px 0 ;
}

#smallbox3 {
max-width: 400px;
background-color: #CBD5E6;
padding: 5px;
text-align: center;
}

#smallbox4 {
max-width: 500px;
background-color: #99CCFF;
padding: 5px;
text-align: center;
}

#smallbox5 {
max-width: 80%;
background-color: #99CCFF;
padding: 5px;
text-align: left;
}

#bigbox  {
border:1px solid #7da5d8;
background-color: #CBD5E6;
padding-left: 5px;
padding-right:5px;
width: 450px;
}

#bigbox2 {
font-size: small;
border:1px solid #7da5d8;
background-color: #e2edff;
padding-left: 5px;
padding-right:5px;
width: 95%;
border-radius: 20px ;
}

#bigbox3 {
border:5px solid #7da5d8;
background-color: #e2edff;
padding-left: 5px;
padding-right:5px;
width: 100%;
border-radius: 10px ;
}

#bigbox4 {
border:1px solid #7da5d8;
background-color: #99CCFF;
padding-left: 5px;
padding-right:5px;
width: 100%;
border-radius: 10px ;
}

#bigbox5 {
border:5px solid #7da5d8;
background-color: #e2edff;
padding-left: 5px;
padding-right:5px;
width: 100%;
border-radius: 10px ;
}

#bigbox6 {
border:2px solid #7da5d8;
background-color: #e2edff;
padding-left: 5px;
padding-right:5px;
width: 97%;
border-radius: 10px;
text-align: center;
}

#bigbox7 {

padding-left: 5px;
padding-right:5px;
width: 97%;
text-align: left;
}



#bigbox8 {
border:2px solid #7da5d8;
padding-left: 5px;
padding-right:5px;
width: 97%;
border-radius: 10px;
text-align: left;
}

#bigbox9 {

padding-left: 5px;
padding-right:5px;
width: 97%;
text-align: center;
}


ul#list-nav {
  list-style:none;
  
  padding:0;
  width:960px
}

ul#list-nav li {
  display:inline
}

ul#list-nav li a {
  text-decoration:none;
  padding:5px 0;
  width:136px;
  height:30px;
  background:#485e49;
  color:#eee;
  float:left;
  text-align:center;
  border-left:1px solid #fff;
}

ul#list-nav li a:hover {
  background:#a2b3a1;
  color:#000
}

ul#list-nav2 {
  list-style:none;
  
  padding:0;
  width:960px
}

ul#list-nav2 li {
  display:inline
}


ul#list-nav2 li a {
  text-decoration:none;
  padding:5px 0;
  width:119px;
  height: 30px;
  background:#485e49;
  color:#eee;
  float:left;
  text-align:center;
  border-left:1px solid #fff;
}

ul#list-nav2 li a:hover {
  background:#a2b3a1;
  color:#000
}

ul#list-nav3 {
  list-style:none;
  
  padding:0;
  width:1366px
}

ul#list-nav3 li {
  display:inline
}

ul#list-nav3 li a {
  text-decoration:none;
  width:14.2%;
  height: 50px;
  padding-top: 6px;
  
  color:navy;
  float:left;
  text-align:center;
  
}

ul#list-nav3 li a:hover {
  background:#a2b3a1;
  color:#000
}




ul#foot-nav {
  list-style:none;
  padding:0;
  width:960px
}

ul#foot-nav li {
  display:inline
}

ul#foot-nav li a {
font-size: small;
  text-decoration:none;
  padding:2px 0;
  width:136px;
  background:#485e49;
  color:#eee;
  float:left;
  text-align:center;
  border-left:1px solid #fff;
}

ul#foot-nav li a:hover {
  background:#a2b3a1;
  color:#000
}

ul#leftmargin{
margin-left: 10%;
}

ul#smallfont {
font-size: small;
color: #333333;
}

ul#mediumfont {
font-size: medium;
color: #333333;
line-height: 150%;
}




ul#changefont {
font-size: small;
color: navy;
}

#splitpage {
position: absolute;
left: 52%;
top: 230px;
}




.aside {
float: right;
top:50px;
width:400px;
}



.galleryphoto img {
border: 15px solid white;
}
.galleryphoto p {
font-size:65%;
font-weight:bold;
margin-top: 0;
width: 430px;
line-height: 1.4em;
}


.photocredit {
font-weight: bold;
line-height:30%;
color: #0000FF;
}



#columnright {
position:absolute;
top:120px;
left:53%;
}

#columnright3 {
position:absolute;
top:3%;
padding-right:15px;
left:53%;
}

#columnright2 {
position:absolute;
top:11%;
left:60%;
width: 40%;
}

#acrosspage {

height: 20%;
width: 100%;
}

#linkphoto {
position:absolute;
top: 200px;
left: 0;
}

#linkphoto2 {
position:absolute;
top: 12.5%;
}

#linkphoto3 {
position:absolute;
top: 100%;
left: 5%;
}

#linkphotocentre {
position:absolute;
top:10%;
left:25%;
}

#linkphotocentre2 {
position:absolute;
top: 200px;
left:25%;
}

#linkphotocentre3 {
position:absolute;
top:12.5%;
left:25%;
}

#linkphotocentre4 {
position:absolute;
top:100%;
left:30%;
}

#linkphotoright {
position:absolute;
top: 10%;
left:50%;
}


#linkphotoright2 {
position:absolute;
top: 200px;
left:50%;
}

#linkphotoright3 {
position:absolute;
top: 12.5%;
left:50%;
}

#linkphotoright4 {
position:absolute;
top: 100%;
left:55%;
}

#photo3 {
position:absolute;
top: 15%;
left:50%;
}

#linkphotothree {
position:absolute;
top: 10%;
left:75%;
}


#linkphotothree2 {
position:absolute;
top: 200px;
left:75%;
}

#linkphotothree3 {
position:absolute;
top: 100%;
left:80%;
}

#linkphoto4 {
position:absolute;
top: 12.5%;
left:75%;
}

#centre2 {
position:absolute;
top: 0px;
left:50%;
}

#centre1 {
position:absolute;
left:33%;
}

#floatright {
float: right;
}

#floatright2 {
float: right;
font-size:medium;
padding-right: 90px;
}

#widgetright  {
position: absolute;
top: 25px;
left: 80%;
max-width: 175px;
text-align:justify;

background-color: #CBD5E6;
border-radius: 10px;
padding-left: 10px;
padding-right:10px;
}

#photoright {
position:absolute;
top: 20px;
left: 55%;
width:200px;
}

#columnmoreright {
position:absolute;
left:460px;
top: 10%;
width:460px;
line-height: 180%;
font-size:large;
font-weight: bold;
color: #0000FF;
}

#columnright1 {
position:absolute;
left:820px;
top: 10%;
max-width:550px;
line-height: 180%;
font-size:large;
font-weight: bold;
color: #0000FF;
}

#columnright5 {
position:absolute;
top: 10%;
left:53%
max-width:550px;
}




#columnleft {
width:480px;
}


#columnleft2 {
width:55%;
top: 10%;
}


#threecolumns1 {
width:450px;
font-size:small;
}

#threecolumns2 {
position: absolute;
top: 150px;
left:455px;
width:450px;
font-size:small;
}

#threecolumns3 {
position: absolute;
top: 150px;
left:910px;
width:450px;
padding-right:15px;
font-size:small;
}


#columnlefttwo {
position:absolute;
left:10px;
width:480px;
height: 100%;
}

#columnleftthree {
align: left;
width:480px;
}



#adjustleftborder {
position:absolute;
left:7%;
}
#nav {float: right;
}


.mainimage {
  max-width: 97%;
border-radius: 20px ;
}

.bigimage {
width: 100%;
   border-radius: 10px ;
}

.bigimage2 {
width: 80%;
   border-radius: 10px ;
}

.mediumimage {
max-width: 60%;
   border-radius: 10px ;
}

.center5 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

.smallimage {
  max-width: 15%;
padding-left: 5px;
padding-right:20px;
}

.smallimage2 {
  max-width: 200px;
border-radius: 0   20px 20px 0 ;
padding: 5px;
}
.smallimage3 {
  max-width: 200px;
border-radius: 20px   0 0  20px ;
padding: 5px;
}

.smallimage4 {
  max-width: 300px;
border-radius: 20px   20px 20px  20px ;
padding: 5px;
}

.smallimage5 {
  max-width: 400px;
border-radius: 20px   20px 20px  20px ;
padding: 5px;
}

.smallimage6 {
  max-width: 100px;
border-radius: 20px   20px 20px  20px ;
padding: 7px;
}

.smallimage61 {
  max-width: 200px;
border-radius: 20px   20px 20px  20px ;
padding: 7px;
}

.smallimage7 {
  max-width: 400px;
border-radius: 0  20px   20px   0;
padding: 5px;
}

.smallimage8 {
width: 600px;
border-radius: 0  10px   10px   0;
padding: 5px;
}

.smallimage9 {
max-width: 20%;
padding: 5px;
}

.smallimage22 {
max-width: 45%;
padding: 5px;
}

.smallimage21 {
max-width: 600px;
padding: 5px;
}


.smallimage20 {
  max-width: 225px;
border-radius: 0   20px 20px 0 ;
padding: 5px;
}
.smallimage30 {
  max-width: 225px;
border-radius: 20px   0 0  20px ;
padding: 5px;
}

.smallimage40 {
  max-width: 200px;
  max-height: 20px;
padding: 5px;
}

.smallimage50 {
  max-width: 50px;
padding-left: 5px;
padding-right:20px;
}

.flagimage {
  max-width: 70px;
  max-height: 30px;
padding: 0px;
}

.flagimage2 {
  max-width: 30px;
  max-height: 20px;
padding: 0px;
}


.transparent {
  max-width: 100px;
border-radius: 20px ;
background-color: #e2edff;
padding: 5px;
}


.roundedframe {
border-radius: 20px ;
}

.colorchange {
color:  black;
}