@charset "UTF-8";
/* CSS Document */

/* Welcome to the template for a new program flyer style for CPCC's IT Division. This is intended to showcase what can be accomplished using CSS3 and HTML5. There is a lot of CSS here, but please don't be intimidated. I've commented the code as thoroughly as I can to help you find what you need. Ultimately, you will most likely need to make adjustments to the ARROW BOXES in this document, so I've commented those the most heavily to help you along the way. I've tried to use as few CSS styles as I can and encourage inline styling of many of them where possible to re-position elements using the same class, but the arrow shape that I've built using the arrow boxes could not be handled entirely that way because pseudo elements cannot be called out using an inline style. For that reason, you need a new set of arrow boxes for each program step where the information is shorter or longer than the existing boxes.  

As far as grouping of styles goes, I've tried my best to group them logically, although it may prove more useful to group them alphabetically down the road. All of the general layout elements that define or style the outermost aspects of the page come first, followed by the arrow box styles, body text styles, and ending with the credit bar and arrow styles*/

/* General Layout Elements */

/* Want to change the backgound image on the flyer? Look for an embedded style in the head of the page named #letterPage. It's the outer-most div element - defines boundary of 8.5x11 sheet of paper so that flyer will print well on a letter-sized piece of paper. It's embedded there instead of being included in the linked CSS so that you can switch out the background image for each flyer without having to have individual CSS files for each page if the image is the only difference. */

#headerContent { /* groups of all header elements from top to start of first step courses */
	margin: 0px;
	padding: 0px;
	float: left;
	height: 178px;
	width: 662px;
}

#ITBar { /* defines background color and type settings for top bar that list the name and number of the program of study */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	background-color: #000;
	letter-spacing: 0px;
	text-align: center;
	vertical-align: middle;
	margin: 0px;
	height: 27px;
	width: 662px;
	border: 0px solid #000;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	float:left;
	background-repeat:no-repeat;
}

#headerSpace { /* contains white banner and its contents, uses padding to offset from ITBar */
	float:left; 
	padding-top:18px; 
	width:662px; 
	height:152px;
}

#whiteBanner { /* translucent white banner that provides background for IT Divison header and program type treatment */
	float:left; 
	padding-left:17px;  
	padding-top:8px; 
	padding-bottom:5px; 
	border-top:#000 thin solid;
	border-bottom:#000 thin solid;
	opacity:0.9; /* Sets transparency for most major browsers */
	filter:alpha(opacity=90); /* Sets transparency for IE8 and earlier */
	width:645px;
	height:105px;
	color:#000;
	background-color:#FFF;
}

#headerTextContainer { /* provides padding and spacing for IT Divison header */
	width:400px; 
	float:left;  /* don't change this */
	margin-top:25px; /* sets how far off the top of white banner that header text appears */
}

#programLogoType { /* provides padding and spacing for program type treatment */
	width:200px; 
	float:left;
}

#bodyContent { /* groups all main body content between header and footer */
	height: 553px;
	width: 662px;
	margin-left:17px;
	margin-right:: 17px;
	float: left;
	padding-top: 17px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#graphicBG { /* black square background for program steps */
	width:628px;
	height:585px;
	background-color:#000000;
	border:1px #FFFFFF solid;
}

.basicDiv { /* defines a basic div region for grouping elements to float left together */
	float: left;
	width: 662px;
}

#footerBar { /* defines the boundary of the footer and its elements */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000;
	text-align: center;
	vertical-align: middle;
	margin: 0px;
	height: 60px;
	width: 662px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin-left: 17px;
	float:left;
	margin-top:40px;
}

/* End General Layout Elements */




/* ARROW BOXES: Shape and Layering Elements */


.tiers { /* Container for a single step of arrow boxes, their content and their containers; groups elements of each step in program */
	float:left; /* don't change this */
	width:600px;
	height:86px;
}


/* INDIVIDUAL ARROW BOX CONTAINERS - group elements of each arrow box together and establish z-index layering for each box as relative to the others in that tier; adjust top and left placement of each instance inline */


.edArrow { /* wrapper to position educational arrow box among the others in a tier - top layer of each arrow tier group */
	position:relative; /* don't change this */
	z-index:4; /* don't change this */
}

.ctArrow { /* wrapper to position certificate arrow box among the others in a tier - front arrow of double-arrow only */
	position:relative; /* don't change this */
	z-index:3; /* don't change this */
	left: 190px; /* adjust this inline for individual instances */
	top:-86px; /* adjust this inline for individual instances */
}

.ctArrow2 { /* wrapper to position certificate's double arrow box among the others in a tier - positioned behind ctArrow container and elements to create double-arrow effect */
	position:relative; /* don't change this */
	z-index:2; /* don't change this */
	left: 202px; /* adjust this inline for individual instances */
	top:-172px; /* adjust this inline for individual instances */
}

.empArrow { /* wrapper to position employment path arrow box among the others in a tier - bottom layer of each arrow tier group */
	position:relative; /* don't change this */
	z-index:1; /* don't change this */
	left: 342px; /* adjust this inline for individual instances */
	top:-258px; /* adjust this inline for individual instances */
}


/* ARROW BOX ELEMENTS - color borders and white interiors are defined spepararatly using the the border propoerties of these tags. Any tiers that are the same height will use the same sets of these tags, but if the height of the tier is different, you will need to use a different set of these. */

/* Arrow Boxes for Key Content */

/* EDUCATIONAL PATH KEY ARROW BOX ELEMENTS */

.keyeducationalArrowOuter { /* Creates the color border for this arrow box */
   width: 102px; /* Adjust this to make this arrow box longer */
   height: 24px; /* Adjust this to make this arrow box taller */
   background: #FCB514; /* Adjust this to make this arrow box a different color */
   position: relative; /* don't change this */
   padding-left:6px; /* Adjust this to make this arrow box's border thicker */
   padding-top:6px; /* Adjust this to make this arrow box's border thicker */
}
   
.keyeducationalArrowOuter:before { /* This creates the color border arrow on this content box. Using the before pseudo class makes it appear beneath the white inner arrow shape */
   content:""; 
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */  /* all other instances of this type of element will be adjusted inline, but since the keys only appear once, they can all be set here */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 14px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 20px solid #FCB514; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 15px solid transparent;  /* adjust this px value if you make the box taller, but don't change the other two properties */
}

.keyeducationalArrowInner { /* Creates the white content area for this arrow box */
   width: 98px; /* Adjust this to make this arrow box longer */
   height: 18px; /* Adjust this to make this arrow box taller */
   background: white; /* Adjust this to make this arrow box content area a different color */
   position: relative; /* don't change this */
}
   
.keyeducationalArrowInner:after { /* This creates the white area arrow shape on this content box. Using the after pseudo class makes it appear above the color outer arrow shape */
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 9px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 14px solid white; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 9px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}


/* CERTIFICATION PATH KEY ARROW BOX ELEMENTS */

.keycertArrowOuter { /* Creates the color border for this arrow box */ 
   width: 118px; /* Adjust this to make this arrow box longer */ 
   height: 24px;  /* Adjust this to make this arrow box taller */
   background: #3063A5; /* Adjust this to make this arrow box a different color */
   position: relative; /* don't change this */
   padding-left:6px; /* Adjust this to make this arrow box's border thicker */
   padding-top:6px; /* Adjust this to make this arrow box's border thicker */
}
   
.keycertArrowOuter:before { /* This creates the color border arrow on this content box. Using the before pseudo class makes it appear beneath the white inner arrow shape */ 
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 14px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 20px solid #3063A5; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 15px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}

.keycertArrowInner { /* Creates the white content area for this arrow box */
   width: 114px; /* Adjust this to make this arrow box longer */ 
   height: 18px; /* Adjust this to make this arrow box taller */ 
   background: white; /* Adjust this to make this arrow box content area a different color */
   position: relative; /* don't change this */
}
   
.keycertArrowInner:after { /* This creates the white area arrow shape on this content box. Using the after pseudo class makes it appear above the color outer arrow shape */
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 9px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 14px solid white; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 9px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}


/* EMPLOYMENT PATH KEY ARROW BOX ELEMENTS */

.keyempArrowOuter { /* Creates the color border for the key content EMPLOYMENT path arrow box */
   width: 125px; /* Adjust this to make this arrow box longer */
   height: 24px; /* Adjust this to make this arrow box taller */
   background: green; /* Adjust this to make this arrow box a different color */
   position: relative; /* don't change this */
   padding-left:6px; /* Adjust this to make this arrow box's border thicker */
   padding-top:6px; /* Adjust this to make this arrow box's border thicker */
}

.keyempArrowInner { /* Creates the white content area for this arrow box */
   width: 120px;  /* Adjust this to make this arrow box taller */
   height: 18px; /* Adjust this to make this arrow box taller */ 
   background: white; /* Adjust this to make this arrow box content area a different color */
   position: relative; /* don't change this */
}


/*Arrow Boxes for T1 and T2 Content */

/* EDUCATIONAL PATH T1 AND T2 ARROW BOX ELEMENTS */

.educationalArrowOuter { /* Creates the color border for this arrow box */
   width: 192px; /* Adjust this to make this arrow box longer */ 
   height: 80px; /* Adjust this to make this arrow box taller */ 
   background: #FCB514; /* Adjust this to make this arrow box a different color */
   position: relative; /* don't change this */
   padding-left:6px; /* Adjust this to make this arrow box's border thicker */
   padding-top:6px; /* Adjust this to make this arrow box's border thicker */
}
   
.educationalArrowOuter:before { /* This creates the color border arrow on this content box. Using the before pseudo class makes it appear beneath the white inner arrow shape */ 
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 43px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 20px solid #FCB514; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 43px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}

.educationalArrowInner { /* Creates the white content area for this arrow box */
   width: 188px;  /* Adjust this to make this arrow box longer */
   height: 73px; /* Adjust this to make this arrow box taller */ 
   background: white; /* Adjust this to make this arrow box content area a different color */
   position: relative; /* don't change this */
}
   
.educationalArrowInner:after { /* This creates the white area arrow shape on this content box. Using the after pseudo class makes it appear above the color outer arrow shape */
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 36px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 17px solid white; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 36px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}

/* CERTIFICATION PATH T1 AND T2 ARROW BOX ELEMENTS */

.certArrowOuter { /* Creates the color border for this arrow box */
   width: 140px; /* Adjust this to make this arrow box longer */ 
   height: 80px; /* Adjust this to make this arrow box taller */ 
   background: #3063A5; /* Adjust this to make this arrow box a different color */
   position: relative; /* don't change this */
   padding-left:6px; /* Adjust this to make this arrow box's border thicker */
   padding-top:6px; /* Adjust this to make this arrow box's border thicker */
}
   
.certArrowOuter:before { /* This creates the color border arrow on this content box. Using the before pseudo class makes it appear beneath the white inner arrow shape */ 
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 43px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 20px solid #3063A5; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 43px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}

.certArrowInner { /* Creates the white content area for this arrow box */
   width: 136px; /* Adjust this to make this arrow box longer */ 
   height: 73px; /* Adjust this to make this arrow box taller */ 
   background: white; /* Adjust this to make this arrow box content area a different color */
   position: relative; /* don't change this */
}
   
.certArrowInner:after { /* This creates the white area arrow shape on this content box. Using the after pseudo class makes it appear above the color outer arrow shape */
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 36px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 17px solid white; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 36px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}

/* EMPLOYMENT PATH T1 AND T2 ARROW BOX ELEMENTS */

.empArrowOuter { /* Creates the color border for this arrow box */
   width: 236px; /* Adjust this to make this arrow box longer */ 
   height: 80px; /* Adjust this to make this arrow box taller */ 
   background: green; /* Adjust this to make this arrow box a different color */
   position: relative; /* don't change this */
   padding-left:6px; /* Adjust this to make this arrow box's border thicker */
   padding-top:6px; /* Adjust this to make this arrow box's border thicker */
}

.empArrowInner { /* Creates the white content area for this arrow box */
   width: 230px; /* Adjust this to make this arrow box longer */ 
   height: 73px; /* Adjust this to make this arrow box taller */ 
   background: white; /* Adjust this to make this arrow box content area a different color */
   position: relative; /* don't change this */
}



/*Arrow Boxes for T3 Content */

/* EDUCATIONAL PATH T3 ARROW BOX ELEMENTS */

.t3educationalArrowOuter { /* Creates the color border for this arrow box */
   width: 192px; /* Adjust this to make this arrow box longer */ 
   height: 95px; /* Adjust this to make this arrow box taller */ 
   background: #FCB514; /* Adjust this to make this arrow box a different color */
   position: relative; /* don't change this */
   padding-left:6px; /* Adjust this to make this arrow box's border thicker */
   padding-top:6px; /* Adjust this to make this arrow box's border thicker */
}
   
.t3educationalArrowOuter:before { /* This creates the color border arrow on this content box. Using the before pseudo class makes it appear beneath the white inner arrow shape */ 
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 50px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 20px solid #FCB514; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 50px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}

.t3educationalArrowInner { /* Creates the white content area for this arrow box */
   width: 188px; /* Adjust this to make this arrow box longer */ 
   height: 88px; /* Adjust this to make this arrow box taller */ 
   background: white; /* Adjust this to make this arrow box content area a different color */
   position: relative; /* don't change this */
}
   
.t3educationalArrowInner:after { /* This creates the white area arrow shape on this content box. Using the after pseudo class makes it appear above the color outer arrow shape */
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 43px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 17px solid white; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 43px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}

/* CERTIFICATION PATH T3 ARROW BOX ELEMENTS */

.t3certArrowOuter { /* Creates the color border for this arrow box */
   width: 140px; /* Adjust this to make this arrow box longer */ 
   height: 95px; /* Adjust this to make this arrow box taller */ 
   background: #3063A5; /* Adjust this to make this arrow box a different color */
   position: relative; /* don't change this */
   padding-left:6px; /* Adjust this to make this arrow box's border thicker */
   padding-top:6px; /* Adjust this to make this arrow box's border thicker */
}
   
.t3certArrowOuter:before { /* This creates the color border arrow on this content box. Using the before pseudo class makes it appear beneath the white inner arrow shape */ 
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 50px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 20px solid #3063A5; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 50px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}

.t3certArrowInner { /* Creates the white content area for this arrow box */
   width: 136px; /* Adjust this to make this arrow box longer */ 
   height: 88px; /* Adjust this to make this arrow box taller */ 
   background: white; /* Adjust this to make this arrow box content area a different color */
   position: relative; /* don't change this */
}
   
.t3certArrowInner:after { /* This creates the white area arrow shape on this content box. Using the after pseudo class makes it appear above the color outer arrow shape */
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 43px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 17px solid white; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 43px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}

/* EMPLOYMENT PATH T3 ARROW BOX ELEMENTS */

.t3empArrowOuter { /* Creates the color border for this arrow box */
   width: 236px; /* Adjust this to make this arrow box longer */ 
   height: 95px; /* Adjust this to make this arrow box taller */ 
   background: green; /* Adjust this to make this arrow box a different color */
   position: relative; /* don't change this */
   padding-left:6px; /* Adjust this to make this arrow box's border thicker */
   padding-top:6px; /* Adjust this to make this arrow box's border thicker */
}

.t3empArrowInner { /* Creates the white content area for this arrow box */
   width: 230px; /* Adjust this to make this arrow box longer */ 
   height: 88px; /* Adjust this to make this arrow box taller */ 
   background: white; /* Adjust this to make this arrow box content area a different color */
   position: relative; /* don't change this */
}



/*Arrow Boxes for T4 Content */

/* EDUCATIONAL PATH T4 ARROW BOX ELEMENTS */

.t4educationalArrowOuter { /* Creates the color border for this arrow box */
   width: 329px; /* Adjust this to make this arrow box longer */ 
   height: 68px; /* Adjust this to make this arrow box taller */ 
   background: #FCB514; /* Adjust this to make this arrow box a different color */
   position: relative; /* don't change this */
   padding-left:6px; /* Adjust this to make this arrow box's border thicker */
   padding-top:6px; /* Adjust this to make this arrow box's border thicker */
}
   
.t4educationalArrowOuter:before { /* This creates the color border arrow on this content box. Using the before pseudo class makes it appear beneath the white inner arrow shape */ 
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 37px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 20px solid #FCB514; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 37px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}

.t4educationalArrowInner { /* Creates the white content area for this arrow box */
   width: 324px; /* Adjust this to make this arrow box longer */ 
   height: 62px; /* Adjust this to make this arrow box taller */ 
   background: white; /* Adjust this to make this arrow box content area a different color */
   position: relative; /* don't change this */
}
   
.t4educationalArrowInner:after { /* This creates the white area arrow shape on this content box. Using the after pseudo class makes it appear above the color outer arrow shape */
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 31px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 17px solid white; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 31px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}

/* EMPLOYMENT PATH T3 ARROW BOX ELEMENTS */

.t4empArrowOuter { /* Creates the color border for this arrow box */
   width: 248px; /* Adjust this to make this arrow box longer */ 
   height: 68px; /* Adjust this to make this arrow box taller */ 
   background: green; /* Adjust this to make this arrow box a different color */
   position: relative; /* don't change this */
   padding-left:6px; /* Adjust this to make this arrow box's border thicker */
   padding-top:6px; /* Adjust this to make this arrow box's border thicker */
}

.t4empArrowInner { /* Creates the white content area for this arrow box */
   width: 242px; /* Adjust this to make this arrow box longer */ 
   height: 62px; /* Adjust this to make this arrow box taller */ 
   background: white; /* Adjust this to make this arrow box content area a different color */
   position: relative; /* don't change this */
}

/*Arrow Boxes for T5 Content */

/* EDUCATIONAL PATH T5 ARROW BOX ELEMENTS */

.t5educationalArrowOuter { /* Creates the color border for this arrow box */
   width: 192px; /* Adjust this to make this arrow box longer */ 
   height: 85px; /* Adjust this to make this arrow box taller */ 
   background: #FCB514; /* Adjust this to make this arrow box a different color */
   position: relative; /* don't change this */
   padding-left:6px; /* Adjust this to make this arrow box's border thicker */
   padding-top:6px; /* Adjust this to make this arrow box's border thicker */
}
   
.t5educationalArrowOuter:before { /* This creates the color border arrow on this content box. Using the before pseudo class makes it appear beneath the white inner arrow shape */ 
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 45px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 20px solid #FCB514; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 45px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}

.t5educationalArrowInner { /* Creates the white content area for this arrow box */
   width: 188px; /* Adjust this to make this arrow box longer */ 
   height: 78px; /* Adjust this to make this arrow box taller */ 
   background: white; /* Adjust this to make this arrow box content area a different color */
   position: relative; /* don't change this */
}
   
.t5educationalArrowInner:after { /* This creates the white area arrow shape on this content box. Using the after pseudo class makes it appear above the color outer arrow shape */
   content:"";
   position: absolute; /* don't change this */
   left: 100%; /* don't change this */
   top: 0px; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 38px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
   border-left: 17px solid white; /* adjust this px value to make the arrow longer; change the color of this to the same value if you change the color of the related arrow boxes for a new flyer */
   border-bottom: 38px solid transparent; /* adjust this px value if you make the box taller, but don't change the other two properties */
}

/* EMPLOYENT PATH T3 ARROW BOX ELEMENTS */

.t5empArrowOuter { /* Creates the color border for this arrow box */
   width: 388px; /* Adjust this to make this arrow box longer */ 
   height: 85px; /* Adjust this to make this arrow box taller */ 
   background: #FCB514; /* Adjust this to make this arrow box a different color */
   position: relative; /* don't change this */
   padding-left:6px; /* Adjust this to make this arrow box's border thicker */
   padding-top:6px; /* Adjust this to make this arrow box's border thicker */
}

.t5empArrowInner { /* Creates the white content area for this arrow box */
   width: 382px; /* Adjust this to make this arrow box longer */ 
   height: 78px; /* Adjust this to make this arrow box taller */ 
   background: white; /* Adjust this to make this arrow box content area a different color */
   position: relative; /* don't change this */
}


/* END ARROW BOX ELEMENTS */



/* BODY TEXT CONTENT ELEMENTS*/


.stepHeaders { /* sets properties of text beginning with Step 1, Step 2, etc */
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:10px;
	float:left;
	padding-top:7px;
	font-weight:bold;
	height:18px;
	width:580px;
	
}

.mailTo a:link { /* sets properties of program email contact mailto link */
	color:#FFFFFF;
}

.mailTo a:visited { /* sets properties of program email contact mailto link */
	color:#FFFFFF;
}



.mainText { /* sets properties of main text elements such as class names, cettificate descriptions, etc. Positioning of various elements is determined by inline adjustments of other corresponding containers such as empText, classCol, etc. */
	font-family:Arial, Helvetica, sans-serif;
	color:#000;
	text-align:left;
	font-size:9px;
	line-height:12px;
	float:left;
	z-index:5; /* don't change this */
	padding-top:2px;
}

.classCol { /* groups course prefixes and numbers into a container */
	width:47px;
	float:left; /* don't change this */
	margin-right:3px;
	margin-left:3px;

}

.titleCol { /* groups course names into a container to allow for an even margin between the course prefixes and course names */
	width:135px;
	float:left; /* don't change this */
}

.ctText { /* positions certificate path box text */
	font-family:Arial, Helvetica, sans-serif;
	color:#000;
	text-align:left;
	font-size:9px;
	line-height:12px;
	float:left; /* don't change this */
	z-index:5; /* don't change this */
	padding-top:5px;
	margin-left:24px;
}

.empText { /* positions employment path box text */
	font-family:Arial, Helvetica, sans-serif;
	color:#000;
	text-align:left;
	font-size:9px;
	line-height:12px;
	float:left; /* don't change this */
	z-index:5; /* don't change this */
	padding-top:5px;
	margin-left:22px;
}

.empText a:link { /* makes the mailto link in this box black instead of blue */
	color:#000000;
	text-decoration:underline;
}

.empText a:visited { /* makes the mailto link in this box black instead of blue */
	color:#666666;
}

.bdp { /* styles "Bachelor's Degree Path" text */
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000;
	line-height:18px;
}

.symbolBox { /* styles Symbol Legend box at bottom of page */
	border:double #000; 
	width:210px; 
	height:25px; 
	font-size:8px; 
	font-weight:normal; 
	text-align:left; 
	line-height:9px; 
	float:left; 
	margin-right:25px; 
	padding:3px;
}

.leftColumnSymbol { /* styles interior left column of Symbol Legend box at bottom of page */
	width:100px; 
	float:left; 
	border-right: 1px solid #000; 
	margin-right:8px;
}

.rightColumnSymbol { /* styles interior right column of Symbol Legend box at bottom of page */
	width:100px; 
	float:left;
}

#logoBox { /* styles CPCC logo at bottom of page - brand standards calls for placement of this at bottom center of page, so try not to move it unless you really, really have to */
	float:left; 
	width:130px; 
	height:40px; 
	padding-top:5px;
	position:absolute;
	top: 800px;
	left: 275px;
}

.footerText { /* Styles the descriptive text in the footer of the document */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	line-height: 12px;
	font-weight: normal;
	color: #000;
	float:left; /* don't change this */ 
	width:230px;  /* don't change this */ 
	text-align:left; /* don't change this */ 
	position: relative; /* don't change this */ 
	top:0px; /* don't change this */ 
	left:0px; /* change this to 150px if you enable the symbol legend box */ 
}


.finePrint { /* styles equal-opportunity subtext in footer */
	width:380px; 
	height:37px; 
	float:left; /* don't change this */ 
	text-align:right; 
	font-family:Arial, Helvetica, sans-serif; 						
	font-size:5px;
	margin-top:30px;
	position:absolute; /* don't change this */ 
	top:800px; /* don't change this */ 
	left:272px; /* don't change this */ 
}



/* CREDIT BAR ARROWS, LAYOUT AND TEXT ELEMENTS */

/* First placement for downward credit arrow; adjust top position with inline styling for all others */

.creditBarSteps { /* sets vertical placement of credit arrow; adjust inline as needed */
	width:23px; /* don't change this */
	float:left; /* don't change this */
	top:110px; /* don't change this */
	left:-1px; /* don't change this */
	position:relative; /* don't change this */
	z-index:1; /* don't change this */
}

/* Downward pointing arrow under credit hour totals */

.creditArrowOuter { /* creates white border of credit arrow */
   width: 24px; /* don't change this */ 
   height: 0px; /* don't change this */ 
   background: white; /* Adjust this to make the credit arrows a different color */
   position: relative /* don't change this */;
}
   
.creditArrowOuter:before { /* creates black arrow shape of credit arrow */
   content:"";
   position: absolute /* don't change this */;
   left: 0; /* don't change this */
   top: 100%; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 15px solid white; /* adjust this px value if you make the arrow longer or shorter; adjust the color if your want to change the color of this arrow set */
   border-left: 12px solid transparent; /* don't change this */
   border-right: 11px solid transparent; /* don't change this */
   padding-left:1px; /* don't change this */
}

.creditArrowInner { /*   */
   width: 20px; /* don't change this */ 
   height: 0px; /* don't change this */ 
   background: black; /* Adjust this if you make the #graphicBG class a different color */
   position: relative; /* don't change this */
}
   
.creditArrowInner:after { /*   */
   content:"";
   position: absolute; /* don't change this */
   left: 2px; /* don't change this */
   top: 101%; /* don't change this */
   width: 0; /* don't change this */
   height: 0px; /* don't change this */
   border-top: 13px solid black; /* adjust this px value if you make the arrow longer or shorter; adjust the color if your want to change the color of this arrow set */
   border-left: 11px solid transparent; /* don't change this */
   border-right: 10px solid transparent; /* don't change this */
}

.creditBar { /* defines boundary of column containing all credit hour information along the left edge of the body content area */
	font-family:Arial, Helvetica, sans-serif;
	width:23px;
	float:left; /* don't change this */
	height:553px;
	color:#FFFFFF;
	text-align:center;
	padding-top:30px; /* don't change this */
	font-size:9px;
	font-weight:bold;
	line-height:12px;
	z-index:3; /* don't change this */
	position:relative; /* don't change this */
	top:0; /* don't change this */
	left:0; /* don't change this */
}

.credBlock { /* groups all credit hour listings in a single step */
	position:relative; /* don't change this */
	top:0px; /* don't change this */
	left:0px; /* don't change this */
	z-index:4; /* don't change this */
	margin-bottom:34px; /* adjust inline if needed */
	padding-top: 2px; /* adjust inline if needed */
	height:76px; /* adjust inline if needed */
	
}

.totalCred { /* styles the words "Total Credits" in credit bar */
	font-size:4px;
	color:#FFF;
	text-transform:capitalize;
	line-height:6px;
	padding-bottom:10px; /* adjust inline if needed */
}

.totals { /* Styles the credit hour totals for each step */
	font-size:12px;
}