/* Site Specific CSS Styles */

/*

// Media Queries
Mobile First - everything below 768px (48em)
$small-screen: 768px; //Desktop/Tablet and up (48em) - *This is where the fluid grid and componenets change!
$sweetspot-screen: 980px; //Desktop (61.25em) - *This is where the magic happens ... err ... the UTMB nav changes! - @mgcooper
$medium-screen: 1280px; //Desktop Medium (80em) - Assigned but not used in templates
$large-screen: 1440px; //Desktop Large (90em) - Assigned but used in templates

1) Example Test: Add this html text to your page: 
   <i class="hello-world">Hello, World!</i>

2) Open your page in a decent browser

3) Resize your browser window and watch the font color change.

4) You just made something using "Mobile First" responsive design :)

*/


/* "Mobile First" (default) - Styles for screens that are smaller than 768px (48em) */
.hello-world { 
    color: green; 
}


/* Tablet and up (Sass: $small-screen: 768px;) 
	Styles for screens that are at least 768px (ie 48em) */
@media only screen and (min-width: 48em) {
    .hello-world { 
        color: blue; 
    }
}


/* Desktop and up (Sass: $sweetspot-screen: 980px;)
	Styles for screens that are at least 980px (61.25em) */
@media only screen and (min-width: 61.25em) {
    .hello-world { 
        color: red; 
    }
}

fieldset {
    padding:0px 20px 10px 20px;
    margin:10px 0 25px 0;
}

.legend {
    padding:0 10px 0 10px;
}

.displaydrop {display: block;
        }

.failureNotification{
    color:#EA2839;
    margin:25px 0 0 0;
}

p{
    margin:0 0 25px 0;
}

.displayerror{
    color:#FF0000 !important;
    font-weight:bold !important;
}

/* FORM ELEMENTS */
.textbox{border:1px solid #CCCCCC; height:20px; font-size:13px; width:300px}
.dropdown{border:1px solid #CCCCCC; }

.formtitle{color:#000000; font-size:24px; line-height:31px; letter-spacing:-1px; padding:0 0 9px 0; }
.fieldname{padding:0 3px 0 0; font-size:12px; font-family:Arial}
.formfield{}

.boxedbutton{font:bold 12px/17px Arial, Helvetica, sans-serif; cursor:pointer; color:#808080; border:1px solid #808080; padding:10px 10px 10px 10px;}
.boxedbutton:hover{color:#ff0000; border:1px solid #ff0000; padding:10px 10px 10px 10px; text-decoration:none;}

.gridviewtext {
  font-family: inherit;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 1.25em;
  text-rendering: optimizeLegibility;
  color: #222222;
}