/* CSS rules for HTML5 (or fallback) */

.gcui-rounded-10 {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.gcui-rounded-5 {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

.gcui-rounded-3 {
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}

.opaque-50 {
    opacity: 0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

/* the element will be 70% opaque by default and goes to fully opaque on hover */
.opaque-on-hover {
    opacity: 0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    
    transition: opacity 0.3s; /* linear */
    -moz-transition: opacity 0.3s; /* linear */
    -webkit-transition: opacity 0.3s; /* linear */
    -o-transition: opacity 0.3s; /* linear */
}
.opaque-on-hover:hover {
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}

/* the element will be 90% opaque by default and goes to fully opaque on hover */
.opaque2-on-hover {
    opacity: 0.9;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    
    transition: opacity 0.3s; /* linear */
    -moz-transition: opacity 0.3s; /* linear */
    -webkit-transition: opacity 0.3s; /* linear */
    -o-transition: opacity 0.3s; /* linear */
}
.opaque2-on-hover:hover {
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}

/* add a shadow over the full (box) of the element on hover */
.hover-on-shadow:hover {
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#333333,strength=2);
    -moz-box-shadow: 0px 0px 6px #333; /* FF3.5+ */
    -webkit-box-shadow: 0px 0px 6px #333; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 6px #333; /* Opera 10.5, IE9, Chrome 10+ */
}

.fuzzy-shadow {
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,strength=2);
    -moz-box-shadow: 0px 0px 6px #ddd; /* FF3.5+ */
    -webkit-box-shadow: 0px 0px 6px #ddd; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 6px #ddd; /* Opera 10.5, IE9, Chrome 10+ */
}

/* add shadow to the text inside the element on hover */
.hover-on-textshadow:hover {
    /* text-shadow: 1px 1px #005C5F, 2px 2px #003C3F, 3px 3px #000000; */
    text-shadow:
         1px -1px 3px rgba(0, 0, 0, 0.2),
        -1px  1px 3px rgba(0, 0, 0, 0.2),
         1px  1px 3px rgba(0, 0, 0, 0.2),
        -1px -1px 3px rgba(0, 0, 0, 0.2),
         0px  1px 3px rgba(0, 0, 0, 0.2),
         0px -1px 3px rgba(0, 0, 0, 0.2),
         1px  0px 3px rgba(0, 0, 0, 0.2),
        -1px  0px 3px rgba(0, 0, 0, 0.2);
}
.hover-on-textshadow-white:hover {
    /* text-shadow: 1px 1px #005C5F, 2px 2px #003C3F, 3px 3px #000000; */
    text-shadow:
         1px -1px 1px rgba(200, 200, 200, 0.2),
        -1px  1px 1px rgba(200, 200, 200, 0.2),
         1px  1px 1px rgba(200, 200, 200, 0.2),
        -1px -1px 1px rgba(200, 200, 200, 0.2),
         0px  1px 1px rgba(200, 200, 200, 0.2),
         0px -1px 1px rgba(200, 200, 200, 0.2),
         1px  0px 1px rgba(200, 200, 200, 0.2),
        -1px  0px 1px rgba(200, 200, 200, 0.2);
}

/**
 * Vetical centering per http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
 * Example: http://jsfiddle.net/2TFer/
 *
 * <div class="outer-vert-center" style="height: 300px">
 *      <div class="mid-vert-center">
 *          <div class="vert-center">
 *              <strong>ETHICS AND<br>
 *              SURVIVAL</strong><br>
 *              5 COURSES
 *          </div>
 *      </div>
 *  </div>
 */

.outer-vert-center {
    display: table;
    #position: relative;
    overflow: hidden;
}

.mid-vert-center {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}

.vert-center {
    #position: relative;
    #top: -50%;
}

/**
 * Big, blue, rounded-edge button.
 * 
 * Example:
 * <div class="enroll-now-button blue-round-button">
 *      <div class="enroll-now-button-text-wrapper">
 *          <span class="enroll-now-button-big-text">
 *             <a href="#">ENROLL NOW >></a><br/>
 *          </span>
 *       </div>
 * </div>
 */

.blue-round-button {
    background-color: #2690f0;
    background-image: -webkit-linear-gradient(top, #258cf0, #1ca8ee);
    background-image: -moz-linear-gradient(top, #258cf0, #1ca8ee);
    background-image: -ms-linear-gradient(top, #258cf0, #1ca8ee);
    background-image: -o-linear-gradient(top, #258cf0, #1ca8ee);
    background-image: linear-gradient(top, #258cf0, #1ca8ee);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#258cf0', EndColorStr='#1ca8ee');
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0px 0px 2px #444;
    -moz-box-shadow: 0px 0px 2px #444;
    box-shadow: 0px 0px 2px #444;
}

.blue-round-button:hover {
    background-color: #0670d0;
    background-image: -webkit-linear-gradient(top, #056cd0, #0c88be);
    background-image: -moz-linear-gradient(top, #056cd0, #0c88be);
    background-image: -ms-linear-gradient(top, #056cd0, #0c88be);
    background-image: -o-linear-gradient(top, #056cd0, #0c88be);
    background-image: linear-gradient(top, #056cd0, #0c88be);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#056cd0', EndColorStr='#0c88be');    
    -webkit-box-shadow: 0px 0px 2px #222;
    -moz-box-shadow: 0px 0px 2px #222;
    box-shadow: 0px 0px 2px #222;
}

.gray-box {
    -webkit-user-select: none;
    -webkit-appearance: initial;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #666;
    
    transition: opacity 0.3s; /* linear */
    -moz-transition: opacity 0.3s; /* linear */
    -webkit-transition: opacity 0.3s; /* linear */
    -o-transition: opacity 0.3s; /* linear */
}

.gray-box:hover {
    background-color: #e5e5e5;
    border: 1px solid #bbb;
    color: #444;
    cursor: pointer;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}