/*The font is set site-wide, but not for size, and can be over-ridden*/
body {
	margin: 0px;
	font-family: Verdana, Geneva, sans-serif;
	color: #333333;
	background-color: #F0F0F0;
}
#ctrlUpdPanel {
    margin-left: 10px;
}
.video-content {
	background-color: #282727;
	width: 100%;
	text-align: center;
	height: 480px;
}
/* This is outmost box which contains ALL other structural divs */
#wrapper, .wrapper {
	width: 960px;
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	background-color: #fff
}

.circle {
    border-radius: 30%;
    padding: 1px;
    border: 1px solid #f7d4d4;
    margin-top: 10px;
    margin: 1px;
    margin-left: 1px;
    background: #fff;
    color: #900;
    text-align: center;
    font: 12px Arial, sans-serif;
}

a:link.circle, a:visited.circle {
    border-radius: 30%;
    padding: 1px;
    border: 1px solid #f7d4d4;
    margin-top: 10px;
    margin: 1px;
    margin-left: 1px;
    background: #fff;
    color: #900;
    text-align: center;
    font: 12px Arial, sans-serif;
    text-decoration: none;
}
.dot-out {
    font: 7px Arial, sans-serif;
}
a:link.circle.selected, a:visited.circle.selected {
    background: #f7d4d4;
}
.slideshow-container {
    padding-top: 10px;
    max-width: 800px;
    /* The rule below is implemented in most browsers by now */
    user-select: none;
    /* If you want to implement it in very old browser-versions */
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */ 
}
.slideshow-container table {
    width: 100%;
}

a#m_btnPrev {
    font-size: xx-large;
    cursor: pointer;
    color: #900;
    text-decoration: none;
}
a#m_btnNext {
    font-size: xx-large;
    cursor: pointer;
    color: #900;
    text-decoration: none;
}
a#img-anchor  {
    text-decoration: none;
    
}
.slideshow-arrows a:link  {
    font-size: xx-large;
    cursor: pointer;
    color: #900;
    text-decoration: none;
}
.slideshow-arrows {
    font-size: xx-large;
    cursor: pointer;
    color: #900;
    text-decoration: none;
} 
.image-location {
    font: 15px Arial, sans-serif;
}
.image-container {
    display: flex; 
    justify-content:center;
}
.image-frame {
    max-width: 300px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-holder { 
    width: 100%;
    height: 300px;
    padding-bottom: 5px;
    display: flex;
    justify-content:center;
}
.image-holder img {
    max-width: 300px;
    height: auto;
}
.mySlideCaption {
    padding-bottom: 15px;
    text-align:center;
}
#m_panelCapt {
    height: 41px;
}
#m_panelSlideshowNav {
    padding-bottom: 20px;
}
/* Structural div for the top of all pages, this is set to relative so that
divs inside it can be positioned by absolute location */
#header, .header {
    width: 960px;
    position: relative;
    background-color: white;
    background-repeat: repeat-y;
    background-position: left top;
}
.purchase-header{
	width: 100%;
	position: relative;
	background-color: white;
	background-repeat:repeat-y;
	background-position: left top;
}
/* main logo is floated left (could be changed to absolute positioning) */
#logo {
	float: left;
	width: 372px;
	height: 119px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 50px;
}

/* the container div for the signup and login buttons  */
#header-buttons {
	position: absolute;
	width: 200px;
	left: 726px;
	top: 6px;
	z-index: 7;
}

/* the container div for the smaller right side logo, which only appears in channel pages */
#channel-page-cg-logo {
	position: absolute;
	width: 200px;
	left: 726px;
	top: 42px;
	z-index: 9;
}

/* the phrase that goes inside the channel logo
This will tend to change a bit for each channel */
#header-phrase {
	width: 300px;
	position: absolute;
	left: 173px;
	top: 83px;
	z-index: 5;
	font-size: 11px;
	color: #175877;
}

/* This is the div for the topnav. If there is NO topnav the header should simply
shrink down to take up the space. */
#topnav {
	clear: both;
	float: left;
	width: 870px;
	margin-left: 50px;
	padding-bottom: 8px;
	margin-top: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #6F66B4;
}

/* This reminds browsers not to use default settings for the topnav UL, which is made
from a UL */
#topnav ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

/* This reminds browsers not to use default settings for the topnav LIs, which are
the holders for topnav links*/
#topnav ul li {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	float: left;
}

/* the general font size and style for topnav links inside LIs */
#topnav ul li a {
	font-size: 14px;
	line-height: 13px;
	color: #333;
	padding-right: 30px;
	padding-left: 0px;
	text-decoration: none;
	display: block;
}

/* The four pseudo classes JUST change the top nav colors */

#topnav li a:link {
	color: #333;
	}
#topnav li a:visited {
	color: #333;
}
#topnav li a:hover {
	color: #185B7C;
}
#topnav li a:active {
	color: #990000;
}

/* Not used. makes the top nav red to show it is current. Bold used instead of this */
#topnav ul li a.open {
	color: #900;
}

/* the weird hack that makes up for serious flaws in the CSS layout religious experience */
.clearfix {
	clear: both;
	display: block;
}

/* These are the general links colors  */
a:link {
	color: #333333;
	text-decoration: underline;
}
a:visited {
	color: black;
	text-decoration: underline;
}
a:hover {
	color: black;
	text-decoration: underline;
}
a:active {
	color: #336699;
	text-decoration: underline;
}

/* This is the DIV that contains all the main content.
This comes after the header.
Inside this DIV can go

#center, #left-col, #right  OR (three columns)
#centerwide-col , #right OR (two columns w right col)
#centerwide-col , #left-col OR (two columns w left col)
#centerfull-col  (one bigass column)
 */

#content,
.content {
	clear: both;
	background-color: white;
}

/* this is the DIV that contains the left column, normally containing
the left navigation */
#left-col {
	float: left;
	width: 180px;
	padding-left: 30px;
	padding-top: 60px;
	padding-bottom: 30px;
}

/* tells the left side UL how to behave */
#left-col ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

/* tells the left side LIs how to behave */
#left-col li {
	list-style-type: none;
	padding: 0px;
	margin-top: 8px;
	margin-right: 0px;
	margin-bottom: 18px;
	margin-left: 0px;
	padding-left: 20px;
}

/* look of the links in the left nav LIs */
#left-col li a {
	list-style-type: none;
	font-size: 13px;
	line-height: 15px;
	color: #900;
    text-decoration: none;
	display: block;
	text-transform: none;
}

/* colors for left nav links */
#left-col li a:link {
	color: #4A498E;
}
#left-col li a:visited {
	color: #4A498E;
}
#left-col li a:hover {
	color: #000000;
}
#left-col li a:active {
	color: #990000;
}

/* tells the left side LI that is OPEN to show a bullet on the left */
#left-col li.open {
	list-style-type: none;
	padding: 0px;
	margin-top: 8px;
	margin-right: 0px;
	margin-bottom: 18px;
	margin-left: 0px;
	padding-left: 20px;
	background-image: url(images/bullet.gif);
	background-repeat: no-repeat;
	background-position: left 3px;
}

/* tells the left side a inside the LI that is OPEN to be black and NOT to
show the finger upon cursor rollover */
#left-col ul li.open a {
	cursor: default;
	color: #900;
}

/* style to put a label above the left sidenav */
.side-nav-label {
	font-size: 13px;
	line-height: 16px;
	font-weight: bold;
	color: #7E7E7E;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-top-color: #900;
}

/* styles the p inside the left div */
#left-col p {
	font-size: 13px;
	line-height: 16px;
	color: #4A498E;
	margin-top: 3px;
	margin-bottom: 7px;
	padding-right: 5px;
	padding-left: 5px;
}

/* sets the width of the center, WHEN it is  part of a THREE column setup */
#center-col {
	float: left;
	width: 450px;
	padding-top: 30px;
	padding-left: 30px;
	padding-bottom: 30px;
}

/* sets the width of the center, WHEN it is  part of a TWO column setup */
#centerwide-col {
	float: left;
	width: 630px;
	padding-top: 30px;
	padding-left: 50px;
	padding-bottom: 30px;
	margin-right: 20px;
}

/* sets the width of the center, WHEN it is  part of a ONE column setup */
#centerfull-col {
    float: left;
    padding-top: 30px;
    padding-left: 50px;
    padding-bottom: 30px;
    margin-right: 20px;
    /*width: 870px;*/
}

/* tells the H1s how to behave */
#center-col h1, #centerwide-col h1, #centerfull-col h1 {
	font-size: 18px;
	line-height: 20px;
	color: #900;
	padding: 3px;
	margin-top: 0px;
	margin-bottom: 8px;
}

/* tells the H2s how to behave */
#center-col h2, #centerwide-col  h2, #centerfull-col  h2 {
	font-size: 14px;
	line-height: 16px;
	font-weight: bold;
	color: #900;
	padding: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#center-col .contribution h2, #centerwide-col .contribution h2, #centerfull-col .contribution h2 {
	font-size: 16px;
	line-height: 16px;
	font-weight: bold;
	color: #900;
	padding: 0px;
	margin-top: 10px;
	margin-bottom: 5px;
}

/* styles all H3 for all three types of content div */
#center-col h3, #centerwide-col  h3, #centerful-coll h3  {
	color: #900;
	margin-bottom: 8px;
	padding-bottom: 5px;
	font-size: 14px;
	font-weight: normal;
}

/* general purpose styles for all paragraphs
The margin settings are important for the look of the page */
#center-col p, #centerwide-col  p, #centerfull-col  p   {
	font-size: 14px;
	line-height: 18px;
	color: #333;
	margin-top: 4px;
	margin-bottom: 12px;
}

/* styles all horiz rules for all three types of content div */
#center-col hr, #centerwide-col hr, #centerfull-col  hr{
	margin-top: 12px;
	border-top-style: dotted;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding-top: 5px;
	height: 5px;
	border-top-width: 1px;
	border-top-color: #74A41B;
}

/* style for name of the partner */
#center-col .partner, #centerwide-col  .partner, #centerfull-col  .partner{
	font-size: 16px;
	line-height: 16px;
	font-weight: bold;
	color: #900;
	display: block;
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
}

/* style for name of the product
contains the round ball as a background item */
#center-col .product, #centerwide-col  .product, #centerfull-col  .product {
	font-size: 20px;
	line-height: 20px;
	font-weight: normal;
	color: #4A498E;
	display: block;
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
	background-image: url(images/ball-blue.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	padding-left: 25px;
}

/* creates a box with borders for list of contributions to a channel */
#center .contrib-list, #centerwide-col  .contrib-list, #centerfull-col  .contrib-list {
	font-size: 16px;
	line-height: 16px;
	font-weight: bold;
	color: #666;
	display: block;
	margin-bottom: 20px;
	padding-bottom: 5px;
	margin-top: 20px;
	padding-top: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
}

/* floats an image right, adds space around it on 3 sides */
.image-right {
	float: right;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 20px;
}

/* floats an image left, adds space around it on 3 sides */
.image-left {
	float: left;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-left: 0px;
}

#center-col .contribution .image-left, #centerwide-col .contribution .image-left,
  #centerfull-col .contribution .image-left {
	float: left;
	padding-top: 10px;
	padding-right: 25px;
	padding-bottom: 10px;
	padding-left: 0px;
}

/* this is the right column container div */
#right-col {
	float: left;
	width: 200px;
	margin-left: 30px;
	margin-top: 60px;
}

/* styles the p inside the right div */
#right-col p {
	font-size: 12px;
	line-height: 15px;
	color: #4A498E;
	margin-top: 3px;
	margin-bottom: 7px;
	padding-right: 8px;
	padding-left: 12px;
}

/* style for line of text that describes the partner */
.partner-descriptor {
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	color: #666;
	display: block;
	margin-bottom: 10px;
}

/* Links to outside web site of partner-descriptor */
.partner-descriptor a:link {
	color: #B1001F;
	text-decoration: underline;
}
.partner-descriptor a:visited {
	color: #666666;
	text-decoration: underline;
}
.partner-descriptor a:hover {
	color: #000000;
	text-decoration: underline;
}
.partner-descriptor a:active {
	color: #990000;
	text-decoration: underline;
}

/* style for a short phrase that describes the product */
.product-descriptor {
	font-size: 12px;
	line-height: 13px;
	font-weight: bold;
	color: #666;
	display: block;
	margin-bottom: 10px;
}

/* style for text that describes the product IN MORE DETAIL */
.product-description {
	font-size: 16px;
	line-height: 16px;
	font-weight: bold;
	color: #000;
	display: block;
	margin-bottom: 4px;
	margin-top: 14px;
}

/* forms a box around each product on a product list page */
.product-box {
	padding: 10px;
	float: right;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 20px;
	border: 1px dotted #999;
	width: 240px;
}

/* tells content (non-navigation) UL how to behave */
#center-col ul , #centerwide-col  ul, #centerfull-col  ul {
font-size: 14px;
	line-height: 18px;
	color: #333;
	list-style-type: square;
	list-style-position:outside;
	padding: 0px;
	margin-top: 7px;
	margin-right: 0px;
	margin-bottom: 12px;
	margin-left: 16px;
}

/* tells content OL how to behave */
#center-col ol, #centerwide-col ol, #centerfull-col  ol {
	font-size: 14px;
	line-height: 18px;
	color: #333;
	list-style-type: decimal;
	list-style-position:inside;
	padding: 0px;
	margin-top: 7px;
	margin-right: 0px;
	margin-bottom: 12px;
	margin-left: 16px;
}

/* tells a LI INSIDE a UL how to behave */
#center-col ul li, #centerwide-col ul li, #centerfull-col ul li {
	margin-top: 3px;
	margin-bottom: 7px;
	margin-left: 0px;
	list-style-type: square;
}

/* tells a LI INSIDE a OL how to behave */
#center-col ol li, #centerwide-col ol li, #centerfull-col ol li {
	margin-top: 3px;
	margin-bottom: 7px;
	margin-left: 0px;
	list-style-type: decimal;
}

/* tells UL LI INSIDE a UL LI how to behave */
#center-col ul li ul li, #centerwide-col ul li ul li, #centerfull-col ul li ul li {
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 0px;
	list-style-type: disc;
}

/* tells OL LI INSIDE a OL LI how to behave */
#center-col ol li ol li, #centerwide-col ol li ol li, #centerfull-col ol li ol li {
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 0px;
	list-style-type: decimal;
}

/* tells UL LI INSIDE a OL LI how to behave */
#center-col ol li ul li, #centerwide-col  ol li ul li, #centerfull-col  ol li ul li   {
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 0px;
	list-style-type: disc;
}

/* tells OL LI INSIDE a OL LI how to behave */
#center-col ul  li ol li, #centerwide-col  ul li ol li, #centerfull-col  ul li ol li {
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 0px;
	list-style-type: decimal;
}

/* tells P inside product box how to behave */
#center-col .product-box p, #centerwide-col  .product-box p, #centerfull-col  .product-box p {
	font-size: 12px;
	line-height: 14px;
	color: #333;
	display: block;
	float: left;
}

/* styles a channel inside .contribution */
#center-col .contribution .channel,  #centerwide-col  .contribution .channel,  #centerfull-col  .contribution .channel,   {
	font-weight: bold;
	color: #666;
	font-size: 12px;
	margin-bottom: 10px;
	margin-top: 3px;
}

/* styles a contribution with borders and spacing
used in a list of contributions to a channel */
/*.contribution {
	margin-top: 8px;
	margin-bottom: 5px;
	padding-top: 10px;
	padding-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #4A498E;
}*/

/* third and final structural block that fall under the #content DIV */
/*#footer {
	clear: both;
	float: left;
	width: 960px;
	padding-top: 12px;
	margin-bottom: 20px;
	padding-bottom: 20px;
}*/

/* floats the copyright statement on the right side of footer  */
/*#copyright {
	font-size: 12px;
	line-height: 12px;
	color: #666;
	float: right;
}*/

/* tells the UL how to behave in the footer nav */
/*#footer ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}*/

/* tells the LIs how to behave in the footer nav */
/*#footer li {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	float: left;
	padding-right: 30px;
}*/

/* tells the links inside the LIs how to behave in the footer nav */
/*#footer li a {
	font-size: 13px;
	line-height: 14px;
	color: black;
	padding-left: 0px;
	text-decoration: none;
	display: block;
}*/

/* just changes the colors of the footer links */
/*#footer li a:link {
	color: black;
}
#footer li a:visited {
	color: black;
}
#footer li a:hover {
	color: #185B7C;
}
#footer li a:active {
	color: #990000;
}*/

/* Ajax dialog box */
.ui-dialog
{
    position: relative;
    padding: .2em;
    overflow: visible;
    padding: 3px;
    border-width:3px;
    width:450px;
    max-width: 900px;
    height:400px;
    background-color:lightgrey;
    border-style:solid;
    border-color:Gray;
}
.ui-dialog {
    clear: both;
    position: absolute;
    overflow: hidden;
}

.ui-dialog-titlebar
{
    background-color:#DDDDDD;
    border:solid 1px Gray;
    color:Black;
    text-align:center;
    font-family: arial,sans-serif;
    font-size: 18px;
    font-weight: bold;
    cursor: move;
    display: block;
    padding: 16px;
}

.ui-dialog-titlebar-close
{
    display:none;
}

.ui-widget-content {
	background-color: #EEEEEE;
    color: black;
}

.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }

.ui-widget-overlay
{
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
    top: 0px;
    left: 0px;
    width:100%;
    height:100%;
    z-index:10001;
    position:fixed;
}