/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
    Stylesheet for controls used with desktop interface: Asp.Net controls, jQuery mobile 
    controls, and HTML controls. 
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */

/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
HTML controls 
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */

/*  Anchor button (implemented as an anchor within a div element). See, for example, the "View
    Desktop Version" button used in the footer of mobile pages */
a.Button1BGC38c { width:65%; background-color:#38c; cursor:pointer; 
    text-align:center; text-decoration:none; padding:5px 15px; font-size:.8em; font-weight:normal; 
    font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif; 
    border-radius: 10px; color:#fff; border-style:none; text-shadow: none;}
a.Button1BGC38c:visited{color: #fff;  text-shadow: none; }
a.Button1BGC38c:hover{text-decoration: none; color: #fff; background-color:#3469e8; text-shadow: none;}

div.Button1BGC38c{text-align:center; margin: 20px 0px; text-shadow: none;}


/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Asp.Net controls 
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */

/* Textbox styles (designed to be similar to jQuery mobile style) */
.JQTextBox {
    width: 90%; height: 1.8em;
    text-align: center;
    font-weight: normal;
    font-size: 1.2em;
    color: #000;
    text-shadow: none;
    font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif;
    border: solid 2px #ddd;
    border-radius: 5px;
}

/* This style is for a Asp:button inside a Div parent container. It generates a button that is 
    centered on the page and has a width of 50%. */
div.CenterButton {text-align:center; margin: 20px auto 20px auto; text-shadow: none; width:50%;}

.CenterButton {width:100%; background-color:#38c; cursor:pointer; 
    text-align:center; padding:5px 15px; font-size:1.3em; font-weight:normal; 
    font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif; 
    border-radius: 10px; color:#fff; border-style:none; }

/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
jQuery controls 
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */

/* Collapsible Headers: Prevent truncating of button titles on collapsible headers in jQuery mobile
    Source: http://stackoverflow.com/questions/21830335/jqm-long-collapsible-headers-trucated */
.ui-collapsible-heading-toggle {
    white-space: normal;
}

/* Prevent header truncating
   Source: http://stackoverflow.com/questions/14620482/jquery-mobile-header-cut-off */
.ui-title {margin: 0.0em 1% 0.0em 1% !important; font-weight:bold;}

/* '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Collapsible content: This CSS works with /js/collapse.js to produce collapsible buttons.
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */
/* Style button content */
h2.CollapsibleHeading {font-size:1.1em; font-weight:normal; text-shadow: none;  
    font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif; 
    border-radius: 5px; border:1px solid #777;    
	padding: 10px 10px 5px 35px; cursor: pointer;
    color:#000; background: url(/images/open.png)  no-repeat 10px 11px;  
    background-color:#eee;    
}

h2.Close{background: url(/images/close.png) no-repeat 10px 11px; background-color:#eee;}