/* 
Project: Vizthink
Filename: screen.css
Date: 08 February 2008
*/


/*------ clear standard browser styles ------*/

body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,ul,ol,li,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}

ul,ol,li{
	list-style: none;
}

address,caption,cite,code,dfn,th,var,em {
	font-style:normal;
	font-weight:normal;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}



/* ---------------- global styles ---------------- */


body {
   	margin: 4px 0 0 0;
	padding: 0;
	font-size: 62.5%;
	text-align: center;
	color: #1A171B;
	font-family: arial, verdana, sans-serif;
   	background: url(img/header_back.jpg) repeat-x top left;
    }



body a img {
    border: none;
}


h1 {
   font-size: 1.9em;
}


h2 {
   font-size: 1.9em;
}


h3 {
   font-size: 1.6em;
}


h4 {
   font-size: 1em;
   margin: 0;
   padding: 0;

}



.small{
	margin-top: 10px;
	font-size: 80%;
}


.smaller{
	font-size: 90%;
}

.floatLeft{
	float: left;
}

.floatRight{
	float: right;
	border: 3px solid #b6c199;
	margin: 17px 0 0 10px;
}

.disguise {
	position: absolute;
	left: -10000px;
	}


#content .large {
	font-size: 160%;
}

/* ---------------- global styles : classes ---------------- */


.hide{
   position:absolute;
   left: 0px;
   top: -500px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}


.largep{
   font-size: 1.3em;
   text-align: center;
}

.larger{
   font-size: 1.25em;
}


.center{
   text-align: center;
}


.hidden {
	display: none;
}






/* ---------------- wrap ---------------- */

#wrap {

	width: 960px;
	text-align: left;
	margin: 0px auto;
	padding: 0px 10px;
}



/* ---------------- top ---------------- */

#top{
	float: left;
	width: 100%;
	font-size: 1.1em;
	padding: 10px 0 15px 0;
}


#top p{
	float: left;
	color: #C90016;
}


#top p a{
	font-weight: bold;
	color: #C90016;
	text-decoration: none;
}


#top p a:hover{
	text-decoration: underline;

}


#top ul{
	float: right;
}

#top ul li{
	display: inline;
	background: url(img/nav-divider.gif) no-repeat 0 50%;
	margin-left: 5px;
	padding-left: 10px;
}


#top ul li a{
	text-decoration: none;
	color: #1A171B;
}


#top ul li a:hover{
	text-decoration: underline;
}


#top ul .first{
	background: none;
	margin-left: 0;
	padding-left: 0;
}



/* ---------------- header ---------------- */

#header{
   float: left;
	width: 100%;
	margin-bottom: 15px;
	padding-top: 10px;
}


#header h1 a{
	float: left;
	width: 220px;
	height: 130px;
	text-indent: -99999px;
	background: url(img/vizthink-logo.gif) no-repeat 0 0;
}



#nextEvent{
	float: right;
	width: 660px;
	border: 1px solid #D1D2D4;
	margin-top: 10px;
	padding-top: 10px;
	background: url(img/next-events.jpg) repeat-x 0 0;
}




#nextEvent .details{
	float: left;
	width: 300px;
	}


.the-next-event .details{
	float: left;
	width: 500px;
	}

#nextEvent h2{
	width: 122px;
	height: 18px;
	margin: 0 10px 10px 10px;
	text-indent: -9999px;
	background: url(img/next-event.gif) no-repeat 0 0;	
}


#nextEvent p{
	font-size: 1.5em;
	line-height: 1.5em;
	margin: 0 10px 5px 10px;
	color: #004483;
}


#nextEvent p a{
	color: #004483;
	font-weight: bold;
}


#nextEvent p a:hover{
	text-decoration: none;
}

#nextEvent img{
	margin: 0 10px 10px 10px;
}


/* ---------------- content ---------------- */

#content{
	float: left;
	width: 960px;
}






/* ---------------- mainContent ---------------- */



#mainContent{
	float:left;
	width: 725px;
	border: 1px solid #D1D2D4;
	padding: 15px;

}



#mainContent h3{
	font-size: 1.6em;
	font-weight: bold;
	color: #004483;
	margin-bottom: 15px;
	
}


#mainContent h4{
	font-size: 1.3em;
	font-weight: bold;
	color: #004483;
	padding-top: 10px;
	margin-bottom: 15px;
	
}


#mainContent .the-next-event{
	float: left;
	width: 695px;
	border: 1px solid #cccccc;
	background: url(img/form-back.jpg) repeat-x 0 0;
	margin: 0 0 20px 0;
	padding: 15px;
}


#mainContent .the-next-event.wide hr{
	margin: 20px 0;
}



#mainContent .the-next-event .presenter{
	float: right;
	width: 125px;
	margin: 0 0 20px 50px; 
	background: #ffffff;
	padding: 0 10px;
	border: 1px solid #cccccc;
	text-align: center;
}

#mainContent .the-next-event .presenter img{
	border: 1px solid #004483;
	margin-bottom: 10px;
}


#mainContent .the-next-event .presenter p{
	font-size: 1.1em;
}


#mainContent .the-next-event h5{
	font-size: 1.3em;
	font-weight: bold;
	color: #004483;
	margin-bottom: 15px;
}


#mainContent .the-next-event .map{
	float: right;

}


#mainContent .the-next-event .details{
	float: left;
}

#mainContent .the-next-event a{
	color: #000000;
	text-decoration: none;
}


#mainContent .the-next-event a:hover{
	text-decoration: underline;
}



#mainContent .visual_thinker{
	line-height: 38px;
	vertical-align: center;
	background: url(img/icon-visual_thinking.gif) no-repeat 210px 0;
	margin-bottom: 0px;
}


#mainContent .community{
	line-height: 28px;
	vertical-align: center;
	background: url(img/icon-community.gif) no-repeat 285px 0;
}
	


#mainContent p{
	font-size: 1.2em;
	margin-bottom: 10px;
}


#mainContent ul{
	font-size: 1.2em;
	padding: 0 0 0 15px;
	list-style: disc;
}

#mainContent ul li{
	list-style: disc;
	margin-bottom: 8px;
}


#mainContent p a,
#mainContent ul a{
	text-decoration: underline;
	color: #004483;
}

#mainContent p a:hover,
#mainContent ul a:hover{
	text-decoration: none;
} 


#mainContent .gallery{
	width: 695px;
	padding: 0;
}

#mainContent .gallery img{
	float: left;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
	padding: 5px;
	margin: 0 12px 8px 0;
}


#mainContent .boxed{
	float: left;
	clear: both;
	width: 695px;
	padding: 15px 15px 5px 15px;
	margin-bottom: 10px;
	border: 1px solid #cccccc;
	background: url(img/form-back.jpg) repeat-x 0 0;
}


#mainContent .profile-section{
	float: left;
	clear: both;
	font-size: 1.3em;
	width: 180px;
	font-weight: bold;
	color: #004483;
	border: 1px solid #ccc;
	padding: 5px;
	margin-bottom: 5px;
	background: #fff url(img/profile-section_back.jpg) repeat-x bottom left;
}


#mainContent .profile-section a{
		color: #004483;
		text-decoration: none;
		}

#mainContent .profile-section a:hover{
		color: #000;
		text-decoration: none;
		}

#mainContent .suggest{
	float: left;
	clear: both;
	font-size: 1em;
	width: 130px;
	font-weight: bold;
	color: #004483;
	border: 1px solid #ccc;
	padding: 3px;
	margin-bottom: 5px;
	background: #fff url(img/profile-section_back.jpg) repeat-x bottom left;
}


#mainContent .profile{
	float: left;
	width: 695px;
	padding: 15px 15px 5px 15px;
	margin: 0 0 10px 0;
	border: 1px solid #cccccc;
	background: #FBFBFB url(img/profile_back.jpg) repeat-x bottom left;
}


#mainContent .profiles{
	clear: both;
	width: 695px;
	margin-bottom: 15px;
	}


#mainContent .profile .intro h4{
	float: left;
	width: 200px;
	}
	
	
#mainContent .profile .intro{
	float: left;
	width: 585px;
	margin-bottom: 15px;
}


#mainContent .profile .intro img{
	float: right;
	margin: 15px 15px 0 0;
	}
	

#mainContent .profile .picture{
	float: right;
	border: 1px solid #ccc;
	padding: 5px;
	margin: 15px 0 0 0;
	background: #fff;
	}


#homeExamples{
	width: 100%;
	text-align: center;
}

#homeExamples img{
	padding: 5px;
}


ul#vizList{
	float: left;
	width: 700px;
	margin-bottom: 20px;
	list-style: none;
}

ul#vizList li{
list-style: none;
	float: left;
	width: 95px;
	height: 38px;
	line-height: 38px;
	padding-left: 35px;
	vertical-align: center;
	margin-right: 10px;
	margin-bottom: 10px;
	font-weight: bold;
}

#vizList .organization{
	background: url(img/icon-organisation.gif) no-repeat 0 0;
}


#vizList .facilitation{
	background: url(img/icon-facilitation.gif) no-repeat 0 0;
}

#vizList .visual_thinking{
	background: url(img/icon-visual_thinking.gif) no-repeat 0 0;
}

#vizList .wayfinding{
	background: url(img/icon-wayfinding.gif) no-repeat 0 0;
}

#vizList .sketching{
	background: url(img/icon-sketching.gif) no-repeat 0 0;
}

#vizList .interactivity{
	background: url(img/icon-interactivity.gif) no-repeat 0 0;
}

#vizList .mapping{
	background: url(img/icon-mapping.gif) no-repeat 0 0;
}

#vizList .brainstorming{
	background: url(img/icon-brainstorming.gif) no-repeat 0 0;
}

#vizList .visual_language{
	background: url(img/icon-visual_language.gif) no-repeat 0 0;
}

#vizList .photography{
	background: url(img/icon-photography.gif) no-repeat 0 0;
}

#vizList .presentation{
	background: url(img/icon-presentation.gif) no-repeat 0 0;
}

#vizList .design{
	background: url(img/icon-design.gif) no-repeat 0 0;
}

#vizList .comics{
	background: url(img/icon-comics.gif) no-repeat 0 0;
}

#vizList .strategy{
	background: url(img/icon-strategy.gif) no-repeat 0 0;
}

#vizList .video{
	background: url(img/icon-video.gif) no-repeat 0 0;
}

#vizList .three_d{
	background: url(img/icon-three_d.gif) no-repeat 0 0;
}

#vizList .infographics{
	background: url(img/icon-infographics.gif) no-repeat 0 0;
}



#other-events{
	float: right;
}



#other-events span{
	font-weight: bold;
	font-size: 1.2em;
	color: #004483;
}

#other-events em{
	font-size: 1.1em;
}


#other-events img{
	float: right;
}


#other-events a{
	display: block;
	width: 130px;
	padding: 10px;
	color: #000000;
	text-decoration: none;
	background: #f6f6f6;
	border: 1px solid #cccccc;
}


#other-events a:hover{
	border: 1px solid #004483;
}


#mainContent .other-event{
	margin-top: 25px;
	padding-top: 25px;
	border-top: 1px solid #cccccc;
}


#mainContent .other-event img{
	float: right;
	margin: 0 0 15px 20px;
}

/* ---------------- join-form ---------------- */


#join-form{
	border: 1px solid #cccccc;
	width: 380px;
	background: url(img/form-back.jpg) repeat-x 0 0;
	margin-top: 20px;
	padding: 0 15px 5px 15px;
}



#join-form input,
#join-form textarea{
	width: 250px;
}


#join-form .checkbox input,
#join-form-side .checkbox input{
	width: 25px;
}


#join-form input#submit{
	border: 1px solid #cccccc;
	padding: 5px;
	width: 150px;
	background: url(img/submit-back.jpg) repeat-x 0 0;
}




#join-form .small{
	margin-top: 10px;
	font-size: 1em;
}


#join-form-side .small{
	margin-top: 15px;
	font-size: 0.9em;
}



#join-form-side{
	float: right;
	border: 1px solid #cccccc;
	width: 155px;
	background: url(img/form-back.jpg) repeat-x 0 0;
	margin-top: 20px;
	padding: 10px;
	text-align: left;
	font-size: 1.1em;
}



#join-form-side h4{
	font-size: 1.3em;
	font-weight: bold;
	color: #004483;
	margin-bottom: 15px;
}


#join-form-side p{
	margin-bottom: 5px;
}

#join-form-side input,
#join-form-side textarea{
	width: 145px;

}



* html #join-form-side input,
* html #join-form-side textarea{
	width: 135px;

}

#join-form-side input#submit{
	border: 1px solid #cccccc;
	padding: 5px;
	width: 140px;
	margin-top: 10px;
	background: url(img/submit-back.jpg) repeat-x 0 0;
}



	
	
#join-form-side.top{
	float: right;
	width: 320px;
	margin: 10px 10px 10px 0;
	font-size: 0.9em;
	}


* html #join-form-side.top{
	margin: 10px 5px 10px 0;
}


#join-form-side.top h4{
	margin-bottom: 0px;
}

#join-form-side.top h4 a{
	color: #004483;
	font-weight: bold;
	}


#join-form-side .form-left{
	width: 160px;
	float: left;
	margin-top: 15px;
	}


* html #join-form-side .form-left{
	width: 145px;
}
	
	
#join-form-side .form-right{
	width: 160px;
	float: right;
		margin-top: 15px;
	}


* html #join-form-side .form-right{
	width: 145px;
}
	


.expandable{
	display: none;
	}



/* ---------------- contentRight ---------------- */


#contentRight{
	float: right;
	width: 195px;
}


#contentRight dl{
	width: 175px;
	float: right;
	text-align: left;
	font-size: 1.2em;
}


#contentRight dt{
	border: 1px solid #D1D2D4;
	color: #ffffff;
	font-weight: bold;
	font-size: 1.2em;
	background: #1A4D89 url(img/bg-main_menu.gif) repeat-x bottom left;
	padding: 2px 7px;
}


#contentRight dt a{
	color: #ffffff;
	text-decoration: none;
}


#contentRight dd{
	margin-top: 2px;
}





#contentRight dd a{
	display: block;
	width: 165px;
	height: 27px;
	padding: 11px 0 0 10px;
	text-decoration: none;
	color: #004483;
	font-size: 1.1em;
}


#contentRight .blog{
	float: right;
	width: 175px;
	margin: 25px 0 15px 0;
	font-size:1.2em;
	}


#contentRight .blog a{
	display: block;
	background: #f3f3f3;
	text-decoration: none;
	border: 1px solid #cccccc;
	padding: 10px;
}


#contentRight .blog a:hover{
	color: #ffffff;
	background: #004483;;
	}

#contentRight .events{
	background: url(img/bg-menu_events.jpg) no-repeat 0 0;
}

#contentRight .join-in{
	background: url(img/bg-menu_join-in.jpg) no-repeat 0 0;
}

#contentRight .partners{
	background: url(img/bg-menu_partners.jpg) no-repeat 0 0;
}

#contentRight .vizblog{
	background: url(img/bg-menu_vizblog.jpg) no-repeat 0 0;
}

#contentRight .contact-us{
	background: url(img/bg-menu_contact.jpg) no-repeat 0 0;
}


#contentRight .Practitioner{
	background: url(img/bg-menu_Practitioner.jpg) no-repeat 0 0;
}


#contentRight dd a:hover,
#contentRight .here a{
	background-position: -175px 0;
}


#contentRight p a{
	text-decoration: underline;
	color: #004483;
}

#contentRight p a:hover{
	text-decoration: none;
} 


#contentRight .side-ad{
	float: right;
	display: block;
	margin-top: 30px;
}


#add-this{
	float: right;
	text-align: right;
	width: 175px;
	padding: 25px 0 0 0;
	}
	


#contact_form{
	width: 175px;
	text-align: center;
	font-size: 0.8em;
	margin-top: 40px;
	padding: 10px 0;
	border: 1px solid #D1D2D4;
	background: url(img/bg_contact-form.jpg) repeat-x 0 0;
}


#contact_form .name,
#contact_form .phone-number,
#contact_form .from{	
	position: absolute;
	left: -10000px;	
}


#contact_form .source{	
	display: block;
	left: 0px;
	margin: 10px 0; 	
	font-size: 1.6em;
}


#contact_form h3{
	color: #004483;
	font-weight: bold;
	margin-bottom: 10px;
}


#source{
	width: 150px;

}


#contact_form p{
	text-align: left;

}


#contact_form input{
	width: 150px;
	margin: 10px 0 0 10px;
}
	


#contact_form .submit{
	background: url(img/bg_submit.gif) repeat-x 0 0;
	border: 1px solid #0F4886;
	color: #ffffff;
	font-size: 3em;
	margin-left: 12px;
}



#rssfeed{
	display: block;
	background: url(img/bg_rss.jpg) no-repeat 0 0;
	width: 175px;
	height: 30px;
	margin-top: 40px;
	font-weight: bold;
	color: #ffffff;
	font-size: 1.1em;
	text-decoration: none;
	padding-top: 15px
}


#contentRight .advert{
	float: right;
	width: 173px;
	border: 1px solid #cccccc;
	background: url(img/europe08.jpg) no-repeat 0 0;
	margin-top: 15px;
	padding: 193px 0 10px 0;
}



#contentRight .advert h3,
#contentRight .advert h4{
   position:absolute;
   left: 0px;
   top: -500px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

#contentRight .advert p{
	font-size: 1.1em;
	padding: 10px 10px 0 10px;
}


#contentRight .advert p a{
	font-weight: bold;
	font-size: 1.2em;
}

/* ---------------- footer ---------------- */


#footer{
	float: left;
	width: 100%;
    	background: url(img/footer_back.jpg) repeat-x bottom left;
	height: 34px;
	margin: 40px 0 10px 0;
	border-left: 1px solid #D1D2D4;
	border-right: 1px solid #D1D2D4;
}


#footer ul{
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 12px 0 0 0;
	width: 100%;
}

#footer li{
	display: inline;
	background: url(img/nav-divider.gif) no-repeat 0 50%;
	margin-left: 5px;
	padding-left: 10px;
}


#footer .first{
	background: none;
	margin-left: 0;
	padding-left: 0;
}


#footer li a{
	text-decoration: none;
	color: #1A171B;
}


#footer li a:hover{
	text-decoration: underline;
}


#footer .cognac{
	color: #980F17;
}