/*
 * Main CSS
 */
 
 
 
 h1 {
	margin: 0px 0px 10px 0px;
	padding: px;
	font: 14px/14px  verdana, sans-serif, arial;
	font-weight: bold;
	
	color : #000000;
}

h2 
{
	margin: 0px 0px 10px 0px;
	padding: px;
	font-size : 12px;
	font-weight : bold;
	color : #13573c;
}

h3 
{
	/* NO! */
	/* margin: 0px 0px 10px 175px; */
	margin: 0px 0px 0px 0px;
	padding: px;
	font-size : 11px;
	font-weight : bold;
	color : #13573c;
}

h4 {
	font-size : 10px;
	font-weight : bold;
	color : #13573c;
}



/* needed to combat IE stupidity when placing links over transparent png's*/
*.a { position:relative; } 


/*fixed p tag margin error */
/* NO! */
/*
p { margin-left: 185px; 
    clear: right;
}
*/

/*fixed ul tag margin error */
/* NO! */
/*
ul 
{
	margin-left: 185px; 
    clear: right;
}
*/

/* 
 * Automatic icon - Offsite link
 */

/*
a[target=NewWindow]:link, 
a[target=NewWindow]:visited,
a[target=_blank]:link, 
a[target=_blank]:visited
 {
	padding-right: 15px;
	background: url('images/offsite.gif') no-repeat center right;
}*/



/*
 * Automatic icon - PDF link
 */

/*
a[href$='.pdf'] {
	padding-right: 22px;
	padding-top: 2px;
	background: transparent url('images/acrobat/pdficon_small.gif') no-repeat center right;
}*/


a[href$='.ppt'] {
	padding-right: 22px;
	padding-top: 2px;
	background: transparent url('images/powerp.gif') no-repeat center right;
}

a[href$='.pptx'] {
	padding-right: 22px;
	padding-top: 2px;
	background: transparent url('images/powerp.gif') no-repeat center right;
}





/*
 * Wrappers and Headers
 */



 #news_header_wrapper {
	/*width: auto;*/ 
	margin-left: auto;
	height: 36px;

	background-image: url('images/news.jpg');
	background-color: White;
	/*background-position: top left;*/
	background-repeat: no-repeat;
} 
 



 #business_header_wrapper {
	/*width: auto;*/ 
	margin-left: auto;
	height: 36px;

	background-image: url('images/business.jpg');
	background-color: Black;
	/*background-position: top left;*/
	background-repeat: no-repeat;
} 
 
 
 #dean_header_wrapper {
	/*width: auto;*/ 
	margin-left: auto;
	height: 36px;

	background-image: url('images/dean.jpg');
	background-color: Black;
	/*background-position: top left;*/
	background-repeat: no-repeat;
}

 #development_header_wrapper {
	/*width: auto;*/ 
	margin-left: auto;
	height: 36px;

	background-image: url('images/development.jpg');
	background-color: Black;
	/*background-position: top left;*/
	background-repeat: no-repeat;
}

 #fdevelopment_header_wrapper {
	/*width: auto;*/ 
	margin-left: auto;
	height: 36px;

	background-image: url('images/fdevelopment.jpg');
	background-color: Black;
	/*background-position: top left;*/
	background-repeat: no-repeat;
}

 #hr_header_wrapper {
	/*width: auto;*/ 
	margin-left: auto;
	height: 36px;

	background-image: url('images/hr.jpg');
	background-color: Black;
	/*background-position: top left;*/
	background-repeat: no-repeat;
}

#research_header_wrapper {
	/*width: auto;*/ 
	margin-left: auto;
	height: 36px;

	background-image: url('images/research.jpg');
	background-color: Black;
	/*background-position: top left;*/
	background-repeat: no-repeat;
}

#gus_header_wrapper {
	/*width: auto;*/ 
	margin-left: auto;
	height: 36px;

	background-image: url('images/gus.jpg');
	background-color: Black;
	/*background-position: top left;*/
	background-repeat: no-repeat;
}

#health_professions_header_wrapper {
	/*width: auto;*/ 
	margin-left: auto;
	height: 36px;

	background-image: url('images/health_professions.jpg');
	background-color: Black;
	/*background-position: top left;*/
	background-repeat: no-repeat;
}

#facilities_header_wrapper {
	width: 100%; 
	height: 30px;
	
	background-image: url('images/1208.gif');
	background-position: top left;
	background-repeat: repeat-y;
	background-color: White;
}


#tpl_wrapperBackground 
{
	/* background-image: url('images/usf_gradient.gif'); */
	/* background-image: url('images/gradient.jpg'); */
	/*background-image: url('images/lite_gradient.gif');*/
	background-position: top;
	background-repeat: repeat-x;
	/* background-color: #00573c; 
	background-color: #beb39d;*/
	/*background-color: #FFF;*/
	
background: rgb(248,248,248); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(248,248,248,1) 0%, rgba(248,248,248,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,248,248,1)), color-stop(100%,rgba(248,248,248,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(248,248,248,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(248,248,248,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(248,248,248,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(248,248,248,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */

	
}

#tpl_wrapper_1 
{
	/* fixed width, centered */
	width: 974px;
	margin-left: auto;
	margin-right: auto;
	
	padding: 0px;
	color: #000000;

	border-left: solid 1px #A3BCCF;
	border-right: solid 1px #A3BCCF;

	/* background-color: #ebe4c8; */
	background-color: #FFFFFF;

	background-image: url('images/bg_line_tan.gif');
	background-repeat: repeat-y;
	background-position: 0px top;

}

#tpl_wrapper_2 {
	padding: 0px;
	color: #000000;
}

#tpl_pageBanner {
	padding: 0px;
	background-color: #FFFFFF;
}

#tpl_pageBanner h1 {
	padding: 0px;
	margin: 0px;
	font-size:24px;
	line-height:24px;
	font-weight: normal;
	font-style: italic;
	color: #FFFFFF;
}

#tpl_leftCol 
{
	float: left;
	width: 170px;
	margin: 30px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#tpl_leftCol1 
{
	float: left;
	width: 170px;
	margin: 15px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	
}

#tpl_rightCol 
{
	float: right;
	width: 150px;
	margin: 15px 0px 0px 0px;
	padding: 10px 0px 0px 10px;

	background-color: #ebe4c8;
}

#tpl_contentOneCol {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	height: 1%;
	background-color: #FFFFFF;
}

#tpl_contentTwoCol {
	margin: 0px 0px 0px 170px;
	padding: 10px 10px 10px 10px;
	height: 1%;
	background-color: #FFFFFF;
}

/* \*/
* html #tpl_contentTwoCol {
	overflow: hidden;
	o\verflow: visible;
	width: 100%;
	w\idth: auto;
	he\ight: 1%;
}
/* */

#tpl_contentThreeCol {
	margin: 0px 160px 0px 170px;
	padding: 10px 10px 0px 10px;
	height: 1%;
	background-color: #FFFFFF;
	border-right: solid 1px #CCCC99;
}

/* \*/
* html #tpl_contentThreeCol {
	overflow: hidden;
	o\verflow: visible;
	width: 100%;
	w\idth: auto;
	he\ight: 1%;
}
/* */

/* Hack to allow wrappers to hold floats.
 * needed for the faux-column hack we're using
 */
.clearfix:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}
.clearfix {
  display: inline-block; /* Fixes IE/Mac */
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.cleaner {
	clear:both;
	height:1px;
	font-size:1px;
	border:none;
	margin:0; padding:0;
	background:transparent;
}

/*
 * Misc
 */

p.error {
	color: red;
	font-weight: bold;
}


/*
 * Forms
 */

div.form_wrapper{
	float: left;

	border: 1px solid #D9D9D9;
	padding: 5px 5px 10px 5px;
	margin: 0px 0px 0px 0px;

/*
	background-image: url('images/bg_tan_fade_right.jpg');
	background-position: right top;
	background-repeat: repeat-y;
*/
}

div.form_row {
/*	clear: both; */
	padding-top: 5px;
}

div.form_row label {
	float: left;
	width: 110px;
	text-align: right;
	font: 80%/20px  verdana, sans-serif, arial;
	color: #000000;
}

div.form_row span.input {
	margin-left: 5px;
	float: left;
	text-align: left;
} 
div.form_section h1 {
	font: 80%/20px  verdana, sans-serif, arial;
	margin: 0px 0px 16px 0px;
	padding: 0px 5px 0px 5px;
	background-color: #3d80df;
	color: #FFFFFF;
	font-weight: bold;
/*	border-bottom: 1px solid #666666; */
}

input, textarea, select {
	font-size: 80%;
	font-family: verdana, sans-serif, arial;
/*	font: 80%/20px  verdana, sans-serif, arial; */
	color: #000000;
}

p input, p textarea, p select, td input, td textarea, td select {
	font-size: 100%;
	font-family: verdana, sans-serif, arial;
	color: #000000;
}

/*
 * Images
 */

img.border {
	border: 1px solid #000000;
}

div.image {
 	margin: 0 0 5px 10px;
}
div.image img {
	border: 1px solid #a9a9a9;
	padding: 4px;
	margin: 0;
}
div.image p {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font: 10px/12px  verdana, sans-serif, arial;
	color: #555555;
}

div.img_float_right {
	float: right;
 	margin: 0 0 5px 10px;
 	padding: -1px;
}
div.img_float_right img {
	border: 1px solid #a9a9a9;
	padding: 4px;
	margin: 0;
}
div.img_float_right p {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font: 10px/12px  verdana, sans-serif, arial;
	color: #555555;
}

div.img_float_left {
	float: left;
	margin: 0 10px 5px 0;
}
div.img_float_left img {
	border: 1px solid #a9a9a9;
	padding: 4px;
	margin: 0;
}div.img_float_left p {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font: 10px/12px  verdana, sans-serif, arial;
	color: #555555;
}

div.title_box_wrapper ul {
	margin-top: 0px;
}
div.title_box_wrapper p, div.title_box_wrapper li {
	margin: 8px 0px 8px 0px;
	padding: 0px;
	font: 80%/20px  verdana, sans-serif, arial;
	color: #000000;
}
div.title_box_wrapper a { color : #000000; }
div.title_box_wrapper a:link    { text-decoration: underline; color : blue; }
div.title_box_wrapper a:visited { text-decoration: underline; color : blue; }
div.title_box_wrapper a:hover   { text-decoration : none; color: #000000; background-color : #E7E7CF; }


/*
 * Photo Album
 */

div.photoAlbum_index {
	float: left;
	border: 1px solid #B9B9B9;
	background-color: #EEF4FE;
	height: 150px;
	width: 150px;
	padding: 0px 0px 0px 0px;
	margin: 10px;
}

td.photoAlbum_index {
	border: 1px solid #B9B9B9;
	background-color: #EEF4FE;
	height: 150px;
	width: 150px;
	padding: 0px 0px 0px 0px;
	margin: 10px;
}


/*
 * InfoBox
 */


div.infoBox_wrapper {
	padding: 0px;
	margin: 0px;
/*	border: 1px solid #CCCC99; */
	border: 1px solid #336633;
	background-color: #FFFFFF;
}
div.infoBox_content {
	padding: 0px 10px 0px 10px;
	margin: 0px;
/*	border-top: 1px solid #e9e8d3; */
	border-top: 1px solid #CCCC99;
}


 
 


div.infoBox_headerWrapper {
	font: 80%/20px  verdana, sans-serif, arial;
	font-weight: bold;
	color: #336633;
	background-color: #FFFFFF;
	background-image: url('images/bg_tan_fade_left.jpg');
	background-position: top left;
	background-repeat: repeat-y;
}
div.infoBox_titleLeft {
	padding-left: 5px;

}
div.infoBox_titleRight {
	float: right;
	color: #666666;
	font-weight: normal;
	padding-right: 5px;
}
div.infoBox_wrapper p, div.infoBox_wrapper li {
	margin: 8px 0px 8px 0px;
	padding: 0px;
	font: 80%/20px  verdana, sans-serif, arial;
	color: #000000;
}
div.infoBox_wrapper a { color : #000000; }
div.infoBox_wrapper a:link    { text-decoration: none; color : gray; }
div.infoBox_wrapper a:visited { text-decoration: none; color : gray; }
div.infoBox_wrapper a:hover   { text-decoration : none; color: #000000; background-color : #E7E7CF; }

div.infoBox_wrapper p {
	margin: 8px 0px 8px 0px;
	padding-bottom: 0px;
	font: 80%/20px  verdana, sans-serif, arial;
	color: #000000;
}

.infoBox_wrapper ul {
	margin-top: 0px;
	margin-bottom: 0px;
}

.infoBox_wrapper ul li {
	margin-left: -25px;
	font: 80%/20px  verdana, sans-serif, arial;
	color: #000000;
}

/*
 * Important Links
 *
 * Until this can be tweaked more, justing using p.classes to set styles here
 */

div.infoBox_content p.ImpLinks_heading {
	margin: 5px 0px 0px 0px;
	padding: 0px;
	font: 80%/20px  verdana, sans-serif, arial;
	font-weight: bold;
}
div.infoBox_content p.ImpLinks_item {
	margin: 0px 0px 5px 0px;
	padding: 0px;
	font: 80%/20px  verdana, sans-serif, arial;
	color: #000000;
}

div.importantLinks ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

div.importantLinks ul li {
	font: 12px/25px  verdana, sans-serif, arial;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
}

div.importantLinks ul li a { 
	margin: 0px;
	padding: 0px 0px 0px 0px;
	display: block;
	color: #000000;
	width: 130px;
	font: 11px/16px  verdana, sans-serif, arial;
	font-weight: normal;
	border-bottom: 1px solid #CCCCCC;
	text-decoration: none;
}

div.importantLinks ul li a:hover {
	color: #000000;
	background-color: #E7E7CF;
}


/*
 * Important Announcement
 */

div.announcement {
	padding: 0px 10px 0px 10px;
	margin: 0px 10px 10px 10px;
	border: 1px dashed #336633;
	background-color: #FFFFFF;
	background-image: url('images/bg_tan_fade_left.jpg');
	background-position: top left;
	background-repeat: repeat-y;
}
div.announcement ul {
	margin-top: 0px;
}
div.announcement p, div.announcement li {
	margin: 8px 0px 8px 0px;
	padding: 0px;
	font: 80%/20px  verdana, sans-serif, arial;
	color: #000000;
}
div.announcement a { color : #000000; }
div.announcement a:link    { text-decoration: underline; color : blue; }
div.announcement a:visited { text-decoration: underline; color : blue; }
div.announcement a:hover   { text-decoration : none; color: #000000; background-color : #E7E7CF; }


/*
 * tabular data
 */

table.data {
	border: 1px solid #666666;
}

table.data caption {
	margin: 0px;
	text-align: left;
	padding-bottom: 10px;
	font: 80%/20px  verdana, sans-serif, arial;
	color: #000000;	
}

table.data thead tr th {
	font: 80%/20px  verdana, sans-serif, arial;
	padding: 2px 5px;
	background-color: #3d80df;
	color: #FFFFFF;
	font-weight: bold;
	border-bottom: 1px solid #666666;
}
table.data tbody tr th {
	font: 80%/20px  verdana, sans-serif, arial;
	padding: 3px 8px;
	border-left: 1px solid #D9D9D9;
	border-bottom: 1px solid #B9B9B9;
	background-color: #FFFFFF;
	vertical-align: top;
	text-align: left;
	font-weight: bold;
	color: #3d80df;
}

table.data thead tr th a,  table.data tbody tr th a{
	background-color: #3d80df;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration : none
}
table.data thead tr th a:link, table.data thead tr th a:visited, table.data thead tr th a:hover {
	background-color: #3d80df;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration : none
}
table.data tbody tr th a:link, table.data tbody tr th a:visited, table.data tbody tr th a:hover {
	background-color: #3d80df;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration : none
}

table.data tbody tr td {
	font: 80%/20px  verdana, sans-serif, arial;
	padding: 3px 8px;
	border-left: 1px solid #D9D9D9;
	border-bottom: 1px solid #B9B9B9;
	background-color: #EEF4FE;
	vertical-align: top;
}

table.data tbody tr.odd td {
	font: 80%/20px  verdana, sans-serif, arial;
	padding: 3px 8px;
	border-left: 1px solid #D9D9D9;
	background-color: #FFFFFF;
	vertical-align: top;
}

table.data tbody tr td.count {
	color: #888888;
}

table.data tbody tr td a {
	color: #000000;
}
table.data tbody tr td a:link, table.data tbody tr td a:visited {
	text-decoration: underline;
	color: blue;
}	
table.data tbody tr td a:hover {
	text-decoration: none; 
	color: #000000; 
	background-color: #E7E7CF;
}


/*
 * course schedule
 */

table.courses {
	/*border: 1px solid #666666;*/
	border-collapse: collapse;
	margin-left: 5px;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

table.courses caption {
	margin: 0px;
	text-align: left;
	padding-bottom: 10px;
	font: 80%/20px  verdana, sans-serif, arial;
	color: #000000;	
}

table.courses thead tr th {
	font: 70%/20px  verdana, sans-serif, arial;
	padding: 0px 5px;

	/* green */
	
	background: url('images/table_head_green_grad_mid.gif') repeat-x;
	background-color: #336633;
	

	/* tan */
	/*
	background: url('images/table_head_tan_grad_mid.gif') repeat-x;
	background-color: #CCCC99;
	*/

	/* blue */
	/*
	background: url('images/table_head_blue_grad_mid.gif') repeat-x;
	background-color: #006699;
	*/
	
	color: #FFFFFF;
	font-weight: bold;
	border-left: 1px solid #D9D9D9;
	border-bottom: 1px solid #666666;
}
/*
table.courses tbody tr th {
	font: 70%/20px  verdana, sans-serif, arial;
	padding: 3px 8px;
	border-left: 1px solid #D9D9D9;
	border-bottom: 1px solid #B9B9B9;
	background-color: #FFFFFF;
	vertical-align: top;
	text-align: left;
	font-weight: bold;
	color: #3d80df;
}
*/

table.courses thead tr th a,  table.courses tbody tr th a{
	background-color: #3d80df;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration : none
}
table.courses thead tr th a:link, table.courses thead tr th a:visited, table.courses thead tr th a:hover {
	background-color: #3d80df;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration : none
}
table.courses tbody tr th a:link, table.courses tbody tr th a:visited, table.courses tbody tr th a:hover {
	background-color: #3d80df;

	color: #FFFFFF;
	font-weight: bold;
	text-decoration : none
}

table.courses tbody tr td {
	font: 70%/20px  verdana, sans-serif, arial;
	padding: 3px 8px;
	border-left: 1px solid #D9D9D9;
	border-bottom: 1px solid #B9B9B9;
	vertical-align: top;

	/* green */
	 background-color: #e1e8e1; 

	/* tan */
	/*
	background-color: #f2f2e5;
	*/

	/* blue */
	/*
	background-color: #d9e8f0;*/
}

table.courses tbody tr.odd td {
	font: 70%/20px  verdana, sans-serif, arial;
	padding: 3px 8px;
	border-left: 1px solid #D9D9D9;
	background-color: #FFFFFF;
	vertical-align: top;
}

table.courses tbody tr.blue td {
	font: 70%/20px  verdana, sans-serif, arial;
	padding: 3px 8px;
	border-left: 1px solid #D9D9D9;
	background-color: #d7dde9;
	vertical-align: top;
}

table.courses tbody tr.red td {
	font: 70%/20px  verdana, sans-serif, arial;
	padding: 3px 8px;
	border-left: 1px solid #D9D9D9;
	background-color: #ebc7c8;
	vertical-align: top;
}

table.courses tbody tr.green td {
	font: 70%/20px  verdana, sans-serif, arial;
	padding: 3px 8px;
	border-left: 1px solid #D9D9D9;
	background-color: #cafeef;
	vertical-align: top;
}

table.courses tbody tr.gray td {
	font: 70%/20px  verdana, sans-serif, arial;
	padding: 3px 8px;
	border-left: 1px solid #D9D9D9;
	background-color: #a2a3a3;
	vertical-align: top;
}


table.courses tbody tr td.count {
	color: #888888;
}

table.courses tbody tr td a {
	color: #000000;
}
table.courses tbody tr td a:link, table.courses tbody tr td a:visited {
	text-decoration: underline;
	color: blue;
}	
table.courses tbody tr td a:hover {
	text-decoration: none; 
	color: #000000; 
	background-color: #E7E7CF;
}




/*
 * quotes
 */
div.quote {
	border: 1px dashed #336633;
	padding: 5px 5px 0px 5px;
	background-color: #EEF4FE;
}

/*
 * Image Alpha tricks
 * Some other css for IE 5.5 will be included into the <head> of the html pages
 */

.img-shadow {
	clear: both;
	float:left;
	
	margin: 20px 0 0 17px !important;
	margin: 20px 0 0 8px;
	}

.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px;
  }
.alpha-shadow {
	clear: both;
	float:left;
	
	margin: 14px 0 0 17px !important;
	margin: 14px 0 0 8px;
	}

.alpha-shadow div {
  /* background: url('images/shadow2.png') no-repeat left top !important; */
 
  float: left;
  padding: 0px 6px 6px 0px;
  }

.alpha-shadow img {
  background-color: #fff;
  border: 1px solid #a9a9a9;
  padding: 4px;
  margin: 0;
  }
  
  
  /*
 * Collapsable Panel Styles
 */

.expandPanelHeader 
{
	cursor: pointer; 

	height: 20px;
	padding-top: 0px;
	font: 12px  verdana, sans-serif, arial;
	font-weight : bold;
	color : #336633;
}

.expandPanelContent 
{
	overflow: hidden;
}

div.events {
	font: 80%/20px  verdana, sans-serif, arial;
	font-weight: bold;
	color: #000;
	background-color: #FFFFFF;
	background-image: url('images/events2.jpg');
	background-position: top left;
	background-repeat: repeat-y;
}


/* New Info Box Right */
.ribbon-r{
    
    margin: 15px auto;
    padding: 0 5px 0;
   position: relative;
    float: right;
    color: #444;
    background: #fff;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}


.ribbon-r h3 {
    display: block;
    height: 20px;
    line-height: 1.3;
    width: 208px;
    margin: 0;
    padding: 5px 10px;
    position: relative;
    left: -16px;
    top: 8px;
    color: #cfcfcf;
    text-shadow: 0 1px 1px #111;
    border-top: 1px solid #363636;
    border-bottom: 1px solid #202020;
    background: #333;
    background: linear-gradient(top, #383838 0%, #262626 100%);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    
}


.ribbon-r h3::before,
.ribbon-r h3::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    bottom: -11px;
    z-index: -10;
    border: 5px solid;
    border-color: #242424 transparent transparent transparent; 
       
}
.ribbon-r h3::before {left: 0;}
.ribbon-r h3::after {right: 0;}