/* ********************************************************************** **
** provide css code for styling the main structure of the site            **
** ********************************************************************** */
body {
    padding: 0;
    margin: 0;
    font-size: 0.8em;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url('/media/background.jpg');
    background-repeat: repeat-x;
    background-position: top left;   
}

#content {
    padding: 35px 0 35px 0;
    margin: 0;    
    width: 960px;
    margin: auto;
}
#content #content-left {
    float: left;
    margin: 0;
    width: 230px;
    padding: 0 25px 0 0;
    border-right: solid 1px #a2a4a7;        
}
#content #content-right {
    float: right;
    width: 675px;
}
#content #content-right a:link,
#content #content-right a:visited,
#content #content-right a:active {
    color: #00adee;
    font-weight: bold;
    text-decoration: none;  
}
#content #content-right a:hover {
    text-decoration: underline;  
}
#content #content-right #contact-details {
    display: block;
    background-color: #e7e8e9; 
    float: left;
    margin-top: 20px;
    padding: 10px;      
}
#content #content-right #contact-details a:link,
#content #content-right #contact-details a:visited,
#content #content-right #contact-details a:active {
    color: #000000;
    text-decoration: none;  
}
#content #content-right #contact-details a:hover {
    text-decoration: underline;  
}
#content #content-right #contact-details strong {
    color: #00adee;      
}
#content #content-right #contact-details #telephone {
    float: left;
    width: 150px; 
}
#content #content-right #contact-details #email {
    float: left;
    width: 340px;
    text-align: center; 
}
#content #content-right #contact-details #last-updated {
    float: right;
    width: 165px;
    text-align: right;    
}
#content #content-left-home {
    float: left;
    width: 675px;
    padding: 0; 
}
#content .youtube {
    width: 530px;
    height: 400px;
    text-align: center;
    margin: 20px auto;
    vertical-align: middle;
    border: solid 6px #8d8f92;       
}
#content #content-parts {
    float: left;
    margin-top: 20px;    
}
#content img.news {
    height: 200px;
    border: solid 5px #00adee;    
}
#content #content-right-home {
    float: right;
    margin: 0;
    width: 230px;
    padding: 0 0 0 25px;
    border-left: solid 1px #a2a4a7;    
}
#content #contact-us #address {
    color: #404041;
    font-size: 130%;
    font-weight: bold;
    line-height: 1.8em;
}
#content #contact-us #telephone {
    color: #404041;
    font-size: 130%;
    font-weight: bold;
    margin-top: 30px;
    display: block;
    line-height: 1.8em;
    padding-left: 20px;
    background-image: url('/media/link-ico.jpg');
    background-repeat: no-repeat;
    background-position: left center;  
}
#content #contact-us #email {
    color: #00adee;
    font-size: 130%;
    font-weight: bold;
    display: block;
    line-height: 1.8em;
    padding-left: 20px;
    background-image: url('/media/link-ico.jpg');
    background-repeat: no-repeat;
    background-position: left center;  
}
#content a:link.back,
#content a:visited.back,
#content a:active.back {
    color: #404041;
    font-size: 110%;
    font-weight: bold;
    padding-left: 10px;
    text-decoration: none;   
    background-image: url('/media/bullet.jpg');
    background-repeat: no-repeat;
    background-position: left center;    
}
#content a:hover.back {
    text-decoration: underline;   
}
#content #map { 
    width: 665px;
    height: 300px;
    border: solid 5px #00adee;    
}
#footer {
    display: block;
    padding: 15px;
    border-top: solid 7px #bcbdc0;    
}
#footer #footer-content {
    width: 960px;
    margin: auto;    
}
#footer #footer-content a:link, 
#footer #footer-content a:visited,
#footer #footer-content a:active {
    color: #464646;
    font-size: 80%;
    text-decoration: none;   
}
#footer #footer-content a:hover {
    text-decoration: underline;    
}
#footer #footer-content #links {
    width: 100%;
    margin-top: 10px;
    display: block;
}
#footer #footer-content #logos {
    display: 100%;
    display: block;   
}


/* ********************************************************************** **
** provide css code for tools that are used within the site               **
** ********************************************************************** */
.clear {
    clear: both;
}


/* ********************************************************************** **
** provide css code for allowing the user to style the content of page    **
** ********************************************************************** */
.title-blue-bold {
    color: #00adee;
    display: block;
    font-size: 160%;
    font-weight: bold;
    margin-bottom: 7px;
}
.title-blue-bold strong {
    color: #404041;    
}
.title-blue {
    color: #00adee;
    display: block;
    font-size: 160%;
    font-weight: normal;
    margin-bottom: 7px;
}
.title-dark-bold {
    color: #404041;
    display: block;
    font-size: 160%;
    font-weight: bold;
    margin-bottom: 7px;
}
.dark-bold {
    color: #404041;
    font-size: 110%;
    font-weight: bold;      
}


/* ********************************************************************** **
** provide css code for base element styling                              **
** ********************************************************************** */
h1 {
    margin-top: 0;    
}

/* ********************************************************************** **
** provide css code for the large header section of the website           **
** ********************************************************************** */
#header #camera-club {
    width: 960px;
    height: 18px;
    left: 50%;
    margin-left: -480px;
    background-position: left top;
    background-image: url('/media/camera-club.png');
    background-repeat: no-repeat;
    z-index: 0;
    position: absolute;
}
#header #img-header {
    width: 100%;
    vertical-align: middle;    
}


/* ********************************************************************** **
** provide css code for styling the banner section fo the website         **
** ********************************************************************** */
#header-banner {
    top: 20px;
    width: 100%;
    height: 106px;
    position: absolute;
    z-index: 1;
    background-position: left top;
    background-image: url('/media/banner-bg.png');
    background-repeat: repeat-x;
}
#header-banner #search-wrapper {
    float: right;
    width: 300px; 
    margin-top: 25px;  
}
#header-banner #search-bar {
    width: 960px;
    margin: auto;
    height: 100px; 
}
#header-banner #search-bar #search-logo {
    width: 320px;
    height: 64px;
    float: left;
    margin-top: 24px;
    background-position: top left;
    background-image: url('/media/logo.png');
    background-repeat: no-repeat;      
}
#header-banner #google-translate {
    float: right;
    margin: 0;
    border: solid 1px #7a8390;
    display: block;
}
#header-banner #search-box {
    float: right;
    display: block;
    padding: 2px;    
    margin: 0 0 5px 10px;
    background-color: #ffffff;    
    border: solid 2px #7a8390;
}
#header-banner #search-box input.search-txt {
    border: 0;
    margin: 0;
    float: left;
    padding: 0 0 0 5px;
    height: 19px;
    width: 200px;
}
#header-banner #search-box input.search-btn {
    border: 0;
    margin: 0;
    float: left;
    display: inline;
    padding: 0 0 0 3px;
    background-color: #ffffff;
    border-left: solid 1px #bbbbbb;
}
    
    
    

/* ********************************************************************** **
** provide css code for navigation section of the website                 **
** ********************************************************************** */
#navigation {      
    width: 100%;
    padding: 0;
    margin: 0;
    height: 49px;
    background-position: top left;
    background-image: url('/media/navigation-bg.jpg');
    background-repeat: repeat-x;
    border-bottom: solid 5px #ffffff;   
}



/* ********************************************************************** **
** provide css code for the web part boxes that are used on the site      **
** ********************************************************************** */
.box-wrapper {
    float: left;
    width: 230px;
    margin-bottom: 15px;
}
#content #content-parts .rights {
    width: 215px;    
}
#content #content-parts .stay-see {
    width: 215px;
    margin-left: 15px;   
}
#content #content-parts .contact-us {
    width: 215px;
    float: right;
    margin-left: 14px;   
}
.weather {
    margin-bottom: 0;
}
.box-wrapper .title {
    color: #ffffff;
    font-weight: bold;
    display: block;
    float: left;
    width: 208px;
    padding: 7px 10px;
    border: solid 1px #8d8f92;
    background-position: bottom left;
    background-image: url('/media/box-bg.jpg');
    background-repeat: repeat-x;        
}
#content #content-parts .title {
    width: 193px;   
}
.box-wrapper .box {
    color: #6d6e70;
    font-size: 80%;  
    font-weight: bold;
    float: left;
    width: 208px;
    margin-top: 3px;
    padding: 7px 10px;
    background-color: #ffffff;
    border: solid 1px #8d8f92;
    display: block; 
}
.box-wrapper a.logo img {
    border: 0;
}
.box-wrapper a:link.forum,
.box-wrapper a:visited.forum,
.box-wrapper a:active.forum {
    float: left;
    width: 228px;
    height: 136px;
    margin-top: 3px;
    border: solid 1px #8d8f92;
    display: block;
    background-position: left top;
    background-image: url('/media/forum.jpg');
    background-repeat: no-repeat;  
}
.box-wrapper a:link.games,
.box-wrapper a:visited.games,
.box-wrapper a:active.games{
    float: left;
    width: 228px;
    height: 138px;
    margin-top: 3px;
    border: solid 1px #8d8f92;
    display: block;
    background-position: left top;
    background-image: url('/media/games.jpg');
    background-repeat: no-repeat;  
}
.box-wrapper .box ul, .box-wrapper .box ol {
    padding: 5px 10px 10px 8px;
    margin: 0; 
}
.box-wrapper .box ul li, .box-wrapper .box ol li  {
    list-style-type: none;
    padding: 2px 5px 2px 15px;
    background-position: center left;
    background-image: url('/media/bullet.jpg');
    background-repeat: no-repeat;            
}
.box-wrapper .box ul li a:link,
.box-wrapper .box ul li a:visited,
.box-wrapper .box ul li a:active {
    color: #6d6e70;
    text-decoration: none;    
}
.box-wrapper .box ul li a:hover {
    text-decoration: underline;    
}
#content #content-parts .box {
    width: 193px;
    height: 130px;   
}
#content #content-parts .box ul,
#content #content-parts .box ol, 
#content #content-parts .box p {
    height: 90px;   
}
.box-wrapper .box p {
    margin: 0 0 15px 0;
    padding: 0;
}
.box-wrapper .box strong {
    color: #464646;
    display: block;
    margin: 0 0 10px 0;
    padding: 0;
}
.box-wrapper img.image {
    margin-top: 3px;
    width: 224px;
    display: inline;
    height: 64px;
    border: solid 3px #8d8f92;   
}
#content #content-parts img.image {
    margin-top: 3px;
    width: 209px;
    height: 64px;
    border: solid 3px #8d8f92;    
}
.box-wrapper .row {
    float: left;
    width: 100%;
    clear: both;
    font-size: 120%;
    margin: 5px 0;    
}
.box-wrapper label {
    float: left;
    width: 70px;    
}
.box-wrapper input {
    float: left;
    width: 125px;
    border: 0;
    padding: 3px;
    background-color: #e7e8e9;    
}
.box-wrapper .box a.link:link, 
.box-wrapper .box a.link:visited,
.box-wrapper .box a.link:active {
    color: #6d6e70;
    font-weight: bold;
    padding-left: 15px;
    text-decoration: none;
    background-position: bottom left;
    background-image: url('/media/link-ico.jpg');
    background-repeat: no-repeat;      
}
.box-wrapper .box a.link:hover {
    text-decoration: underline;    
}
.box-wrapper .box a.link-block:link, 
.box-wrapper .box a.link-block:visited,
.box-wrapper .box a.link-block:active {
    color: #ffffff;
    font-weight: bold;
    float: left;
    padding: 3px 5px 5px 15px;
    text-decoration: none;
    margin-bottom: 5px;
    background-color: #00adee;
    background-position: 5px center;
    background-image: url('/media/link-block-ico.jpg');
    background-repeat: no-repeat;      
}
.box-wrapper .box a.link-block:hover {
    text-decoration: underline;    
}
.box-wrapper .box .login {
    margin-left: 15px;    
}
.box-wrapper .box .register {
    margin-left: 35px;    
}


/* ********************************************************************** **
** provide css code for the side navigation on content pages              **
** ********************************************************************** */
#side-navigation {
    margin: 0 0 10px 0;
    padding: 0;
    width: 230px;
    float: left;   
}
#side-navigation .row {
    margin: 0 0 3px 0;
    padding: 0;
    width: 230px;
    float: left;       
}
#side-navigation .row .row-top {
    padding: 0;
    margin: 0;
    height: 10px;
    background-position: top left;
    background-image: url('/media/nav-top.png');
    background-repeat: no-repeat;        
}
#side-navigation .row .row-bottom {    
    color: #ffffff;
    font-weight: bold;
    padding: 0 10px 10px 10px;
    background-position: bottom left;
    background-image: url('/media/nav-bottom.png');
    background-repeat: no-repeat;       
}
#side-navigation .row .row-bottom a:link,
#side-navigation .row .row-bottom a:visited,
#side-navigation .row .row-bottom a:active {
    padding-left: 17px;
    display: block;
    color: #ffffff;
    text-decoration: none;
    background-position: left center;
    background-image: url('/media/nav-bullet.png');
    background-repeat: no-repeat;       
}
#side-navigation .row .row-bottom a:hover {
    text-decoration: underline;
}


/* ********************************************************************** **
** provide css code for the feedback control at the bottom of each page   **
** ********************************************************************** */
#feedback {
    margin-top: 20px;
    float: left;
    font-size: 80%;
    background-color: #e7e7e8;    
}
#feedback #title {
    background-color: #00adee;
    font-size: 120%;
    color: #ffffff;
    font-weight: bold;
    padding: 7px 10px;
}
#feedback #inner-box {
    padding: 7px 15px 7px 10px;        
}
#feedback .row {
    padding: 4px 0;    
}
#feedback textarea {
    width: 100%;
    margin-top: 5px;    
}
#feedback a.link:link, 
#feedback a.link:visited,
#feedback a.link:active {
    color: #6d6e70;
    font-weight: bold;
    padding-left: 15px;
    float: right;
    font-size: 130%;
    margin-top: 5px;
    text-decoration: none;
    background-position: bottom left;
    background-image: url('/media/link-grey-ico.jpg');
    background-repeat: no-repeat;    
}
#feedback a.link:hover {
    text-decoration: underline;    
}


/* ********************************************************************** **
** provide css code for the News Summary Page   **
** ********************************************************************** */
#news-search {
  display: block;
  float: left;
  margin-top: 20px;
}
#news-search .title {
  background-color: #00adee;
  font-size: 120%;
  color: #ffffff;
  font-weight: bold;
  padding: 7px 10px;
}
#news-search .box {
  color: #6d6e70;
  font-size: 80%;
  font-weight: bold;
  float: left;
  margin-top: 3px;
  padding: 7px 10px;
  background-color: #ffffff;
  border: solid 1px #8d8f92;
  display: block;
  width: 653px;
}
#news-search .box strong {
  color: #00adee;
}
#news-search .box #keyword {
  float: left;
  width: 195px;
}
#news-search .box #keyword input {
    width: 125px;
}
#news-search .box #category {
  float: left;
  display: block;
  width: 1;
}
#news-search .box #year {
  float: left;
  width: 97px;
  text-align: left;
}
#news-search .box #month {
  float: left;
  width: 145px;
  text-align: left;
}
#news-search .box #search {
    float: right;
    width: 45px;    
}
#news-search .box #search input {
    border: solid 1px #00adee;
    color: #00adee;   
    font-weight: bold;
}
#news-summary {
  display: block;
  float: left;
  margin-top: 20px;
  width: 100%;
}
#news-summary #main-title {
  background-color: #00adee;
  font-size: 120%;
  color: #ffffff;
  font-weight: bold;
  padding: 7px 10px;
}
#news-summary .item {
  color: #000000;
  float: left;
  font-weight: normal;
  background-color: #ffffff;
  display: block;
  padding: 7px 10px;
  margin-bottom: 10px;
  border-bottom: dotted 1px #cccccc;
}
#news-summary .item .title {
  font-size: 130%;
  color: #00adee;
  font-weight: bold;
  padding: 7px 0px;
  background-color: #ffffff;
}
#news-summary .item .item-left {
    float: left;
    width: 210px;
}
#news-summary .item .item-left img {
    float: left;
    width: 190px;
    border: 5px solid #cccccc;
}
#news-summary .item .item-right {
    float: right;
    width: 442px;
}
#news-summary .item .item-right .category {
  font-size: 130%;
  color: #6d6e70;
  font-weight: bold;
  width: 450px;
  float: left;
  display: block;
  padding: 0 0 7px 0;
}
#news-summary .item .item-right .content {
  float: left;
  width: 450px;
  display: block;
}
#news-summary .item a:link.link,
#news-summary .item a:visited.link,
#news-summary .item a:active.link{
    color: #404041;
    font-size: 110%;
    font-weight: bold;
    margin-top: 20px;
    padding-left: 10px;
    float: left;
    display: block;
    text-decoration: none;   
    background-image: url('/media/bullet.jpg');
    background-repeat: no-repeat;
    background-position: left center;    
}
#news-summary .item a:hover.link{
    text-decoration: underline;   
}
#news-summary #pager {
    margin-top: 10px;
}
#news-summary #pager span a:link, #pager span a:visited, #pager span a:active {
    color: #ffffff;
    border: solid 1px #000000;
    background-color: #00adee;
    padding: 2px 5px 2px 5px;
    margin-right: 5px;
    margin-top: 0;
}
#news-summary #pager span span {
    border: solid 1px #000000;
    color: #00adee;
    background-color: #ffffff;
    padding: 2px 5px 2px 5px;
    margin-right: 5px;
    margin-top: 0;
}


/* ********************************************************************** **
** provide css code for the Online Services Page                          **
** ********************************************************************** */
#content #content-right #online-services-title {
    display: block;
    float: left;
    margin-top: 20px ;
    border-bottom:1px solid #cccccc;
    width:100%;
    padding-bottom:20px;
}
#content #content-right #online-services-title .title {
    display: block;
    float: left;
    padding-left:80px;
    background-image:url('/media/online-services-title-icon.jpg');
    background-position:left center ;
    background-repeat:no-repeat;
}
#content #content-right #online-services-title .title p {
    padding:0px;
    margin:0px;
}
#content #content-right #online-services-summary {
    display: block;
    background-color: #e7e8e9;
    float: left;
    margin-top: 20px;
    padding: 10px 0px;
    width:100%;
}
#content #content-right #online-services-summary ul, 
#content #content-right #online-services-summary ol {
    padding: 5px 10px 10px 8px;
    margin: 0;
}
#content #content-right #online-services-summary ul li, 
#content #content-right #online-services-summary ol li {
    list-style-type: none;
    padding: 2px 5px 2px 15px;
    background-position: center left;
    background-image: url('/media/bullet.gif');
    background-repeat: no-repeat;
    margin-left:80px;
}
#content #content-right #online-services-summary ul li a:link, 
#content #content-right #online-services-summary ul li a:visited, 
.box-wrapper .box ul li a:active {
    color: #6d6e70;
    text-decoration: none;
}
#content #content-right #online-services-summary ul li a:hover {
    text-decoration: underline;
}


/* ********************************************************************** **
** provide css code for the news summary section on homepage              **
** ********************************************************************** */
#news-container {
    width: 208px; 
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}
#news-container ul li div {
    border-bottom: 1px dotted #aaaaaa;
    background: #ffffff;
    padding: 5px 0;
}
#news-container a:link,
#news-container a:visited,
#news-container a:active {
    color: #00adee;
}
#news-container a:active {
    text-decoration: underline;
}


/* ********************************************************************** **
** provide css code for the search section of the website                 **
** ********************************************************************** */
#search-results {
    margin-top: 20px;
}
#search-results .search-item {
    margin-top: 20px;
}
#search-results .search-item a:link,
#search-results .search-item a:visited,
#search-results .search-item a:active {
    color: #00adee;
}
#search-results #pager {
    margin-top: 20px;
    margin-bottom: 10px;
}
#search-results #pager span span {
    color: #00adee;
    padding: 3px 5px;
    border: solid 1px #00adee;
}
#search-results #pager a:link,
#search-results #pager a:visited,
#search-results #pager a:active {
    background-color: #00adee;
    padding: 3px 5px;
    color: #ffffff;
}


























/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */