/*_________________________________________________________________________________________________________________________________________
Main style sheet created for the objective enterprise.
Tony Di Salvo 06/07
Version 1.1
Modified 14.01.23: 

- to merge basic.css and objective.css
- to replace variable (#) references with simpler class (.) definitions.
_________________________________________________________________________________________________________________________________________*/


/* HTML tag styles_______________________________________________________________________________________________________________________*/

body {
	/* Most browsers use a standard font size of 16 points. By starting with 62.5%, the baseline font-size will be 10 points. Therefore 1 em = 10 pts, .9 em = 9 pts, etc. */
	font-size:62.5%;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	margin-top: 40px;
	background-image: url(../graphics/bodyBackground.jpg);
	background-repeat: repeat-x;
	background-position: left 40px;
	
	/* 1200 x 800 layout grid - remove comments to reveal	
	background-image: url(../graphics/layout_grid.gif);
	background-repeat: no-repeat;
	background-position: left top;*/
	
	}
	
p {
	font-size: 1.2em;
	line-height: 1.4em;
	}

/* Add a small margin at the end of each paragraph in a div */
div p {
	margin-bottom: 2em;
	}

blockquote {
	font-size: 1.2em;
	margin-top: 2em;
	text-align: right;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #c15e28;
	padding-right: 0.5em;
	padding-left: 0.5em;
	}

cite {
	display: block;
	margin-top:1em;
	padding-left: 50%;
	}
	
em {
	font-weight:bold;
	}	
	
ul {
	list-style-type: none;
	font-size: 1.2em;
	line-height: 1.4em;
	}

ol {
	margin-left: 20px;
	font-size: 1.4em;
	line-height: 1.6em;
	}

dl {
	margin-bottom: 1em;
	}

dt {
	font-size: 1.2em;
	line-height: 1.6em;
	font-weight: bolder;
	}
	
dd {
	padding-bottom: 0.4em;
	font-size: 1.2em;
	}
	
form {
	
	}

h1, h2, h3, h4, h5 {
	margin-bottom:.5em;
	}

h2 {
	font-size: 1.6em;
	line-height: 1.6em;
	color: #c15e28;
	}

h3 {
	font-size: 1.4em;
	line-height: 1.4em;
	font-weight: normal;
	color: #c15e28;
	}

h3.dark {
	color: #222222;
	line-height: 1.1em;
	}

h4 {
	font-weight: normal;
	color:#333333;	
	}

strong {
	color: #333333;
	}

label {
	line-height: 1.2em;
	}
	
img {
	margin-bottom: 2em;
	}

input {
    font-size: 1.2em;
    color: #333333;
    }
    

/* design classes  _________________________________________________________________________________________________________________________________________*/

.resources p {
	font-size: 1.2em;
	line-height:1.4em;
	text-align: right;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #c15e28;
	padding-right: 0.5em;
	padding-left: 0.5em;
	}

.shadow {
	background-image: url(../graphics/pageBackground.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	margin-right: -5px;
	margin-bottom: -5px;
	}

.caption {
	font-size: .9em;
	line-height: 1em;
	color: #999999;
	}
	
.colorcaption {
	font-size: .9em;
	line-height: 1em;
	color:#c15e28;
	}
	
#copyright {
	color:#666666;
	font-size: 1em;
	line-height: 3em;
	}

.smalltext {
	font-size: .7em;
	color: #666666;
	}

.errorlist {
	font-size: 1em;
	line-height: 1em;
	color:#c15e28;
	}

/* layout styles  _________________________________________________________________________________________________________________________________________*/
/* these are organized as follows:
	- Main layout styles: provide basic structure to all pages. Since there is only one instance of each style on each page, ids are used.
	- General layout styles: used within the main layout styles. Because multiple instances of the style can reside on each page, classes are used.
	- Specific layout styles: used to add specific attributes to the general layout styles. */

/*  Set default margins and padding to 0 to eliminate confusion about which are set here and which are set by browsers. */
* {
	margin: 0px;
	padding: 0px;
	}

/* Main layout styles - define the page and its major sections. Usually used only once per page */

/* "Page" is fixed width and is centered in the web page using auto margins. (IDWIMIE, but IE centers all div contents with text alignment so the body text must be centered (see body style above)). A width of 1024 is chosen to support widescreens. With 30 pixels removed for scroll bars, that leaves 994. Using the "divine proportion" of 1.62 to come up with 614 for the width of the main section, leaving 380 for the rightmost. Went with 990 and a derivative of the rule of thirds instead and divided the space into six sections, usually used two and four at a time. Rather than use margins or padding (which invoke the IE box model and its inherent problems), content and index sections and subsections were created with fixed widths and floated left or right leaving virtual gutters. Set the left two thirds (content) to 660 and the right third (index) at 330. Content sections usually 260 and index sections at 200. The intent is to nest content and index blocks within page, subsection withn section and indexsectin within index. Current layout 260 content, leaving 70 margin for left and right justified content sections. 190 for index section, leaving 140 margin to left of right justified index section. In other words: 260 - 70 - 70 - 260 - 140 - 190 */

/* Another method for centering uses negative margins. May try if this method presents cross browser problems. */

#page {
	width: 660px;
	margin-right: auto; 
	margin-left: auto;
	/*padding-right: 170px;*/
	/*background: #CD9394;*/
	background-color:#D8E783;

	/* IDWIMIE - this tag added to return text to left after centering it in "Body" to center div within the web page.*/
	/*text-align: left;*/
	/*position: relative;*/	
	}

#branding {
	float: left;
	width: 660px;
	}

/*#brand {
	float:right;
	height: 340px;
	width: 50px;
	margin-right: -60px;
	background-image: url(../graphics/objectiveenterprisevertical.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	margin-top: 20px;
	}*/

#brandindex {
	float: left;
	text-align: left;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-left: 5px;
	}

.links#brandindex {
	font-size: 20px;
	line-height: 20px;
	color: #333333;
	font-family: Georgia, "Times New Roman", Times, serif;
	}

#content {
	width: 660px;
	float: left;
	position: relative;
	margin-top: 20px;
		/*background-color:#70E873;*/
	}

#index {
	width: 260px;
	float: right;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 5px;
	padding: 5px;
	border: 1px solid #CCCCCC;
	/*background-image: url(../graphics/objectiveenterprisevertical.jpg);*/
	background-image: url(../graphics/oeverticalunderconstruction.jpg);
	background-repeat: no-repeat;
	background-position: 2px 5px;
	background-color: #FFFFFF;
	text-align: right;
	color: #666666;
	position: fixed;
	top: 0px;
	right: 0px;
	}

/* General layout styles - classes usually used multiple times per page*/

.supersection {
	width: 660px;
	float: left;
	margin-bottom: 20px;
	}
	
.section {
	/* width: 305px; */
	width: 260px;
	float: left;
	margin-bottom: 20px;
	}
	
.subsection {
	/* width: 140px; */
	width: 100px;
	float: left;
	margin-top: 3px;
	border-top-width: 1px;
	/* solid style doesn't appear in IE. Double works and shows up as single in Firefox */
	border-top-style: double;
	border-top-color: #c15e28;
	font-size: .9em;
	}

.subsection h2{
	line-height: 1em;
	}

.indexsection {
	width: 166px;
	float: right;
	text-align: right;
	line-height: 1em;
	}

.illustration {
	float:left;
	border-top-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-left-color: #CCCCCC;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #999999;
	border-bottom-color: #999999;
	}

.image {
	/* offset the image from the background shadow*/
	/*float:left;
	margin-left: -5px;
	margin-top: -5px;
	border: 1px solid #CCCCCC;*/
	}

.bibliography {
	width: 660px;
	float: left;
	margin-bottom: 60px;
	}

.bibliography cite {
	float: left;
	padding-left: 0;
	width: 130px;
	margin-top: 0;
	font-size: 1.4em;
	}	

.bibliography blockquote {
	float: right;
	width: 260px;
	margin-top: 0;
	}	

.resources, concepts {
	width: 660px;
	float: left;
	margin-bottom: 60px;
	}

.resources a {
	float: left;
	padding-left: 0;
	width: 130px;
	margin-top: 0;
	font-size: 1.4em;
	}	

.resources p, concepts p {
	float: right;
	width: 260px;
	}

/* Specific layout styles. These are applied to specifically identified page elements. */

#section1, #section3, #section5, #section7 {
	float:left;
	}

.sectionleft, subsectionleft {
	float:left;
	}

#section2, #section4, #section6, #section8 {
	float:right;
	text-align: right;
	}

.sectionright {
	float:right;
	text-align: right;
	}

#subsection1, #subsection3, #subsection5, #subsection7 {
	float:left;
	}

#subsection2, #subsection4, #subsection6, #subsection8 {
	float:right;
	}

.subsectionright {
	float:right;
	}

#indexsection1 {
	height: 400px;
	font-size: .9em;
	}
	
#indexsection2 {
	line-height: 1em;
	font-size: 1em;
	margin-top: 10px;
	}

#indexsection2 h2 { 
	font-size: 1.2em;
	}

/* move image to the left to compensate for right-floated div that is smaller than image 
div#section2 img, div#section4 img, div#section6 img {
	margin-left: -50px;
	}*/

/* move image to the left to compensate for left-floated divs at left edge of page to account for white space in left section of image 
div#section1 img, div#section3 img, div#section5 img {
	margin-left: -8px;
	}*/

/* Page-specific styles */

/* Styles used to manipulate the main graphic on the instruments page. May be generalized. */

/* position set to relative so contained blocks can be positioned absolutely within */
#instrumentsIllustration {
	float:left;
	position: relative;
	/*background-image: url(../graphics/dropShadow.png);
	background-position: right bottom;
	margin-top: 6px;
	margin-left: 6px;
	padding-right: 6px;
	padding-bottom: 2px;
	border-top-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-left-color: #CCCCCC;*/
	}

/*#instrumentsIllustration img {
	margin-top: -6px;
	margin-left: -6px;
	border: 1px solid #CCCCCC;
	}*/

/* format text for detail but hide using large negative margin */ 
#instrumentsIllustration p {
	font-size: 1.2em;
	line-height: 1.2em;
	text-indent: -99999px;
	}

/* format detail headings but hide using large negative margin */
#instrumentsIllustration a h2 {
	position: relative;
	top: -22px;
	text-align: left;
	font-size: 1.2em;
	color: #333333;
	text-indent: -99999px;
	}

#instrumentsIllustration a img {
	visibility: hidden;
	}

/* reveal detail borders when hovering over main illustration */
#instrumentsIllustration:hover a#roadmapDetail,
#instrumentsIllustration:hover a#blueprintDetail,
#instrumentsIllustration:hover a#textDetail {
	border: 1px solid #999999;
	}

/* reveal headings when hovering over main illustration */
#instrumentsIllustration:hover a#roadmapDetail h2,
#instrumentsIllustration:hover a#blueprintDetail h2 {
	text-indent: 0px;
	}

a#roadmapDetail {
	position: absolute;
	top:42px;
	left:330px;
	height: 88px;
	width: 180px;
	}

a#roadmapDetail:hover {
	position: absolute;
	top: -2px;
	left: 155px;
	height: 247px;
	width: 477px;
	}

a#roadmapDetail:hover img,
a#blueprintDetail:hover img {
	/* offset the image from the background shadow - note that extra margin required on top (20 px) for space h2 header took up before being moved */
	margin-left: -5px;
	margin-top: -30px;
	visibility: visible;
	border: 1px dotted #999999;
	}
	
a#blueprintDetail {
	position: absolute;
	top: 300px;
	left:335px;
	height: 88px;
	width: 180px;
	}

a#blueprintDetail:hover {
	top:250px;
	left:205px;
	height: 161px;
	width: 434px;
	}

a#blueprintDetail:hover img {
	position:relative;
	visibility: visible;
	border: 1px solid #999999;}

a#textDetail {
	position: absolute;
	top: 220px;
	left: 5px;
	height: 130px;
	width: 120px; /*,520,135 */
	}

/* pull text out of view, but remain visible to screen readers */
a#textDetail p, a#textDetail h2 {
	text-indent: -99999px;
	top: 0px;
	}

/* reposition and change dimensions of the block to accommodate text */
a#textDetail:hover {
	top: 220px;
	left: -10px;
	height: 210px;
	width: 240px; /*,520,135 */
	}

/* bring text into view */
a#textDetail:hover p, a#textDetail:hover h2 {
	text-indent: 0px;
	text-align: center;
	}

/* offset text container from shadow */
a#textDetail:hover span {
	float: left;
	margin-left: -5px;
	margin-top: -5px;
	height: 210px;
	width: 240px;
	border: 1px solid #999999;
	background-color:#FFFFFF;
	}

/* remove borders on details when hovering over detail and add background shadow */	
div#instrumentsIllustration a#roadmapDetail:hover,
div#instrumentsIllustration a#blueprintDetail:hover,
div#instrumentsIllustration a#textDetail:hover {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	background-image: url(../graphics/dropShadow.png);
	background-position: right bottom;
	padding-right: 2px;
	padding-bottom: 2px;
	}

/* special styles  ________________________________________________________________________________________________________________________________________ */

/* anchor styles */

/* the body tag is identified with page ids on each page. the following highlights the current page by showing the appropriate anchor, in the header and index, in a different color (orange)*/
body#enterprise #brandindex a#enterprise,
body#home #brandindex a#home,
body#framework #brandindex a#framework,
body#processes #brandindex a#processes,
body#instruments #brandindex a#instruments,
body#concepts #brandindex a#concepts,
body#resources #brandindex a#resources,
body#managechange #brandindex a#managechange, 
body#producecapability #brandindex a#producecapability {
	/*color: #c15e28;*/
	color: #CCCCCC;
	}

body#home #index a#home,
body#framework #index a#framework,
body#aboutframework #index a#aboutframework,
body#processes #index a#processes,
body#managechange #index a#managechange,
body#producecapability #index a#producecapability,
body#instruments #index a#instruments,
body#roadmaps #index a#roadmaps,
body#blueprints #index a#blueprints,
body#concepts #index a#concepts,
body#sources #index a#sources,
body#resources #index a#resources,
body#syntezi #index a#syntezi {
	color: #c15e28;
	}

/* The links class is usaully applied to collections of links that form an index / navigation section on a page */

.links {
	font-size: 1.6em;
	color: #666666;
}

.links li {
	font-size: 1em;
	line-height: 1em;
	}

.links a:link {
	text-decoration: none;
	color: #333333;
	}

.links a:visited {
	text-decoration: none;
	color: #333333;
	}

.links a:hover {
	color: #c15e28;
	}

.links#brandindex a:hover {
	color:#CCCCCC
	} 

.links a:active {
	text-decoration: none;
	}

.links#headerleft {
	font-size: 24px;
}

.links#inline {
	font-size: 1em;
}

/* used primarly to style the objective enterprise anchor in the branding block */

a#enterprise:link {
	color: #000000;
	}

a#enterprise:visited {
	text-decoration: none;
	color: #000000;
	}

a#enterprise:hover {
	color: #c15e28;
	}

a#enterprise:active {
	text-decoration: none;
	}

/* The reference class is usaully applied for in line references within a page or to another page */

a.reference {
	color: #333333;
	text-decoration: none;
	}

a.reference:link {
	font-weight: bolder;
	border-bottom-style: dashed;
	border-bottom-color: #c15e28;
	border-bottom-width: 1px;
	
	}

a.reference:visited {
	font-weight: bolder;
	border-bottom-style: dashed;
	border-bottom-color: #c15e28;
	border-bottom-width: 1px;
	}

a.reference:hover {
	color: #c15e28;
	}

a.reference:active {
	text-decoration: none;
	}

/* The class clearfix implements the Aslett Clearing Method which uses the CSS :after pseudo-class to insert a bit of non-floated content instead of a div. This correctly positions the next div after the longest of preceding floating divs.  */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 2px;
	/* visibility: hidden; */
	}

/* code to fix IE guillotine bug (part of Aslett Clearing Method above*/
/* backslash hack hides from IE macintosh \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* end backslash hack */

.clearfloats {
	clear: both;
	margin: 0px;
	padding: 0px;
	}