/*********************** FORM STYLES *********************/
.formstyle1
{
   font-style: normal;
   font-family: Verdana;
   margin: 0px;
   padding: 0px;
   color: #222;
   border: none;
}

/* Select box fix */
.formstyle1 select.selectFix, .formstyle1 .selectFix select { width: auto !important; }

.formstyle1, .formstyle1 .highlight
{ background: #fff url("../images/gradient_02_1x150.gif") left bottom repeat-x; }

.formstyle1 fieldset
{
   margin: 1px 1px;
   padding: 0px;
   border: outset 2px #B7C7D7;
}

.formstyle1 legend, .formstyle1 .highlight, .formstyle1 big
{
   font-size: 100%;
   font-weight: bold;
   color: #043C75;
}
.formstyle1 legend
{
   margin: 0 !important;
   margin: 0 -7px; /* WIN IE < 7 STYLE */
   padding: 0;
}

.formstyle1 big, .formstyle1 .highlight, .formstyle1 .highlight_alt
{
   display: block;
   margin: 3px;
   padding: 3px;
   background-color: #F3F3F5;
   border: outset 2px;
}
.formstyle1 .highlight { background-position: 0px 0px; }

.formstyle1 ol { margin: 0; padding: 0; }

* html .formstyle1 ol { zoom: 1; }

.formstyle1 li, .formstyle1 .li
{
   display: block;
   clear: both;
   margin: 0;
   padding: 5px;
   list-style: none;
   min-height: 1%;
}

.formstyle1 li.hidden, .formstyle1 .li.hidden { display: none; }

/* IE Height fix */
* html .formstyle1 li { height: 1%; }

/* No padding on element - class */
.formstyle1 .nopad { padding: 0px; }

.formstyle1 li label, .formstyle1 .li label
{
   position: relative;
   float: left;
   margin: 4px 1% 0 0;
   padding: 0;
   width: 24%;
   height: auto;
}

.formstyle1 li > label, .formstyle1 .li > label { display: block; }

/* Handle columns */
.formstyle1 li.multicol
{
   float: left;
   clear: none;
   width: 25%;
}
.formstyle1 li.multicol label { width: 50%; }
.formstyle1 li.multicol input { width: 43%; }

/* First & Second for two columns */
.formstyle1 li.multicol.first { width: 44%; clear: both; }
.formstyle1 li.multicol.first label { width: 55%; }
.formstyle1 li.multicol.first input { width: 40%; }
/* Second (for two columns only) */
.formstyle1 li.multicol.second { width: 52.3%; }
.formstyle1 li.multicol.second label { padding-left: 10%; width: 46%; }
.formstyle1 li.multicol.second input { width: 40%; }

.formstyle1 li.multicol.last { padding-left: 1.1%; }
/* End columns */

/* Handle sub fieldsets */
.formstyle1 fieldset fieldset
{
   background: transparent;
   border: solid 2px #456F99;
   padding: 4px 2px;
   margin: 0px;
}
.formstyle1 .legend,
.formstyle1 fieldset fieldset legend
{
   font-weight: normal;
   border: dashed 2px #456F99;
   margin: 0px 0px 6px;
   padding: 0px 8px;
}
/* End sub fieldsets */

/* Handle boxall styles */
.formstyle1 fieldset.boxall
{
   border: none;
}

.formstyle1 .boxall label
{
   display: block;
   float: none;
   width: auto;
   margin: 0 0 0 20px;
}
.formstyle1 .boxall input { margin: 0px; padding: 0px 0px 0px 3px; }
/* End boxall styles */

/* Button settings */
.formstyle1 .buttons
{
   position: relative;
   display: block;
   width: 97%;
   padding: 5px;
   text-align: right;
   margin: 0;
}

.formstyle1 .buttons span
{
   position: absolute;
   left: 5px;
   top: 0px;
   font-weight: bold;
}

.formstyle1 .buttons label,
.formstyle1 .nofloat label
{
   position: static;
   display: inline;
   float: none;
   width: auto;
   padding: 0;
   margin: 0;
}

.formstyle1 .bluebut, .formstyle1 .bluebut_on, .formstyle1 .bluebut:hover,
.formstyle1 .bluebut input, .formstyle1 .bluebut_on input,
.formstyle1 .button, .formstyle1 .button_on, .formstyle1 .button:hover
{
   font-family: Verdana;
   font-size: 11px;
   font-weight: bold;
   padding: 3px 7px;
   margin: 0px;
   color: #eee;
   text-align: center;
   border: solid 1px #0A3164;
   background: none;
}

.formstyle1 .bluebut, .formstyle1 .bluebut_on, .formstyle1 .bluebut:hover,
.formstyle1 .button, .formstyle1 .button_on, .formstyle1 .button:hover
{
   min-height: 14px;
   background: #08284C url("../images/grad_bluebutton.gif") repeat-x 0px -30px;
}

.formstyle1 .bluebut.flat, .formstyle1 .bluebut.flat:hover,
.formstyle1 .button.flat, .formstyle1 .button.flat:hover { padding: 0px; border: none; }

.formstyle1.small, .formstyle1 .small { font-size: 9px; }
.formstyle1.small .bluebut, .formstyle1.small .bluebut button,
.formstyle1.small .button,  .formstyle1.small .button button { font-size: 10px; padding: 2px; }

.formstyle1 .bluebut_on, .formstyle1 .bluebut:hover,
.formstyle1 .button_on, .formstyle1 .button:hover
{ background-position: 0px 0px !important; color: #fff; background-color: #3F6DB3; }

   /* Alternate Button Backgrounds */
   .formstyle1 .alt1 .button, .formstyle1 .alt1 .button_on, .formstyle1 .alt1 .button:hover
   {
      background: #085B00 url("../images/grad_greenbutton.gif") repeat-x 0px -30px;
      color: #fff;
   }
   
   .formstyle1 .alt1 .button_on, .formstyle1 .alt1 .button:hover
   { background-color: #3FDB00; }


   .formstyle1 .alt2 .button, .formstyle1 .alt2 .button_on, .formstyle1 .alt2 .button:hover,
   .formstyle1 .alt4 .button
   {
      background: #E1E1E1 url("../images/grad_alt2button.gif") repeat-x 0px -30px;
      color: #333;
   }

   .formstyle1 .alt2 .button_on, .formstyle1 .alt2 .button:hover
   { background-color: #65AFD6; color: #fff; }

   .formstyle1 .alt3 .button, .formstyle1 .alt3 .button_on, .formstyle1 .alt3 .button:hover
   {
      background: #6D1E23 url("../images/grad_alt3button.gif") repeat-x 0px -30px;
      color: #fff;
   }

   .formstyle1 .alt3 .button_on, .formstyle1 .alt3 .button:hover
   { background-color: #A4676B; color: #fff; }

   .formstyle1 .alt4 .button_on, .formstyle1 .alt4 .button:hover
   { background: #3F6DB3 url("../images/grad_bluebutton.gif") repeat-x 0px 0px; color: #fff; }
   /* END Alternate Button Backgrounds */

/* Button end */

.formstyle1 .bluefield, .formstyle1 .bluefield_plain
{
   width: 73%;
   padding: 0px 0px 0px 3px;
   margin: 1px;
   border: outset 2px #73A1CE; /*9499A1; Grayish blue color */
   background: #fcfcfc;
}

/*
.formstyle1 .bluefield
{
   filter: alpha(opacity=80);    // IE
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
   -moz-opacity: .75;            // MOZILLA
   opacity: .75;                 // OPERA
}
*/
* html .formstyle1 .bluefield, 
* html .formstyle1 .bluefield_plain{ width: 65%; /* WIN IE < 7 */ }

.formstyle1 .highlight .bluefield { width: 60%; }
.formstyle1 .highlight .bluebut, .formstyle1 .highlight .bluebut_on { width: 30%; }

.formstyle1 .full .bluefield,
.formstyle1 .full .bluefield_plain { width: 100%; }

.formstyle1 .blueBar_top, .formstyle1 .blueBar_bot
{
   background-image: url("../images/bluebar_00.gif");
   background-position: left top;
   background-repeat: repeat-x;
}
.formstyle1 .blueBar_bot { background-position: left bottom; }

.formstyle1 .bluefield:hover,
.formstyle1 .bluefield:active,
.formstyle1 .bluefield:focus,
.formstyle1 .bluefield_plain
{
   border-color: #0A84FF; /* Light blue */
   /* Remove transparency */
   /*
   filter: none;     // IE
   -moz-opacity: 1;  // MOZILLA
   opacity: 1;       // OPERA
   */
}
.formstyle1 .bluefield:active,
.formstyle1 .bluefield:focus { background: #fff; }

/* FIX SAFARI HOVER & FOCUS ISSUES */
/* This was causing issues with CHROME so it was taken out */
/*
body:last-child:not(:root:root) .formstyle1 .bluefield:hover,
body:last-child:not(:root:root) .formstyle1 .bluefield:active,
body:last-child:not(:root:root) .formstyle1 .bluefield:focus
{ margin: 1px; }
*/

.formstyle1 em { font: normal bold 90% Verdana; color: #f00; }

.formstyle1 .normal big { display: inline !important; border: none !important; background: none !important; }

/* borders color */
.formstyle1 big, .formstyle1 .highlight, .formstyle1 li, .formstyle1 .highlight_alt
{ border-color: #456F99; }
.formstyle1 .red { border-color: #E41A1A; color: #FB1D1D; }

.formstyle1 .note { padding: 10px; }

.formstyle1 .note ul, .formstyle1 .note ol
{
   padding: 0px;
   margin: 5px 0px 5px 10px;
}

.formstyle1 .note ul li, .formstyle1 .note ol li
{
   display: list-item;
   clear: none;
   list-style-type: disc;
   list-style-position: inside;
   margin-left: 15px;
   padding: 2px;
}

.formstyle1 .note blockquote { margin: 8px 5px 8px 16px; }

.formstyle1 .normal { font-weight: normal; }

.formstyle1 .title
{
   color: #000;
   font-weight: bold;
   font-size: 12px;
   letter-spacing: 2px;
   padding: 10px 3px 5px 4px;
   background: transparent;
}

/* FORMSTYLE ADDITIONS */
.formstyle1 { min-height: 1%; }
* html .formstyle1 { height: 1%; }

.formstyle1 .textbox_style
{
   height: auto;
   border: dashed 1px #9499A1; /* Grayish blue color */
   background: #fff;
   padding: 2px !important;
   overflow: hidden;
}

.formstyle1 .textbox_style.multiline
{
   position: relative;
   height: 80px;
   overflow: auto;
}

.formstyle1 .auto_width { width: auto !important; }

/* Remove width and block display when in nofloat, or multiple column mode */
.formstyle1 .twocol .bluefield, .formstyle1 .twocol input,
.formstyle1 .twocol select, .formstyle1 .twocol .textbox_style,
.formstyle1 .nofloat .bluefield, .formstyle1 .nofloat input,
.formstyle1 .nofloat select, .formstyle1 .nofloat .textbox_style,
.formstyle1 .li.nofloat .textbox_style
{
   display: inline;
   width: auto;
   padding: 0px 0px 0px 3px;
   margin: 0;
}

/* Remove float for any controls in a nofloat object */
.formstyle1 .nofloat .bluefield, .formstyle1 .nofloat input,
.formstyle1 .nofloat select, .formstyle1 .nofloat .textbox_style,
.formstyle1 .nofloat .checkbox_style
{ float: none; }

.formstyle1 .nofloat .checkbox_style { display: inline; }

fieldset.compress .textbox_style, fieldset.compress .bluefield { width: 70%; }

.formstyle1 li > .textbox_style,
.formstyle1 li > .checkbox_style { display: block; float: left; }

.formstyle1 .checkbox_style
{
   height: 33px;
   width: auto !important;
   padding: 10px 0px 0px 40px;
   overflow: hidden;
   background: url("../images/visible_checked.gif") no-repeat left top;
}
.formstyle1 .checkbox_style.false { background-position: 0px -66px; }

.formstyle1 .checkbox_style.mini
{
   height: 17px;
   padding: 0px 0px 5px 24px !important;
   background: url("../images/visible_checked_small.gif") no-repeat left top;
}
.formstyle1 .checkbox_style.mini.false { background-position: 0px -33px; }

   .formstyle1 li.multicol .textbox_style { width: 43%; }
   /* First & Second for two columns */
   .formstyle1 li.multicol.first .textbox_style { width: 41%; }
   .formstyle1 li.multicol.second .textbox_style { width: 41%; }

.bgForm1
{ background: #fff url("../images/gradient_02.gif") repeat-x left top; }

.formstyle1.nobg, .bgNone { background: none; }

.formstyle1.nobg fieldset, .formstyle1 fieldset.flat { border: none; }

/* TWO columns */
   .formstyle1 .li.twocol, .formstyle1 li.twocol
   {
      float: left;
      clear: both;
      width: 53%;
   }
   .formstyle1 .li.twocol label, .formstyle1 li.twocol label { width: 45.5%; }
   .formstyle1 .li.twocol input, .formstyle1 li.twocol input { width: 49.5%; }
   .formstyle1 .li.twocol .textbox_style, .formstyle1 li.twocol .textbox_style { width: 49.5%; }

   /* Second (ending) column for two columns */
   .formstyle1 .li.twocol.end, .formstyle1 li.twocol.end { width: 43.5%; clear: none; }
   .formstyle1 .li.twocol.end label, .formstyle1 li.twocol.end label { padding-left: 10%; width: 34%; }
   .formstyle1 .li.twocol.end .textbox_style, .formstyle1 li.twocol.end .textbox_style { width: 50%; }

   .formstyle1 fieldset.compress .li.twocol.end, .formstyle1 fieldset.compress li.twocol.end
   { width: 41%; }
/* End two columns */

.formstyle1 .alt_bg { background-color: #EAECEF; margin: 0px; background-image: none; }
.formstyle1 .alt_bg.odd { background-color: #F2FFFF; }
.formstyle1 .alt_bg.odd2 { background-color: #EDF4F6; }

.formstyle1 .subchild
{
   display: block;
   min-height: 1%;
   margin: 0px;
}
* html .formstyle1 .subchild { height: 1%; }

.formstyle1 .subchild label
{
   width: 19%;
   margin-left: 5%;
}

.formstyle1 .subchild .textbox_style,
.formstyle1 .li .textbox_style,
.formstyle1 .textbox_style, .formstyle1 .checkbox_style
{
   display: inline-block;
   /*position: relative;*/
   margin: 2px;
   width: 73%;
}

.formLinkButton
{
   display: block;
   font-size: 12px;
   border: solid 2px #3F6DB3;
   color: #eee;
   width: auto;
   text-align: center;
   padding: 3px 6px;
   background: #3F6DB3 url("../images/grad_bluebutton.gif") repeat-x left top;
}

.formLinkButton:hover
{
   background-color: #08284C;
   background-position: 0px -30px !important;
   border: outset 2px #043B73;
   color: #FFC956;
   text-decoration: none;
}

.alt1 .formLinkButton
{
   background-image: url("../images/grad_greenbutton.gif");
   background-color: #3FDB00;
}

.alt1 .formLinkButton:hover { background-color: #085B00; }

   /* Form pager styles */
   .pager, .pager td { position: relative; }

   /*.pager { hexight: 1%; }*/

   .pager, .pager .inner, .pager .title
   {
      display: block;
      width: auto;
      color: #eee;
   }

   .pager .title
   {
      font-weight: bold;
      font-size: 13px;
      padding-top: 3px;
      color: #fff;
   }

   .pager .inner
   {
      padding: 9px 6px 0px 5px;
      height: 30px;
      background: transparent url("../images/round_boxes/g_round_00.png") no-repeat right top;
   }

   .pager .inner a
   {
      display: block;
      clear: none;
      float: left;
      height: 30px;  /* 36px Minus a's padding and parent div's padding */
      font-weight: bold;
      text-decoration: none;
      padding: 0px 0px 0px 7px;
      font-size: 13px;
   }
   
   .pager .inner a span
   {
      position: relative;
      display: block;
      width: auto;
      height: 22px;
      padding: 3px 10px 5px 3px;
      cursor: pointer;
      color: #eee;
    }
   
   * html .pager .inner a span { display: inline-block; height: 100%; }   /* Height & Width fix for IE 6 */

   .pager .inner .on
   { background: transparent url("../images/round_boxes/round_tab_w.gif") no-repeat left top; }

   .pager .inner .on span
   { background: transparent url("../images/round_boxes/round_tab_e.gif") no-repeat right top; color: #000; }

   .pager .inner a:hover span
   {
      padding: 4px 10px 4px 3px;
      text-decoration: underline;
   }

   /* IE < 7 PNG FIX */
   * html .pager .inner
   {
      /* Reset background image */
      background-image/**/: none;
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
               src="http://framework.cccf.org/images/round_boxes/g_round_00.png", sizingMethod="crop");
   }
   /* END Form Pager styles */

.formstyle1 .loadMessage { font-size: 9px; }
.formstyle1 .loadMessage img { vertical-align: middle; border: none; margin-left: 10px; }

.pager .loadMessage
{
   width: auto;
   overflow: hidden;
   padding: 10px;
   margin: 0px;
   color: #000;
}

.loadMessage.hidden { display: none; }

/* textbox_style resets */
.formstyle1 .textbox_style ul, .formstyle1 .textbox_style ol,
.formstyle1 .textbox_style blockquote, .formstyle1 .textbox_style p,
.formstyle1 .textbox_style big, .formstyle1 .textbox_style dd,
.formstyle1 .textbox_style dt, .formstyle1 .textbox_style dl,
.formstyle1 .textbox_style li
{
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	outline: 0;
	padding: auto;
	margin: auto;
	border: 0;
   height: auto;
   float: none;
   clear: none;
   background: transparent;
   color: inherit;
}

.formstyle1 .textbox_style ul li, .formstyle1 .textbox_style ol li
{ display: list-item; list-style-type: disc; }

.formstyle1 .textbox_style big { font-size: larger; }
.formstyle1 .textbox_style blockquote { margin: 15px; }
.formstyle1 .textbox_style p { margin: 15px 0px !important; }
/* END: textbox_style resets */

/****************** END FORM STYLES ***********************/

/****************** Error messages associated with forms *********************/
.formErrorBox
{
   border: ridge 1px #f00;
   background: #eee;
   padding: 5px;
}
.formErrorBox strong
{
   display: block;
   padding: 2px 5px;
   border-bottom: ridge 2px #ccc;
}
.formErrorBox .message { padding: 5px 3px 3px 10px; color: #f00; font-weight: bold; }
.formSuccess { font-size: large; font-weight: bold; text-align: center; padding: 15px; line-height: 1.3em; }
.formSuccess .small, .formSuccess.small { font-size: medium; }

.vforms_errorlabel
{
   display: block;
   display: inline-block;
   text-align: right;
   padding-right: 20px;
   font-weight: bold;
   color: #dc0000;
}

.vforms_parenterror
{
   border: solid 1px #456F99;
   background-color: #eee;
}

/* Error label additions */
.vforms_errorlabel.small
{
   display: block;
   font-weight: normal;
   padding: 0px;
   width: auto;
}

.vforms_errorlabel.small.normal { display: inline; }

.twocol .vforms_errorlabel.small:before {content: "&nbsp;"; overflow: hidden; clear: both; display: block; visibility: hidden; height: 0px; }

.twocol .vforms_errorlabel.small
{
   padding-left: 35%;
   width: auto;
}

/* Popup error message box */
.mbubble, .mbubble .arrow_out, .mbubble .arrow_in, .mbubble .container
{
   position: absolute;
   font-weight: bold;
   color: #dc0000;
   top: 0px;
   left: 0px;
   text-align: left;
   width: 300px;
}
.mbubble .arrow_out, .mbubble .arrow_in
{
   width: 0px; height: 0px;   /* For IE5 and below only */
   width/**/: 28px; height/**/: 24px;
   overflow: hidden;
}
.mbubble .arrow_out { left: 20px; z-index: 20; }
.mbubble .arrow_in
{
   height: 48px;
   width: 28px;
   background: transparent url("../images/forms/bubbleArrow.png") no-repeat left top;
}

.mbubble .container
{
   padding: 0px;
   background: none;
   z-index: 10;
}
.mbubble .container .middle
{
   padding: 8px 10px 3px;
   height: 100%;
   background: transparent url("../images/forms/bubbleTop.png") no-repeat left top;
}
.mbubble .container .bottom
{
   height: 13px;
   background: transparent url("../images/forms/bubbleBottom.png") no-repeat left top;
}
.mbubble .container .middle div
{
   color: #333;
   padding: 3px;
   font-weight: normal;
}

.mbubble .closebutton
{
   position: absolute;
   display: none;
   top: 3px; right: 11px;
   width: 16px; height: 16px;
   cursor: pointer;
}
/* IE < 7 PNG FIX */
* html .mbubble .container div * { position: relative;}
/* Reset background image */
* html .mbubble .arrow_in, * html .mbubble .container,
* html .mbubble .container .middle, * html .mbubble .container .bottom
{ background-image/**/: none; }

* html .mbubble .arrow_in
{
   position: relative;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src="http://framework.communitycollege.org/images/forms/bubbleArrow.png", sizingMethod="scale");
}
* html .mbubble .container .middle
{
   height: 100%;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src="http://framework.communitycollege.org/images/forms/bubbleTop.png", sizingMethod="crop");
}
* html .mbubble .container .bottom
{
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src="http://framework.communitycollege.org/images/forms/bubbleBottom.png", sizingMethod="scale");
}
/* END IE < 7 PNG FIX */