/* @override http://cabe.dev/css/master.css */

/*
------------------------
Layout
------------------------
*/


/*
Generic Selectors
*/

*, html {
	margin: 0;
	padding: 0;           
}              
                                                                     
body {
	background-color: #f3f3f3;
	/*background-color: #FCFCFC;*/	
	/*background-image: url(../images/ui/body_bg.jpg);
	background-repeat: repeat-y;
	background-position: top center;*/
}   

div {
	text-align: left;
}

h1 {
	margin: 0 20px;
}

h2 {
	margin: 25px 20px 10px 20px;
}

h4 {
	margin: 5px 20px 5px 20px
}

p {
	line-height: 120%;
	margin: 5px 20px 20px 20px;
}

ul {
	padding-left: 2.4em;
	margin: 5px 20px 10px 0;
}

li {
	font-size: 12px;
	padding: 5px 0;
}

/*
ID's & Classes
*/

/*	Home	*/
	
#home h1,
#principles h1 {
	border-bottom: 1px dashed #BABAE1;
	padding-bottom: 12px;
}

#home p.definition,
#principles p.definition {
	border-bottom: 1px dashed #BABAE1;
	padding-bottom: 10px;
}

/*	Header	*/
	
#header {
	margin: 0 auto;
	width: 800px;
	height: 88px;
	background-image: url(../images/ui/puzzleheader_home.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	position: relative;
}

#principles #header {
	background-image: url(../images/ui/principles/puzzleheader_home.jpg);
	}


#header h1 {
	width: 192px;
	height: 71px;
	position: relative;
	padding: 10px 0 0 20px;
	margin: 0;
	border-bottom-style: none;
}


#header h1 span {
	background-image: url(../images/ui/logo_cabe_large.gif);
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
}

#header #logo_principles_large {
	position: absolute;
	top: 20px;
	right: 10px;
}


/*	Menu	*/

#menu {
	width: 100%;
	height: 57px;
	background-image: url(../images/ui/menu_bg.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	text-align: center;
}

#menu table {
	width:800px;
	height:57px;
	margin:0 auto;
	background-image: url(../images/ui/menu_edge_solid.gif);
	background-repeat: no-repeat;
	background-position: top right;
}

#menu td {
    text-align: center;
	background-image: url(../images/ui/menu_edge.gif);
	background-repeat: no-repeat;
	background-position: top left;
}

#menu td.home {
	background-image: url(../images/ui/menu_edge_solid.gif);
}

#menu a {
	display: block;
	margin-left: 1px;
	height: 57px; 
	_height: 37px; /*IE Hack*/
	padding: 20px 15px 0 15px;
}	

#menu td.current a,
#menu a:hover
{
	background-image: url(../images/ui/menu_current_bg.jpg);
	background-repeat: repeat-x;
}

#principles #menu td.current a,
#principles #menu a:hover
{
	background-image: url(../images/ui/principles/menu_current_bg.jpg);
	background-repeat: repeat-x;
}

               
/*	Sub Menu	*/ 
	    
#submenu ul {
	list-style-type: none;
	margin: 0 0 0 10px;
	padding: 0;
}	

#submenu ul li {
	margin: 0;
	padding: 0;
 	_height: 1%; /* IE Hack */
}

#submenu ul li a:link,
#submenu ul li a:visited {
	background-color: #e2e5d2;
	padding: 10px;
	display: block;
	border-top: 1px solid #c8cdaf;
	_height: 1%;
}

#submenu ul li a:hover,
#submenu ul li.current a:link,
#submenu ul li.current a:visited {
	background-color: #b0bd87;
} 

#submenu ul li.first a:link,
#submenu ul li.first a:visited {
	border-style: none;
}

/*	Maincontent	*/

#maincontent {
	margin: 20px auto 0 auto;
	width: 800px;
}


/*	Leaflet & Homepage Buttons	*/

.leaflet,
.homebtn  {
	float: left;
	width: 290px;
}

.leaflet h3,
.homebtn h3 {
	background-repeat: repeat-x;
	margin: 0 5px 0 25px;
	height: 50px;
}                   


.homebtn h3.download {
	background-image: url(../images/ui/download_bg.jpg);
}                   

.leaflet h3.download {
	background-image: url(../images/ui/principles/download_bg.jpg);
}                   

.homebtn h3.testimonials {
	background-image: url(../images/ui/testimonials_bg.jpg);
}                   

.leaflet h3 a:link,
.leaflet h3 a:visited,
.homebtn h3 a:link,
.homebtn h3 a:visited {
	display: block;
	padding-top: 10px;
	padding-left: 10px;
	height: 40px;
	width: 240px;
	background-repeat: no-repeat;
	background-position: center right;
}


.homebtn h3.download a:link,
.homebtn h3.download a:visited {
	background-image: url(../images/ui/download_icon.jpg);
}

.leaflet h3.download a:link,
.leaflet h3.download a:visited {
	background-image: url(../images/ui/principles/download_icon.jpg);
}

.homebtn h3.download a:hover {
	background-image: url(../images/ui/download_icon_hover.jpg);
}

.leaflet h3.download a:hover {
	background-image: url(../images/ui/principles/download_icon_hover.jpg);
}


.homebtn h3.testimonials a:link,
.homebtn h3.testimonials a:visited {
	background-image: url(../images/ui/testimonials_icon.jpg);
}

.homebtn h3.testimonials a:hover {
	background-image: url(../images/ui/testimonials_icon_hover.jpg);
}


.leaflet img {
	margin: 0;
	padding: 50px 0 0 40px;
	display:  block;
}

.leaflet p {
	background-color: #BABAE1;
	background-image: url(../images/ui/adobe_reader_btn.gif);
	background-repeat: no-repeat;
	background-position: 162px 10px;
	margin: 0 5px 0 25px;
	height: 50px;
}                   

.leaflet p a:link,
.leaflet p a:visited {
	padding: 10px 120px 0 10px;
	display: block;
}

/*	Welcome	*/

.welcome {
	float: right;
	width: 490px;
	border-left: 1px solid #E6E5F5;
}


/* Home Page Quote */

.homebtn blockquote {
	background: url(../images/ui/lquot.gif);
	background-position: 0 2px;
	background-repeat: no-repeat;
	margin-left: 25px;
	padding: 10px 0 30px;
}

.homebtn blockquote h5 {
	color: #888;
	margin: 0 0 10px;
	text-indent: 40px;
}

.homebtn blockquote h5.last {
	text-indent: 0;
}

.homebtn blockquote .close {
	background: url(../images/ui/rquot.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
	padding: 10px 40px 10px 0;
	text-indent: 0;
}

/*	Principles	*/


.principlink {
	float: right;
	width: 490px;
	border-left: 1px solid #E6E5F5;
}

.principlink a {
	margin: 10px 20px;
    height: 43px;
 }

.principlink a span {
	display: block;
}

.principlink a:link,
.principlink a:visited {
	display: block;
	padding: 12px 40px 0 15px;
	background-color: #E5E4F5;
	background-image: url(../images/ui/principles/goto_icon.gif);
	background-position: 405px 10px;
	background-repeat: no-repeat;
	}

.principlink a:hover {
	background-color: #d2d2ec;
	background-image: url(../images/ui/principles/goto_icon_hover.gif);
	}


/*	Snippets */

#snippets {
	margin: 0 auto;
	width: 800px;
}

#snippets p.quote {
	background-color: #e2e5d2;
	padding: 5px 10px;
	height: 60px;
	margin: 0;
}

#principles #snippets p.quote {
	background-color: #E5E4F5;	
}


#snippets p.credited {
	background-color: #FFF;
	height: 40px;
	padding: 5px 10px;
	margin: 0;
}

#snippets img {
	float: left;
	margin: 0 10px 0 20px;
	_margin-right: 0; /* IE 6 and lower only*/
}

#snippets .left {
	float: left;
	width: 310px;
}

#snippets .right {
	float: right;
	width: 490px;
}

#snippets .right .left {
	float: left;
	width: 244px;
}

#snippets .right .right {
	float: right;
	width: 244px;
}

#snippets .right .left p.quote {
	margin:0 0 0 20px;
}

#snippets .left	p.quote {
	margin: 10px 0 0 20px;
}

#snippets .right .right	p.quote {
	margin: 0 20px 0 20px;
}

#snippets .right .left p.credited {
	margin: 0 0 0 20px;
}

#snippets .left	p.credited {
	margin: 0 0 0 20px;
}

#snippets .right .right	p.credited {
	margin: 0 20px 0 20px;
	}

/*	Side Bar	*/

#sidebar {
	float: left;
	width: 150px;
}	    

#sidebar img {
	margin-left:10px;
	display: block;
}

#sidebar .credited {
	background-color: #e2e5d2;
	margin: 0 0 0 10px;
	padding: 5px 10px;
}

#sidebar .credited span {
	display: block;
}

#sidebar .caption {
	background-color: #FFF;
	margin: 0 0 20px 10px;
	padding: 10px;
}

/* Content	*/

#content {
	float: right;
	width: 645px;
}

.pdf {
	list-style-type: none;
	padding-left: 1.2em;
}

.pdf li {
	background-image: url(../images/ui/list_pdf.gif);
	background-repeat: no-repeat;
	background-position: 0 8px;
	padding: 8px 0 8px 2em;
}      

.pdf li strong {
	display: block;
}                  

.specialpanel {
	background-color: #e2e5d2;
	padding: 5px 0;
	margin: 0 20px 10px 20px;
}

/*	footerbar	*/

#footerbar {
	margin: 30px auto 10px auto;
	width: 800px;
	height: 10px;
	background-color: #002785;
	font-size: 1px;
}

/*	footer	*/

#footer {
	margin: 10px auto 10px auto;
	width: 800px;
}

.footerleft {
	float: left;
	width: 200px;
}

.footerright {
	float: right;
	width: 500px;
}

#footer img {
	border-style: none;
	margin-right: 10px;
}

#footer p {
	margin:0 0 10px 0;
	}


/*	Event	*/

.event {
	margin: 10px 20px;
	border-bottom: 1px dashed #BABAE1;
	padding-bottom: 5px;
}

   .event h4,
.event p {
	margin: 4px 0 0 2px;
}

.event .pdf {
	padding-left: 0;
	margin: 0;
} 

.link {
	margin-bottom: 10px;
}	

.link a {
	display: block;
}




/* ========= */
/* = Forms = */
/* ========= */

/*	Common	*/

h1.principles {
	padding: 10px;
	margin: 0 20px 0 10px;
}

h2.principles { 
	background-image: url(../images/ui/bullet.gif);
	background-repeat: no-repeat;
	padding: 2px 0 6px 22px;
	margin-bottom: 0;
	margin-right: 0;
	position:relative;
	font-size:14px;
	}

.bullet {
	position:absolute;
	left:0px;
	top:2px;
	_left:-22px; /*IE Hack*/     
	_top:4px;	
	color: #FFF;
	padding: 0 10px 0 3px;
	font-size: 11px;
}

.submit {
	text-align: right;
	margin: 10px 20px;
}

/*	Principles	(form 1) */


.priorityaims {
	margin-left: 20px;
}

.priorityaims td {
	border-top: 1px dashed #BABAE1;
	padding: 15px 0 0 0;
}   

.priorityaims td.first {
	border-top-style: none;
}   

              
.priorityaims .priorities {
	vertical-align: top;
	width: 215px;
}

.priorityaims .priorities h2.principles,
.priorityaims .priorities p {
	margin: 0;
}

.priorityaims .priorities .level {
	margin: 10px 20px 0 0;
	padding: 10px;
	border: 1px solid #E4E3F5;
}

.priorityaims .priorities .level label {
	color: #6D67AB;
	font-size: 12px;
	font-weight: bold;
	margin-right: 10px;
}

.priorityaims .textfields {
	vertical-align: top;
}

.priorityaims .textfields label {
	display: block;
	font-size: 12px;
	font-weight: bold;
	color: #666;
	margin-left: 10px;
}

.priorityaims .textfields textarea {
	width: 375px;
	height: 40px;
	display: block;
	margin: 3px 0 10px 10px;
}


/*	Corporate Values (form 2)*/

.key {
	margin: 0 20px;
	padding: 5px 0px;
	background-color: #e2e5d2;
	color: #7e9334;
	font-weight: bold;
}

.key span {
	padding: 5px 10px;
}
.corpvalues {
	margin:0 20px;
}

.corpvalues th {
	text-align: center;
	vertical-align: top;
	background-color: #FFF;
	padding: 5px 0px;
	border-bottom: 1px solid #BABADF;
}

.corpvalues th p {
	margin: 0;
	font-size: 10px;
	line-height: 90%;
} 

.corpvalues th.colborder {
	border-right: 1px solid #BABADF;
}

.corpvalues td {
	border-top: 1px dashed #BABADF;
	padding: 15px 0 0 0;
	vertical-align: top;
}   

.corpvalues td.first {
	border-top-style: none;
}   

.corpvalues td.colborder {
	border-right: 1px solid #BABADF;
}


.corpvalues h2 {
	margin: 0;
}
.corpvalues .priorities {
	width: 165px;
}

.corpvalues .priorities h2.principles,
.corpvalues .priorities p {
	margin: 0;
}

.corpvalues .level {
	width: 50px;
	text-align: center;
}

.corpvalues .level option {
	width:12px;
	
}

.corpvalues .textfields {
	width: 355px;
	vertical-align: top;
}

.corpvalues .textfields div {
	float: left;
}


.corpvalues .textfields label {
	display: block;
	font-size: 12px;
	font-weight: bold;
	color: #666;
	margin-left: 10px;
}

.corpvalues .textfields input.gap {
	width: 20px;
	height: 20px;
	margin: 3px 0 10px 10px;
}	

.corpvalues .textfields textarea.comment {
	width: 300px;
	height: 40px;
	margin: 3px 0 10px 10px;
	padding: 0;
}

/*	Learning	*/

.learning {
	margin:0 20px;
}

.learning td {
	padding: 15px 0 0 0;
	vertical-align: top;
}   

.learning td.separator {
	border-bottom: 1px dashed #BABADF;
}   

.learning h2 {
	margin: 0;
	padding-bottom: 5px;
	border-bottom: 1px solid #BABADF;  
}

.learning .label {
	width: 180px;
}

.learning .label label {
	font-weight: bold;
	font-size: 12px;
	color: #777;
}


.learning .textfields {
	width: 420px;
	vertical-align: top;
}


.learning .textfields textarea {
	width: 400px;
	height: 80px;
	margin: 3px 0 10px 10px;
	padding: 0;
}


/*	Contact Form	*/

.contact  {
	margin:0 20px;
	border-top: 1px dashed #BABADF;
	padding-top: 10px;
}

.contact div.details {
	float: left;
	width: 220px;
}	

.contact div.comments {
	float: right;
	width: 360px;
}	      

.contact label {
	display: block;
	font-size: 12px;
	font-weight: bold;
	color: #666;
	margin-bottom: 5px;
}

.contact .details input{
	width: 200px;
	margin-bottom: 13px;
}	

.contact .comments textarea {
	width: 340px;
	height: 180px;
}

.contact .submit {
	text-align: left;
	margin: 0;
}        

#contactdetails {
	background-color: #e1e5d2;
	margin-left: 10px;
	padding-bottom: 10px;	
}

#contactdetails h2 {
	margin: 0;
	padding: 10px;
	background-color: #bbc597;
}

#contactdetails p {
	margin: 10px;
}

#contactdetails p strong {
	display: block;
	color: #0b5173;
}

/*
------------------------
Typography
------------------------
*/

/*
Generic Selectors
*/


body {
	font-family: Arial, "MS Trebuchet", sans-serif;
}   

h1 {
	font-size: 28px;
	color: #7e9334;
	line-height: 100%;
}

h1 span {
	/*color: #6763b0;*/
	color: #002f50;
}

.principlink h1 {
	color: #002888;
}

.principlink h1 span {
	color: #6564B1;
}

h2 {
	font-size: 16px;
	color: #0b5173;
	line-height: 90%;
}

#principles h2 {
	color: #002888;	
}

#principles h2 span {
	color: #fff;	
}

/*.principlink h2 {
	border-top: 1px dotted #6564B1;
	margin-top: 12px;
	padding-top: 13px;
}*/

h4 {
	font-size: 12px;
	color: #000;
}

p {
	font-size: 12px;
	color: #555;
	line-height: 120%;
}

a {
	color: #00F;
}


/*
ID's & Classes
*/

p.definition {
	font-style: italic;
}


/*	Header	*/
	
#header h1 {
	font-size: 14px;
}

/*	Menu	*/

#menu a {
	font-size: 12px;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
}	

#menu td.current a,
#menu a:hover
{
	color: #CECFE1;
}

/*	Submenu */
	
#submenu ul li a:link,
#submenu ul li a:visited {
	font-weight: bold;
	color: #8a9a53;
	text-decoration: none;
}

#submenu ul li a:hover,
#submenu ul li.current a {
	color: #FFF;
} 



/*	Leaflet & Homepage button*/
	
.leaflet h3 a:link,
.leaflet h3 a:visited,
.homebtn h3 a:link,
.homebtn h3 a:visited {
	color: #E5E4F5;
	font-size: 21px;
	text-decoration: none;
}

.leaflet h3 a:hover,
.homebtn h3 a:hover {
	color: #FFF;
	text-decoration: underline;
}

.leaflet p a:link,
.leaflet p a:visited {
	font-size: 12px;
	color: #555;
	font-weight: bold;
	text-decoration: none;
}

.leaflet p a:hover {
 	color: #00F;
}

/*	Homepage only ----------- */
/*	Welcome	*/

.principlink a {
	font-size: 12px;
	line-height: 110%;
	font-weight: bold; 
 }

.principlink a span {
	font-weight: normal;
}

.principlink a:link,
.principlink a:visited {
	color: #000;
	text-decoration: none; 	
	}

.principlink a:hover {
	color: #000;
	}
	
	
.homebtn blockquote h5 {
	font-size: 21px;
	font-weight: bold;
}	

/*	Snippets */

#snippets p.quote {
	color: #515082;
	font-weight: bold;
	font-size: 11px;
}

#snippets p.quote a:link,
#snippets p.quote a:visited {
	color: #656563;
	text-decoration: none;
}

#principles #snippets p.quote a:link,
#principles #snippets p.quote a:visited {
	color: #515082;
	text-decoration: none;
}

#snippets p.quote a:hover {
	color: #00F;
	text-decoration: underline;
}

#snippets p.credited {
	font-size: 11px;
}

/*	Side Bar	*/

#sidebar .credited {
	color: #61625d;       
	font-size: 11px;
}

#sidebar .credited span {
	font-weight: bold;
}

#sidebar .caption {
	color: #777;       
	font-size: 11px;
	font-style: italic;
}

/* Content	*/

.pdf li a:link,
.pdf li a:visited {
	text-decoration: none;
}   

.pdf li a:link strong,
.pdf li a:visited strong{
	color: #222;
}   

.pdf li a:hover,
.pdf li a:hover strong  {
	color: #00F;
	text-decoration: underline;
}

/*	Event	*/

.event .date {
	font-weight: bold;
	color: #777;
	font-style: italic;
}	  

.link {
	font-weight: bold;
}	

.link a {
	font-weight: normal;
}
	
/*	footer	*/

#footer p {
	font-size: 10px;
	text-align: right;
	color: #6564B1;
	}

#footer p a:link,
#footer a:visited {
	color: #999;
	text-decoration: none;
}	

#footer p a:hover {
	color: #002785;
}	


/*
------------------------
Unique Cases
------------------------
*/

/*
------------------------
Misc & Hacks
------------------------
*/
                                                                       
.clear {
	clear: both;
}
                                        
.welcome{
	float: right;
	width: 490px;
	border-left: 1px solid #E6E5F5;
}

.welcome a {
	margin: 10px 20px;
    height: 43px;
 }

.welcome a span {
	display: block;
}

.welcome a:link,
.welcome a:visited {
	display: block;
	padding: 12px 40px 0 15px;
	background-color: #E5E4F5;
	background-image: url(../images/ui/goto_icon.gif);
	background-position: 405px 10px;
	background-repeat: no-repeat;
	}

.welcome a:hover {
	background-color: #d2d2ec;
	background-image: url(../images/ui/goto_icon_hover.gif);
	}