/*
Copyright 2010 William De Wysockie
*/
 
 
/*
----------BODY FORMATTING RULE----------
*/
 
body {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 13px;
	height: 100%;
	margin-top:10px;
	margin-bottom:30px;
	margin-right:0px;
	margin-left:0px;
	padding: 0;
	/*
	background-color: #F8F5F2;
	*/
	background-color: #fff;
	background-image: url(../images/blue_BKG3.png);
	background-repeat: repeat-x;
	text-align: center;
}



/*
----------ANCHOR ELEMENTS----------
*/

A:link {
	text-decoration: none;
	color: #A45200;
	font-weight:500;
}

A:visited {
	text-decoration: none;
	color: #A45200;
	font-weight:500;
}

A:active {
	text-decoration: none;
	color: #A45200;
	font-weight:500;
}

A:hover {
	text-decoration: underline;
	color: green;
	font-weight:500;
}



/*
----------CONTAINER RULES----------
*/

.containerCONTENT {
	/* Background stuff */
    background-color: #fff;
	background-image: url(../images/BbMobile_iPad9.png);
	background-repeat: no-repeat;
    /* Border stuff */
	border-style: solid;
	border-width: 1px;
	border-color: #C1C6C1;
    /* All the rest */
	width: 550px;
	margin: 0 auto;
	text-align: left;
	display:table;
}

      .header_main,
      .header_content {
        /* Font stuff */
        font-family: Arial, Helvetica, sans-serif;
        font-style: normal;
        font-weight: bold;
        font-size: 16px;
        /* All the rest */
        height: 160px;
        line-height: 130%;
        }

      .containerINNER {
      	width: 480px;
      	margin: 0 auto;
      }                  
            
            .leftCOLUMN_main,
            .leftCOLUMN_content {
            	background-color: #E6E6D2;
            	margin-left: 50px;
            	padding-top:15px;
            	padding-bottom:15px;
            	padding-right:15px;
            	padding-left: 20px;
                float:left;
                word-spacing: .05em;
            }
            
            .leftCOLUMN_main {
                /* leftColumn_main has a distinct width value */
            	width: 215px;
                /* Background image */
                background-image: url(../images/RoundedCornersLeftColumn.png);
            	background-position: 0% 0%;
            	background-repeat: no-repeat;
                /* Font stuff */
            }
            
            .leftCOLUMN_content {
                /* leftColumn_content has a distinct width value */
            	width: 62%;
                /* Background image */
                background-image: url(../images/tl.jpg);
            	background-position: 0% 0%;
            	background-repeat: no-repeat;
            }
            
            .rightCOLUMN_main,
            .rightCOLUMN_content {
            	padding-bottom:15px;
            	float: right;
            	font-size: 12px;
            	background-color: #fff;
            }
            
            .rightCOLUMN_main {
                /* rightColumn_main has distinct padding-top and width values */
            	padding-top:15px;
            	width: 180px;
                word-spacing: .05em;
                line-height: 130%;
            }
            
            .rightCOLUMN_content {
                /* rightColumn_content has distinct padding-top and width values */
            	padding-top:17px;
            	width: 20%;
            }



/*
----------SPECIAL FORMATTING RULES FOR SOME ELEMENTS IN CONTAINERS----------
*/

.header_main h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 12px;
	line-height: 130%;
	color: gray;
	text-align: right;
	padding-top: 15px;
	padding-right: 20px;
}

.leftCOLUMN_content hr {
	margin-left:auto;
	margin-right:auto;
	width:95%;
	border: .5px solid gray;
	display: none;
}

.leftCOLUMN_content li {
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 0px;
	padding-right: 0px;
	margin:0em;
	list-style-type:none;
	display:block;
	width:240px;
	text-align: left;
	font-size:0.9em;
}

.leftCOLUMN_content h3 {
	padding-top: 8px !important;
	padding-bottom: 0px !important;
    text-transform:lowercase;
    letter-spacing: .4em;
    word-spacing: .06em;
}

.leftCOLUMN_main p {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	line-height: 165%;
}

.leftCOLUMN_content p {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	line-height: 165%;
}

.leftCOLUMN_main p#triangleBKG {
     /*
     background-image: url(../images/triangle_bkg.png);
     background-position: 0% 0%;
     background-repeat: no-repeat;
     */
     padding-left:0px;
}

.rightCOLUMN_main p#bb_bkg {
     background-image: url(../images/blackboard_bkgrd.png);
     background-position: 0% 0%;
     background-repeat: no-repeat;
     padding-top:6px;
     padding-right:9px;
     padding-bottom:10px;
     padding-left:9px;
     color:#C0C0C0!important;
}



/*
----------ROUNDED CORNER RULES----------
*/

/*
Used on every page in top left corner of left column. Slate black
background color merges into iPad image.
*/

.tl_jpg {
	background-image: url(../images/tl.jpg);
	background-position: 0% 0%;
	background-repeat: no-repeat;
}

/*
Used only on login_schema.html page.
*/

.tl_bkg_color { /* Top left corner: #E6E6D2 content color with #fff bkg color
                   that merges into white background of parent block  */
	background-image: url(../images/tl_bkg_color.gif);
	background-position: 0% 0%;
	background-repeat: no-repeat;
}

.tl_white { /* Top left corner: #fff content color with #E6E6D2 bkg color
               that merges into #E6E6D2 background of parent block  */
	background-image: url(../images/tl_white.jpg);
	background-position: 0% 0%;
	background-repeat: no-repeat;
}

.tr_bkg_color { /* Top right corner: #E6E6D2 content color with #fff bkg color
                   that merges into white background of parent block  */
	background-image: url(../images/tr_bkg_color.jpg);
	background-position: 100% 0%;
	background-repeat: no-repeat;
}

.tr_white { /* Top right corner: #fff content color with #E6E6D2 bkg color
               that merges into #E6E6D2 background of parent block  */
	background-image: url(../images/tr_white.jpg);
	background-position: 100% 0%;
	background-repeat: no-repeat;
}

.br_bkg_color { /* Bottom right corner: #E6E6D2 content color with #fff bkg color
                   that merges into white background of parent block  */
	background-image: url(../images/br_bkg_color.jpg);
	background-position: 100% 100% !important;
	background-repeat: no-repeat;
}

.br_white { /* Bottom right corner: #fff content color with #E6E6D2 bkg color
               that merges into #E6E6D2 background of parent block  */
	background-image: url(../images/br_white.jpg);
	background-position: 100% 100% !important;
	background-repeat: no-repeat;
}

.bl_bkg_color { /* Bottom left corner: #E6E6D2 content color with #fff bkg color
                   that merges into white background of parent block  */
	background-image: url(../images/bl_bkg_color.jpg);
	background-position: 0% 100%;
	background-repeat: no-repeat;
}

.bl_white { /* Bottom left corner: #fff content color with #E6E6D2 bkg color
               that merges into #E6E6D2 background of parent block  */
	background-image: url(../images/bl_white.jpg);
	background-position: 0% 100%;
	background-repeat: no-repeat;
}

/*
----------GENERAL FORMATTING RULES----------
*/

.menuTEXT_black {
	margin-left: 24px;
	color:  #3F3F3F;
	font-size: 12px;
	padding-top: 26px;
}

.menuTEXT {
	color: gray;
	margin-left: 24px;
	font-size: 12px;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 18px;
	line-height: 130%;
	color: gray;
	text-align: right;
	padding-top: 15px;
	padding-right: 80px;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 14px;
	line-height: 130%;
	text-align: left;
	color: gray;
}

.paddingTop15px {
	padding-top: 15px;
}

.paddingTop20px {
	padding-top: 20px;
}

.paddingTop50px {
	padding-top: 20px;
}

.cellVerticalAlignTop {
	vertical-align: top;
}

.centerThis {
	text-align: center;
}

.right {
	float:right;
	clear:both;
}

.floatIMG {
	float: left;
}

.marginLEFT {
	margin-left: 15px;
	margin-top: 15px;
}

.removeMARGINS_TB {
	margin-top: 0em;
	margin-bottom: 0em;
}

.removeMARGINS_T {
	margin-top: 0em;
}

.removeMARGINS_B {
	margin-bottom: 0em;
}

.removePADDING_T {
	padding-top: 0em !important;
}

#paddingTop_About {  /* Creates space between bottom of last photo and check CSS/HTML on About page */
	padding-top: 10px;
}

.centerAndRemoveBottom {
	text-align: center;
	padding-bottom: 0px;
}

#myVisionFont {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 13px;
}

.font11px {
	font-size: 11px !important;
}

.color_red {
	color:red;
}

.emphasizeTHIS {  /* Equivalent to the HTML <strong> tag */
	font-weight: 600 !important;
}

#paddingRight3px {
	padding-right: 3px;
}

#thankyouJami {
	font-size: 11px;
	padding-bottom: 15px;
	padding-right: 40px;
}

#boston8_padding {
	padding-right: 25px;
}



/*
----------BORDER FORMATTING RULE----------
*/

#borderMyOwnModel {
	border-color: gray;
	border-style:solid;
	border-width: 1px;
	width: 90%;
	margin: auto;
	text-align:center;
}

#borderMyOwnModel100percent {
	border-color: gray;
	border-style:solid;
	border-width: 1px;
	width: 100%;
	margin: auto;
	text-align:center;
}

#webinarLink {
	font-size:12px;
	font-weight: bold;
	color:gray;
}



/*
----------IMAGE FORMATTING RULES----------
*/

#img_Karen {    /* On About page */
	margin-left: -.45em;
	padding-top:15px;
	padding-bottom:0px;
	padding-right: 20px;
}

#img_Fran {    /* On About page */
	float:left;
	margin-left: -5.7em;
	padding-top:12px;
	padding-right:12px;
	padding-bottom:12px;
}

#img_Chance {   /* On About page */
	float:left;
	margin-left: -5.6em;
	padding-top:12px;
	padding-right:12px;
	padding-bottom:5px;
}

#img_LoginSlide {    /* On BbWorld 2010 page */
	margin-left: -4.01em;
	/* To center:
	margin-left: -.38em;
	*/
	padding-top:15px;
	padding-bottom:25px;
}

#img_FacultySlide {   /* On BbWorld 2010 page */
	margin-left: -4.01em;
	/* To center:
	margin-left: -.38em;
	*/
	padding-top:15px;
	padding-bottom:25px;
}

#img_7Things {   /* On BbWorld 2010 page */
	/* To float to the left:
	margin-left: -5.41em;
	*/    
	margin-right: 9em;
	padding-top:30px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom:30px;
}

#img_Boston {   /* On CTP page */

	margin-left: -3.90em;
	padding-top:10px;
	padding-right:56px;
	padding-bottom:20px;
}

#img_OurInstructor {   /* On CTP page */
	margin-left: -.29em;
	padding-top:20px;
	padding-right:13px;
	padding-bottom:20px;
}

#img_Boston8 {   /* On CTP page */
	margin-left: -5.0em;
	padding-top:10px;
	padding-right:13px;
	padding-bottom:10px;
}

#img_TxtFontOption {   /* On Customizing page */
	margin-left: -3.5em;
	padding-top:20px;
	padding-bottom:15px;
}

#img_OpenForEditing {   /* On Customizing page */
	margin-left: -7.8em;
	padding-top:20px;
	padding-bottom:15px;
}

#img_DisplayedFontNames {   /* On Customizing page */
	margin-left: -8.5em;
	padding-top:20px;
	padding-bottom:15px;
}

#img_UnderlyingFontNames {   /* On Customizing page */
	margin-left: -7.5em;
	padding-top:20px;
	padding-bottom:15px;
}

#img_BbWorld08Presentation {   /* On Events page */
	margin-left: -5.78em;
	padding-top:10px;
	padding-right:42px;
	padding-bottom:20px;
}

#img_TBUG_sm2 {   /* On Vision page */
	margin-left: -5.7em;
	padding-top:4px;
	padding-right:44px;
	padding-bottom:15px;
}

#img_TBUG_sm {   /* On Vision page */
	float:left;
	margin-left: -5.7em;
	padding-top:10px;
	padding-right:15px;
	padding-bottom:10px;
}



/*
----------LIGHTBOX RULES----------
*/

#lightbox {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}

#lightbox img {
	width: auto;
	height: auto;
}

#lightbox a img {
	border: none;
}

#outerImageContainer {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}

#imageContainer {
	padding: 10px;
}

#loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}

#hoverNav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}

#imageContainer>#hoverNav {
	left: 0;
}

#hoverNav a {
	outline: none;
}

#prevLink, #nextLink {
	width: 49%;
	height: 100%;
	background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
	display: block;
}

#prevLink {
	left: 0;
	float: left;
}

#nextLink {
	right: 0;
	float: right;
}

#prevLink:hover, #prevLink:visited:hover {
	background: url(../images/lightbox/prevlabel.gif) left 15% no-repeat;
}

#nextLink:hover, #nextLink:visited:hover {
	background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat;
}

#imageDataContainer {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
}

#imageData {
	padding:0 10px;
	color: #666;
}

#imageData #imageDetails {
	width: 70%;
	float: left;
	text-align: left;
}

#imageData #caption {
	font-weight: bold;
}

#imageData #numberDisplay {
	display: block;
	clear: left;
	padding-bottom: 1.0em;
}

#imageData #bottomNavClose {
	width: 66px;
	float: right;
	padding-bottom: 0.7em;
	outline: none;
}

#overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
}


