/* CSS Document 

CNK Digital Solutions Ltd.

Project: ICCFR International Commission on Family and Relationships
Date: 2011-10-19
Author: Benjamin Colchester
Version: 0.1

Notes: Main Framework including all generic elements (appear on all templates)

*/

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

Redefine Tags

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

html, body {
	background: #FFFFFF;
	margin: 0px;
	padding: 0px;
	height:100%; /* needed for container min-height */	
	min-width: 1024px;
	background: url(../images/topbar_bg.jpg) left top repeat-x;
	}	

p { 
	background: none;
	}

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

Utility Classes

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

.clear {
	display: block;
	clear: both;
	font-size: 0;
	}
	

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

Main Container

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

#main { 
	position: relative; /* needed for footer positioning*/
	margin: 0px auto; /* center, not in IE5 */
	width:100%;
	height: auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */
	background: none;
	padding: 0px 0px 0px 0px;
	}

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

Top Links - Members Login

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

#top_links {
	position: relative;
	width: auto;
	height: 30px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	background: none;
	float:right;
	}				
	
	#top_links .link_container_left_corner {
		width: 20px;
		height: 30px;
		background: url(../images/top_links_rounded_corner_bg_LEFT.png) center center no-repeat;
		float: right;
		}
		
	#top_links .link_container_right_corner {
		width: 20px; 
		height: 30px; 
		background: url(../images/top_links_rounded_corner_bg_RIGHT.png) center center no-repeat; 
		float: right;
		margin: 0px 0px 0px 0px; 
		}
	
	#top_links .link_container_variable_middle { 
		display: block;
		height: 24px;
		width: auto;
		background: url(../images/top_links_rounded_corner_bg_REPEATING_MIDDLE.png) left top repeat-x;
		float: right;
		margin: 0px 0px 0px 0px;
		padding: 6px 0px 0px 0px;
		}
		
		#top_links .link_container_variable_middle a.login { color: #598eb3; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; text-decoration: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;} 
		#top_links .link_container_variable_middle a:hover.login { color: #fff;} 
		
		#top_links .link_container_variable_middle_RED a.logged_in { color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; text-decoration: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;} 
		#top_links .link_container_variable_middle_RED a:hover.logged_in { color: #ccc;} 
		
		#top_links .link_container_left_corner_WHITE {
		width: 20px;
		height: 30px;
		background: url(../images/top_links_rounded_corner_bg_LEFT_WHITE.png) center center no-repeat;
		float: right;
		}
		
	#top_links .link_container_right_corner_RED {
		width: 20px; 
		height: 30px; 
		background: url(../images/top_links_rounded_corner_bg_RIGHT_RED.png) center center no-repeat; 
		float: right;
		margin: 0px 0px 0px 0px; 
		}
	
	#top_links .link_container_variable_middle_RED { 
		display: block;
		height: 24px;
		width: auto;
		background: url(../images/top_links_rounded_corner_bg_REPEATING_MIDDLE_RED.png) left top repeat-x;
		float: right;
		margin: 0px 0px 0px 0px;
		padding: 6px 0px 0px 12px;
		}
		
	#top_links .link_container_variable_middle_WHITE { 
		display: block;
		height: 24px;
		width: auto;
		background: url(../images/top_links_rounded_corner_bg_REPEATING_MIDDLE_WHITE.png) left top repeat-x;
		float: right;
		margin: 0px 0px 0px 0px;
		padding: 6px 12px 0px 0px;
		color: #333333;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: normal;
		font-size: 12px;
		text-decoration: none;
		}	


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

Top Bar (Logo & Text Links)

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

#topbar { 
	display: block; 
	width: 1024px;
	height: 165px;  
	padding: 0px 0px 0px 0px;
	margin: 0px auto;
	}	
	
	#topbar #logo_icon {
	width: 148px;
	height: 165px;
	display: block;
	float: left;
	padding: 0px 0px 0px 25px;
	background: none;
	}	
	
	#topbar #logo_text {
	width: 530px;
	height: 18px;
	display: block;
	float: right;
	padding: 0px 25px 0px 0px;
	margin: 30px 0px 0px 200px;
	background: none;
	}
		
	
/*-------------------------------------------------------------

Main Banner

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

#main_banner { 
	display: block; 
	width: 100%;
	height: 180px;  
	padding: 0px 0px 0px 0px;
	background: #ffffff;
	position: relative; 
	overflow: hidden;
	}	
	
#main_banner #image_container {
	width: 1224px;
	height: 180px;
	display: block;
	padding: 0px 0px 0px 0px;
	background: #2c709e;
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 1100;
	margin: 0px 0px 0px -612px;
	overflow: hidden !important;
	}
	
	#main_banner #image_container #left_gradient {
	width: 100px;
	height: 180px;
	display: block;
	float: left;
	padding: 0px 0px 0px 0px;
	background: url(../images/main_banner_left_gradient.png) center center no-repeat;
	position: absolute;
	left: 0; 
	top:0;
	z-index: 1200;
	margin: 0px 0px 0px 0px;
	}
	
	#main_banner  #image_container #right_gradient {
	width: 100px;
	height: 180px;
	display: block;
	float: right;
	padding: 0px 0px 0px 0px;
	background: url(../images/main_banner_right_gradient.png) center center no-repeat;
	position: absolute;
	right: 0; 
	top:0;
	z-index: 1200;
	}
	
/*-------------------------------------------------------------

Main Navigation

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

#navbar_container {
	display: block;
	height: 65px;
	float: left; 
	background: none;
	width: 851px;
	padding: 0px 0px 0px 0px; 
	margin: 22px 0px 0px 0px;
	background: url(../images/navbar_bg.png) center center no-repeat;
	z-index: 1800;
	}
	
#main_nav {	
	margin: 0px;
	padding: 0px 0px 0px 0px;
	width: 799px;
	height: 65px;
	}

	#main_nav li {	
		float: left;
		list-style: none;
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
		background: url(../images/navbar_divider.png) center right no-repeat;
		}

	#main_nav li a {	
		display: block;
		background: none;
		padding: 25px 10px 0px 10px;
		text-decoration: none;
		width: auto;
		height: 40px;
		color: #707070;
		font-size: 14px;
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-weight: 300;
		text-align: center;
		margin: 0px 0px 0px 0px;
		text-shadow: 0px 1px 1px #fff;
		}

	#main_nav li a:hover {	
		color:  #ef770b;
		background: none;
		}
		
	#main_nav li a:hover.inactive_heading { background: none; color:#ccc;}		
		
		#main_nav li ul	{
			margin: 0px 0px 0px -3px;
			padding: 0;
			position: absolute;
			visibility: hidden;
			border-right: 1px solid white;
			border-left: 1px solid white;
			border-top: 1px solid white;
			width: auto;
			height: auto;
			z-index: 1800;
			}
		
			#main_nav li ul li {
				float: none;
				display: inline;
				}
			
			#main_nav li ul li a {	
				width: 250px;
				background: #2C709E;
				font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif;
				font-weight: 400;
				font-size: 11px;
				color: #FFFFFF;
				border: none;
				height: auto;
				padding: 4px 10px 4px 5px;
				text-shadow: none;
				text-align: left;
				line-height: 1.3em;
				border-bottom: 1px solid #FFF;
				}
			
			#main_nav li ul li a:hover {	
				background: #CCC;
				color: #2C709E;
				}	
				
			#main_nav li ul li a:active {	
				color: #ef770b;
				background: #fff;
				}
						 				
	
	
/*-------------------------------------------------------------

Main Content Containers

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

#content {
	width: 973px;
	height: auto;
	text-align: left;
	background: none;
	padding: 25px 25px 25px 25px;
	margin: 0px auto;
	display: block;
	}

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

Search Field

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

#search_field {
	width: 235px;
	height: 31px;
	text-align: left;
	padding: 0px 0px 0px 0px;
	margin: 17px 0px 0px 0px;
	float: left;
	background: url(../images/navbar_search_field_bg.png) center center no-repeat;
	display: block;
	}
	
input.search_form {
	display: block;
	color: #FFFFFF;
	background: none;
	color: #ccc;
	border: none;
	margin: 3px 0px 0px 50px;
	font-size: 12px;
	float: left;
	height: 25px; 
	width: 130px;
	}	
	
#search_field a.send {
	display: block;
	width: 31px;
	height: 10px;
	background: none;
	color: #333333;
	border: none;
	margin: 0px 0px 0px 15px;
	padding: 19px 0px 0px 0px;
	float: left;
	background: url(../images/navbar_send_button_arrow_bg.png) center center no-repeat;
	}
	
	#search_field a:hover.send {background: url(../images/navbar_send_button_arrow_bg_OVER.png) center center no-repeat;}
	
/*-------------------------------------------------------------

Footer

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

#global_footer {
	display: block;
    width: 100%;
    background: none;
    padding: 0px 0px 0px 0px;
    }
	
#global_footer #company_details {
	display: block;
    width: 100%;
	height: 20px; 
	float: left; 
	padding: 5px 0px 0px 0px;
	background: #2c709e;
	margin: 0px auto;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	text-align: center;
	color: #f5f5f5;
	font-size: 10px;
	font-weight: normal;
    }	
		
h2.trigger {
	padding: 5px 25px 0px 0px;
	height: 20px;
	width: 999px;
	font-size: 12px;
	font-weight: bold;
	margin: 0px auto;
	text-align: right;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	background: url(../images/site_map_icon_UP.png) center right no-repeat;
}

h2.trigger a {
	color: #ef770b;
	text-decoration: none;
	display: block;
	padding: 0px 0px 0px 0px;
}

h2.trigger a:hover { color: #999999; text-decoration: none; }

h2.active {background: url(../images/site_map_icon_DOWN.png) center right no-repeat !important; color: #999999 !important;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/

.toggle_container {
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
	border-top: 1px solid #d6d6d6;
	background: #2c709e url(../images/breadcrumb_shadow.png) left top repeat-x;
	overflow: hidden;
	font-size: 1.2em;
	width: 100%;
	clear: both;
}

.toggle_container .block {
	width: 1024px;
	padding: 10px 0px 10px 0px; /*--Padding of Container--*/
	background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
	margin: 0px auto;
}	

.toggle_container .block .link_column {
        display: block;
        width: 204px;
        background: none;
        height: auto;
        float: left;
        margin: 0px 0px 10px 0px;
        }
        
       .toggle_container .block .link_column h3 {
            font-size: 11px; 
            font-family: Arial, sans-serif;
            color: #fff;
            text-align: center;
            margin: 0px 0px 10px 0px;
            padding: 0px;
            line-height: 1.3em;
            font-weight: normal;
			text-transform: uppercase;
            }
			
			.toggle_container .block .link_column a:hover h3 { color: #faaf1a;}
        
        .toggle_container .block .link_column ul {
            float:left;
            list-style:none;
            padding:0;
            margin:0;
            width: 100%;
            }
    
        .toggle_container .block .link_column li {
            float:left;
            margin: 0px;
            padding: 0px;
            }   
            
        .toggle_container .block .link_column a {
            display: block;
            width: 204px;
            color: #ccc;
            font-size: 11px;
            font-family: Arial, sans-serif;
            text-align: center;
            text-decoration:none;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 3px 0px;
            }
            
        .toggle_container .block .link_column a:hover {
            text-decoration: underline;
            color: #ef770b;
            }
            
        .toggle_container .block .link_column p {
            display: block;
            width: 150px;
            color: #41484a;
            font-size: 12px;
            font-family: Arial, sans-serif;
            text-align: left;
            text-decoration:none;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 3px 8px;
            }
            
        .toggle_container .block .link_column p a {
            display: block;
            width: 150px;
            color: #5d95bc;
            font-size: 12px;
            font-family: Arial, sans-serif;
            text-align: left;
            text-decoration:none;
            padding: 0px;
            margin: 0px;
            }
            
        .toggle_container .block .link_column .social_network_icon {
            display: block;
            width: 29px;
            height: 29px;
            float: left;
            margin: 5px 5px 0px 0px;
            padding: 0px 0px 0px 0px;
            }
            
        .toggle_container .block .link_column .social_network_icon a img { border: none; margin: 0px; padding: 0px;}