@charset "utf-8";
/* CSS Document */
/* HTML tag styling */

/* ---------------------------------------------------  */
/* ----------- Styling for larger sizes -------------  */    
/* ---------------------------------------------------  */




/* -------------------- Header: generic styling ------------------------- */

header {
	background-color: #333333;
}

/* Shadow and border */
header .span12 {
/*  border-bottom: 1px solid #fff;

    -moz-box-shadow:  0.2em 1em #A0A0A0;
    -webkit-box-shadow: 0 0.2em 1em #A0A0A0;
    box-shadow: 0 0.2em 1em #A0A0A0;	*/
}

.container {
    width: 1070px;
    max-width: 100%;
}
/* -------------------- Header: logo styling ---------------------------- */

body header .row-fluid .span3 {
/*    margin: 1em 0em 1em 0em;*/
}
/* Logo image size */
body header .row-fluid .span3 img {
    vertical-align: middle;
/*    height: 120px;
    width: 235px;*/
    width: 100%;
    height: auto;
    margin-top: 0.5em;
}

/* -------------------- Header: submenu styling ------------------------- */

.mod-languages {
    text-align: right;
/*    margin: 0em 2em 0 0;*/
    margin: 0.5em;
    padding: 0;
}

/* -------------------- Header: search styling --------------------------- */

header .search {
    margin: 0.5em 0 0.5em 0;
    float: right;
}

.search form {
    margin: 0;
}

input.search-query {
    *border-right-width: 0px;
    *border-bottom-width: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 0;
    padding-left: 14px;
    padding-right: 14px;
    width: 200px;
}
        
header .btn-primary {
    display: none;
}

/* -------------------- Header: main menu styling ------------------------ */

body header .row-fluid {
   margin-left: 0em;
   padding: 0; 
}

body header .row-fluid .span12,
body header .span12 .container-fluid{
    padding-left: 0;
    margin-left: 0;
	margin-top: 0.3em;
}

.navbar {
    margin: 0;
}

/* main menu coloring, reusing elements from bootstrap.css */
.navbar-inner {
    min-height: 30px;
    padding-left: 0px;
    padding-right: 20px;
    background: none;
    border: none;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
}
/* main menu text styling */
.navbar .nav > li > a {
    color: #fff;
    font-size:16px;	
    text-shadow: none;
    margin-right: 0.3em;
    border-top: 2px solid transparent;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
    color: #fdcf00;
    text-decoration: underline;
    border-top: 2px solid transparent;
    
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
    font-size:16px;
    text-height: bold;
    text-decoration: underline;
    background-color: #FFF;
    border-top: 2px solid #FFF;

/*    *border-right-width: 2px;
    *border-bottom-width: 2px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

    -webkit-box-shadow: 1px 1px 2px #00704A;
    -moz-box-shadow: 1px 1px 2px #00704A;
    box-shadow: 1px 1px 2px #00704A inset; */
}


/* Main menu dropdown menus, reused from Protostar */
nav .nav-child {
    position: absolute;
    top: 95%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
/*    background-color: #00704A;*/
    /*background-color: #303238;*/
    background-color: #333333;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.2);
/*    *border-right-width: 2px;
    *border-bottom-width: 2px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;*/
    *border-right-width: 0px;
    *border-bottom-width: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;     
}
nav .nav-child.pull-right {
    right: 0;
    left: auto;
}
nav .nav-child .divider {
    *width: 100%;
    height: 1px;
    margin: 8px 1px;
    *margin: -5px 0 5px;
    overflow: hidden;
    background-color: #e5e5e5;
    border-bottom: 1px solid #fff;
}
nav .nav-child a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    color: #fff;
    white-space: nowrap;
}
nav .nav > li {
    position: relative;
}
nav .nav > li:hover > .nav-child,
nav .nav > li > a:focus + .nav-child {
    display: block;
}
nav .nav-child:before {
    position: absolute;
    top: -7px;
    left: 19px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fdcf00;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0,0,0,0.2);
    content: '';    
}
nav .nav-child:after {
    position: absolute;
    top: -6px;
    left: 20px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fdcf00;
    border-left: 6px solid transparent;
    content: '';
}
nav .nav-child li > a:hover,
nav .nav-child li > a:focus,
nav .nav-child:hover > a {
    text-decoration: none;
    color: #fdcf00;
    
}

/* -------------------- Body: generic styling ------------------------ */

body {
    font-family: Arial, Helvetica, sans-serif;	
    background-image: url('../../../images/background_img.jpg');
    background-repeat: no-repeat;
  /*  background-attachment: fixed;*/
    background-size: 100%;
}

/*.body .container{*/
#container {
    background-color: #FFFFFF;
    border-top: none;
	opacity: 0.98;
    background-attachment: scroll;
/*    -moz-box-shadow: 1em 0em 2em #A0A0A0;
    -webkit-box-shadow: 1em em 2em #A0A0A0;
    box-shadow: 0 0 2em #A0A0A0;*/

    width: 1070px;
    max-width: 100%;
/*    min-height: 700px;*/
}

body .body .container-fluid {
    padding: 1.5em;
}

/*.row-fluid [class*="span"] {
    margin-left: 1.5em;
}*/


/* -------------------- Body: search styling ------------------------- */

body .search fieldset.only, 
body .search div.form-limit {
    display: none;
}

/* -------------------- Body: left banner styling ------------------------- */

.body .row-fluid .span3 {
    margin: 0;
}

/* -------------------- Body: left banner styling ------------------------- */

.carouselbanner {
    margin-bottom: 1em;
}

/* -------------------- Body: short news styling ------------------------- */

.leftbanner h3 {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 1px solid #333333;
    height: 25px;
    padding-bottom: 0.5em;
    margin-top: 0;
}

ul.category-module {
    margin: 0 0 1em 0;
}

ul.category-module li {
    list-style-type: none;
    border-bottom: 1px dashed #333333;
}

ul.category-module li:hover {
    background-color: #E2E2E2;
}
ul.category-module li:last-child {
    list-style-type: none;
    border-bottom: 1px solid #333333;
}

ul.category-module li h4 {
    font-size: 12px; 
    text-transform: uppercase;
    margin: 0.4em 0 0em 0;
    padding:0 0.2em 0 0.2em;
}

ul.category-module li h4 a {
    color: #333333;
}

ul.category-module li h4 a:focus,
ul.category-module li h4 a:hover {
/*    color: #00704A;*/
    color: #CC0000;
}

ul.category-module li p {
    font-size: 12px;
    margin: 0em 0 0.3em 0;
    padding:0 0.2em 0 0.2em;
    font-weight: normal;
}

ul.category-module li p strong {
    font-weight: normal;
}

/* -------------------- Body: left submenu styling ------------------------- */

.leftbanner .nav li {
    background-color: #303238;
}

.leftbanner .nav a {
    color: #fff;
/*    border: 1px solid #333333; */
    margin: 0.5em 0 0.5em 0; 
}
.leftbanner .nav li a:hover {
    background: none;
    color: #fdcf00;
    text-decoration: underline;
}

.leftbanner .nav a img {
/*    background-color: #fff;*/
    width: 50px;
    height: 38px;
    vertical-align: -15px;
/*    margin: 0.5em;*/
    padding:0;
    margin-right: 0.5em;
}

.leftbanner .nav a span {
    line-height: 36px;
    font-size: 16px;
    font-weight: normal;
    opacity:1;
    vertical-align: middle;
}

/* -------------------- Body: main banner styling --------------------- */

#responsivebannerslide {
    background: none;
}

#responsivebannerslider, .sequence {
    height: 300px;
}

.main-banner {
/*    box-shadow: 0px 3px 10px #333333;*/
	margin-bottom: 0.5em;
}

.main-banner img {
    margin: 0;
}

.status {
    display: none;
}

.status.active {
    display: none;
}

.pause {
/*    background: url("../images/bt-pause.png") 50% 0 no-repeat;
    cursor: pointer;
    height: 27px;
    left: 40px;
    width: 21px;*/
    background: none;
    cursor: default;
    height: 27px;
    left: 40px;
    width: 21px;
}
.pause.paused {
    display: none;
}

/* -------------------- Body: breadcrumb styling ---------------------- */

.breadcrumb {
    background-color: #fff;
    padding-left: 0em;
    margin-bottom: 0em;
}

.breadcrumb .active {
    display:none;
    
}

.breadcrumb a {
/*    color: #CC0000;*/
}

/* -------------------- Body: main content styling ------------------------- */


.img-intro-left {
    float: left;
    margin-right: 1.2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.item-page, .blog, .category-list, .blog-featured, .contact-category, #xmap, .categories-list, .login {
    margin-bottom: 1em;	
}

.blog-featured .items-leading,
.blog .items-leading {
    border-bottom: 1px dashed #333333;
}

/* Article details: publishing, created, modified date */
.article-info-term {
    display: none;
}

.modified {

}

.article-info {
    margin: 0 0 0.5em 0;
}

dd {
    margin-left:0;
}

.blog-featured .page-header,
.blog .page-header,
.sipe-courses .page-header {
    border-bottom: 2px solid #333333;
    padding: 0;
    margin: 1em 0 0.5em 0;
}

.page-header {
    margin: 2px 0px 5px 0px;
}


.page-header h1 {
    font-size: 20px;
    font-weight: 600;
    margin:0;
    height: 1.7em;
}

h2 {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: lighter;
    line-height: 34px;
    margin:0;
}

p {
    font-size: 14px;
    margin:0.5em 0 0.5em 0;
}

.item {
    padding-bottom: 0.5em;
    border-bottom: 1px dashed #333333;
}

.item-page .page-header {
    padding-bottom: 0;
    /*height: 35px;*/
    height: auto;
    border-bottom: 1px solid #CDCDCD;
}

.item-page .page-header h2 {
    font-weight: bold;
}

.blog a,
.blog-featured a,
.item-page a {
    color: #333333;
}

.blog a:hover,
.blog a:focus,
.blog-featured a:hover,
.blog-featured a:focus,
.item-page a:hover,
.item-page a:focus {
    color: #0088cc;
    text-decoration: underline;
}

.blog .page-header {
    padding-bottom: 0;
    border: none;
}

.blog .page-header h1 {
    padding-bottom: 0;
    height: 35px;
    border-bottom: 1px solid #CDCDCD;
}

.items-leading .page-header {
    height: auto;
}

/* Blog two collumns */
row-fluid [class*="span"] {
    margin-left: 0em;
}

.clearfix {
    border-top: 1px dashed #333333;
}

.clearfix:last-child {
    border: none;
}

/* --- Body: main content pane-sliders categories styling --- */

.pane-sliders h3 {
    border-bottom: 1px dotted #333333;
    line-height: 20px;
    cursor: pointer;
}


.pane-sliders h3 span {
    color: #333333;
    font-size: 16px;
    font-weight: 100;
}




/* --- Body: main content list all categories styling --- */

.categories-list .first {
    margin-top: 1em;
}

.categories-list h3 {
    font-size: 14px;
    line-height: 25px;    
}

.categories-list .badge {
    border-radius: 9px 9px 9px 9px;
    padding: 1px 9px 2px;
    margin-top: 3px;
}

.categories-list .label, .badge {
    background-color: #777777;
    color: #FFFFFF;
    font-size: 11.844px;
    font-weight: bold;
    line-height: 14px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    vertical-align: baseline;
    white-space: nowrap;
    margin-left:15px;
    float: right;
}

.categories-list h3 a {
    color: #333333;
}

.categories-list h3 a:hover {
    color: #0088CC;
/*    color: #CC0000;*/
}

.categories-list h3.page-header {
    border-bottom: 1px solid #EEEEEE
}

.categories-list h3.page-header:hover {
    border-left: 4px solid #333333;
    padding-left: 1em;  
}

.categories-list h3.page-header:hover> .badge {
    background-color: #333333;
}


/* --- Main Content: search styles --- */

button.search-front-end {
    margin-top: -10px;
}

.tooltip-inner { 

    max-width: 200px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000000;
}


/* --- Main Content: Available courses styles --- */


.available-courses {
    min-height: 260px;
}


.available-courses .span9 {
    margin-left: 0;
    width: 910px;
    max-width: 100%
}

.available-courses .span1 {
    margin-top: 0.5em;
    margin-left: 0.5em;
}

.available-courses .span2 {
    margin-top: 2em;
    margin-right: 0.1em;

}

.available-courses .custom-span10 {
    margin-top: 0.5em;
    margin-left: 0em;
    width: 100%;
}

div#courses-bottom.row-fluid {
    padding-left:0.5em;
}

.available-courses #course-title-btn h1 {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: lighter;
    line-height: 25px;
    margin:0;
    margin-top: 0.5em;
    text-align: left;
}

.available-courses .collapse-course-info{
    border: none;
    background: none;
    font-size: 22px;
/*    float: right;*/
    transition:width 2s, height 2s;
    -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
    box-shadow: none;
    width: 100%;
}

.available-courses .collapse {
    
    overflow: hidden\9;
    *overflow: hidden;
    _overflow: hidden;
    
}

.available-courses #info-btn {
    text-align: right;
}

.available-courses .collapse-course-info:hover {
/*    transform:rotate(45deg);
    -ms-transform:rotate(45deg);  IE 9 
    -webkit-transform:rotate(45deg);  Safari and Chrome */
    
}

.available-courses .span10,
.available-courses .span8,
.available-courses .span5,
.available-courses .span4 {
    margin-left: 0;
}

.available-courses .span4 {
    padding-right: 1em;
}

.available-courses .span4 p:first-of-type,
.available-courses .span5 p:first-of-type {
    margin-top: 0em;
}

.available-courses strong.indent {
    margin-left: 1em;
}

.available-courses strong {
    margin-left: 0em;
    padding-right: 0.2em;
}

h3 {
    margin-top:0;
}


.available-courses p {
    text-align: justify;
    text-justify: inter-word;
}

.available-courses a {
    color: #333333;
}

.available-courses a:hover {
    color: #0088cc;
}

.available-courses .button {
    font-size: 14px;
    border: none;
    background: none;
    color: #fff;
    text-align: left;
}

.available-courses .inner-button strong {
    text-transform: uppercase;
}

.available-courses #button a {
    color: #FFF;
}

.available-courses #button a.details {
    color: #333333;
}

.available-courses #button p {
    margin-left: 0.5em;
}

.available-courses .outer-button {
    background-color: #333333;
    height: 2em;
    padding: 0.5em;
}

.available-courses .inner-button {
    border-left: 1px solid #fff;
    height: 1.5em;
    margin: 0.3em;
}

.available-courses .inner-details {
    color: #333333;
    font-size: 14px;
    text-align: center;
    border: 1px solid #333333;
    width: 100%;
    margin-bottom: 0.5em;
    right: 1px;
}

.available-courses .container {
    border-bottom: 1px dashed #333333;
}

.available-courses table tbody tr:first-child {
    background-color: transparent;
    color: inherit;
}

.available-courses table tbody tr:hover {

}

.available-courses div.span6.selected-clients,
.available-courses div.span6.unselected-clients { 
    margin-left: 0;    
}

.available-courses div.span6.selected-clients table {
    border: 4px solid rgb(223, 240, 216);    
}

.available-courses div.span6.unselected-clients table {
    border: 3px solid #F7E285;   
}


.available-courses div.selected-clients,
.available-courses div.unselected-clients { 
    margin-left: 0;    
}

.available-courses div.selected-clients table {
    border: 4px solid rgb(223, 240, 216);    
}

.available-courses div.unselected-clients table {
    border: 3px solid #F7E285;   
}



/* --- Main Content: Enrollments form access button styling --- */

#absolute-enroll-btn a:hover p,
#absolute-enroll-btn a:hover strong {
    text-decoration: underline;
    color: #fff;
    
}


#outer-enrollments-form-right-icon {
    width: 16em;
    height: 10em;
    position: fixed;
    top:18.5em;
    bottom:auto;
    right:0px;
    left:auto;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    background-color: #fff;
    background-image: url('../../../images/buttons/enrollments-form-btn-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
}

#outer-enrollments-form-btn {
    width: 16em;
    height: 5.5em;  
    position: fixed;
    top:29em;
    bottom:auto;
    right:0px;
    left:auto;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    background-color: #333333;
}

#inner-enrollments-form-btn {
    background-color: #333333;
    width: 14em;
    height: 4em;
    top:23em;
    bottom:auto;
    right:0px;
    left:auto;
    margin-left: 1em;
    border-left: 1px solid #fff;
}

#inner-enrollments-form-btn p {
    font-size: 19px;
    color: #fff;
    padding-left: 0.5em;
}

.sipe-course #inner-enrollments-form-btn p {
    text-align: left;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.5em;
}
    


#inner-enrollments-form-btn strong {
    font-size: 22px;
    color: #fff;
    padding: 0 1em 0 0.5em;
    text-transform: uppercase;
}



/* --- Main Content: Single course styles --- */

.sipe-course .span3 {
    margin-left: 1em;
}


.sipe-course #button a {
    color: #FFF;
}

.sipe-course #button .outer-button a:hover {
    color: #FFF;
    background-color: #fff;
}

.sipe-course .inner-button p {
    font-size: 14px;
    color: #FFF;
    text-align: left;
}

.sipe-course .inner-button p:hover {
    color: #fff;
    text-decoration: underline;
}

.sipe-course .inner-button strong {
    text-transform: uppercase;
}


.sipe-course h1 {
    font-size: 18px;
    text-align: right;
    text-justify: inter-word;
    line-height: 30px;
    border-bottom: 1px dashed #333333;
    padding-bottom: 0.3em
}

.sipe-course .left p {
    text-align: right;
    text-justify: inter-word;    
}

.sipe-course .left p:last-of-type {
    border-bottom: 1px dashed #333333;
    padding-bottom: 0.5em;
    margin-bottom: 1em;
}

.sipe-course p {
    text-align: justify;
    text-justify: inter-word;
}

.sipe-course button {
    font-size: 14px;
    border: none;
    background: none;
    color: #fff;
    text-align: left;
}

.sipe-course button strong {
    text-transform: uppercase;
}

.sipe-course .outer-button {
    background-color: #333333;
    height: 2em;
    padding: 0.5em;
    width: 60%;
    margin-left: 40%;
}

.sipe-course .inner-button {
    border-left: 1px solid #fff;
    height: 1.5em;
    margin: 0.3em;
}

.sipe-course button.details{
    color: #333333;
    font-size: 14px;
    text-align: center;
    border: 1px solid #333333;
    width: 65%;
    height: 2em;
    margin-bottom: 0.5em;
    margin-left: 40%;
}

/* --- Body: Enrollments form styling --- */

.enroll-error {
    
    background-color: #F2DEDE;
    border: 1px solid #E93732;
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

h2.enroll-error {
    
    background-color: none;
    border: 0px solid #E93732;
    margin-left: 1em;
    font-size: 19px;
    text-decoration: underline;
    text-transform: none;
    margin-top: 0.5em;
    margin-right: 0;
    margin-bottom: 0em;
}

p.enroll-error {
    
    background-color: none;
    border: 0px solid #E93732;
    margin-left: 1.5em;
    margin-top: 0em;
    margin-right: 0;
    margin-bottom: 0.3em;
}


.validation-error {
    display:none;
    background-color: #F2DEDE;
    border: 1px solid #E93732;
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

h2.validation-error {
    
    background-color: none;
    border: 0px solid #E93732;
    margin-left: 1em;
    font-size: 19px;
    text-decoration: underline;
    text-transform: none;
    margin-top: 0.5em;
    margin-right: 0;
    margin-bottom: 0em;
}

p.validation-error {
    
    background-color: none;
    border: 0px solid #E93732;
    margin-left: 1.5em;
    margin-top: 0em;
    margin-right: 0;
    margin-bottom: 0.3em;
}



#enroll {
    margin-left: 2em;
    margin-right: 2em;
}

#enroll input {
    margin: 0.5em 0.5em 0.5em 0.5em;
}


#enroll .input-mini {
    width: 9%;
}

#enroll .input-small {
    
}

#enroll .input-medium {
    width: 21%;
}

#enroll .input-large {
    width: 40%;
}

#enroll .input-xlarge {
    width: 65%;
}

#enroll .input-xxlarge {
    width: 100%;
    margin-left: 0;
    max-width: 99%;
    margin-right: 0;
}

#jform_sexo.radio label {
   margin-right: 0.5em;
   padding-top:0.3em;
}

button#jform_data_nascimento_img.btn {
    margin: 0.5em 0.5em 0.5em 0em;
}

h1#enroll {
    font-weight: 400;
    margin-left: 0.75em;
    padding-bottom: 0.1em;
    margin-bottom: 0.5em;
    margin-right: 0.75em;
    border-bottom: 2px solid #333333;
}

#enroll #priorities-header {
    margin-top: 1em;
}

#enroll #priorities-header h2 {
    text-transform: none;
    font-weight: 400;
    margin-left: 0;
    padding-bottom: 0;
    padding-left: 0.5em;
    padding-right: 0.5em;
    background-color: #FCF8E3;
    border: 3px solid #32C4E9;
    border-bottom: none;
}

#enroll #jform_priorities {
    border: 3px solid #32C4E9;
}

#enroll h2 {
    text-transform: none;
    font-weight: 400;
    margin: 0;
    padding-bottom: 0;
}

#enroll legend p {
    display: inline;
}

#enroll a {
    color: inherit;
}

#enroll a:hover {
    color: #0088cc;
}

fieldset ul {
    margin-left: 0;
}

fieldset ul li {
    list-style: none;
}

#enroll li input {
    margin-left: 0;
}

#enroll #jform_nivel_ensino {
    margin-right: 1em;
}

#enroll table {
    max-width: 100%;
    margin:0;
    display: inline-table;
}

/* Chrome */
#enroll table#jform_priorities {
    display: none;
}

/* Firefox */
#enroll table#jform_priorities.table {
    display: none;
}


#enroll h2#jform_priorities_label {
    display: none;
}

#enroll h2#no-available-courses-label {
    background: #F2DEDE;
    border: 1px solid #E93732;
    padding-left: 0.5em;
}

#enroll .table-hover tbody tr:first-child:hover td, .table-hover tbody tr:first-child:hover th {
    background-color: #333333;
}

#enroll tr {
    border-left: none;
    border-right: none;
}



#enroll tr[id^="justificationPerCourse"] {
    border: 2px solid #F7E285;
    display:none;
    margin-bottom: 0.5em;
    background-color: #F3F3F3;  
}

#enroll #available-courses {
    margin-top:0em;
}

#enroll legend {
    width: 100%;
    padding: 0;
    font-size: 21px;
    line-height: 40px;
    color: #333333;
    border: 0;
    border-bottom: 2px dashed #c3c3c3;
}

#enroll #first-fieldset {
    margin-top: 2.5em;
}


#enroll #second-fieldset {
    margin-top: 1.5em;
}

/* Firefox */
@-moz-document url-prefix() { 

    #enroll #first-fieldset legend {
        margin-bottom: 1em;
        margin-top: 0em;
    }
    
    #enroll #second-fieldset legend:first-child {
        margin-bottom: 0em;
        margin-top: 0em;
    }
    
    
    #enroll #second-fieldset legend {
        margin-bottom: 0em;
        margin-top: 1.5em;
    }
}

/* Google Chrome and Safari */
@media screen and (-webkit-min-device-pixel-ratio:0){

    #enroll #first-fieldset legend {
        margin-bottom: 1em;
        margin-top: 2em;
    }
    
    #enroll #second-fieldset legend {
        margin-bottom: 0em;
        margin-top: 1.5em;
    }
}

#enroll div.span4 {
    margin: 0.5em 0 0.5em 0;
}

#enroll #submit-button {
    background-image: url('../../../images/buttons/submit-button.png');
    background-repeat: no-repeat;
    background-position: right;
    background-color: transparent;
    width: 100px;
    height: 60px;
    border: none;
    padding-left: 0.5em;
    border-left: 1px solid #333333;
}


#enroll #submit-button:hover {
    background-image: url('../../../images/buttons/submit-button-hover.png');
    background-repeat: no-repeat;
    background-position: right;
    background-color: transparent;
}

#enroll #cancel-button {
    background-image: url('../../../images/buttons/cancel-button.png');
    background-repeat: no-repeat;
    background-position: left;
    background-color: transparent;
    width: 85px;
    height: 60px;
    border: none;
    padding-right: 0.5em;
    padding-left: 0;
    border-right: 1px solid #333333;
}

#enroll #cancel-button:hover {
    background-image: url('../../../images/buttons/cancel-button-hover.png');
    background-repeat: no-repeat;
    background-position: left;
    background-color: #E57664;
    
    border-right: 1px solid #333333;
}

/* --- Enrolled styling --- */

.enrolled {
    margin-left: 0.75em;
    padding-bottom: 0.1em;
    margin-bottom: 0.5em;
    margin-right: 0.75em;
    min-height: 350px;
}

.enrolled h1  {
    font-weight: 400;
    border-bottom: 2px solid #333333;
}

.enrolled h2 {
    font-size: 16px;
    font-weight: bold;
    text-transform: inherit;
    
    
}

.enrolled p:first-of-type  {
    margin-top:0;
}



/* --- Body: main content pagination styling --- */

.pagination {
    
    margin: 0.5em 0 0 0;
}

.pagination ul {
    border-radius: 0;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
    display: inline-block;
    margin-bottom: 0;
    margin-left: 0;
}

.pagination span {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;    
    border-top: none;
    border-left: none;
    border-bottom: 3px solid #333333;
    border-right: none;
    background-color: transparent;
    float: left;
    line-height: 25px;
    padding: 0 0.3em;
    margin: 0 0.4em;
    text-decoration: none;
}

.pagination-start span,
.pagination-prev span,
.pagination-next span,
.pagination-end span {
   border: none;
}

.pagination a {
     /* Override boostrap properties  */
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;    
    border:none;
    background-color: transparent;
    float: left;
    line-height: 25px; 
    padding: 0 0.3em;
    margin: 0 0.4em;
    text-decoration: none;
    color: #0088cc;
}

.pagination a:hover,
.pagination a:focus {
    border-bottom: 3px solid #0088cc;
}

.pagination p {
    margin: 0;
}

/* Button to previous or next article */
.pager a {
    display: inline-block;
    padding: 0px;
    margin: 5px 14px;
    background-color: #fff;
    border: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.pager a:hover {
    border-bottom: 2px solid #0088cc;
    
}




.img-circle, .img-polaroid, .img-rounded {
	margin: 0 0 1em 1em;
}
/* hide filter box on contact list */
.contact-category .inputbox {
	display: none;
}

/* breathing room on the right column */
div.span3 .moduletable {
/*	padding-right: 5em;*/
}

.login {
	margin-bottom: 0;
	min-height: auto;
}


/* primary button styling */
.btn-primary {
    background-color: #2293b9;
    background-image: -moz-linear-gradient(top, #2293b9, #1e82a4);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2293b9), to(#1e82a4));
    background-image: -webkit-linear-gradient(top, #2293b9, #1e82a4);
    background-image: -o-linear-gradient(top, #2293b9, #1e82a4);
    background-image: linear-gradient(to bottom, #2293b9, #1e82a4);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2293b9', endColorstr='#ff1e82a4', GradientType=0);
    border-color: #1e82a4 #1e82a4 #002a80;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    /**background-color: #1e82a4;*/
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */

    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
    color: #ffffff;
    background-color: #1e82a4;
    *background-color: #1e82a4;
}

/* -------------------- Footer: generic styling ------------------------- */



table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 100%
    
}

table th, table td {
    border-top: 1px solid #DDDDDD;
    line-height: 20px;
    padding: 5px;
    text-align: left;
    vertical-align: top;
}

table tr:first-child {
    background-color: #333333;
    color: #fff;
}

table tr:first-child:hover {
    background-color: #333333;
    color: #fff;
}

table tr:hover {
    background-color: #E2E2E2;
}

table tr:last-child {
/*    border-bottom: 1px solid #333333;*/
}




/* testimonal styling */
.custom {
/*	padding-top: 1em;*/
}
.custom blockquote {
	background-color: #dbf1f8;
	padding: 2px 2px 2px 7px;
	border-left: 5px solid #59c0e1;	
}


/* -------------------- Footer: generic styling ------------------------- */

/* footer styling */
footer {
	background-color: #333333;
        color: #fff;
}

footer .span9 {
	padding: 4em 0 0 3em;
}
footer p {
	padding-left: 0.75em;
}
footer .nav-pills a {
	color: #fff;
}
footer .nav-pills a:hover {
	color: #59c0e1;
}

/* -------------------- Footer: left styling ------------------------- */

#footer-left {
    margin: 1.5em 2.5em 0 2.5em;
}

#footer-left h1 {
    font-size: 20px;
    font-weight: normal;
    line-height: 30px;
    border-bottom: 1px solid #C7C7C7;
    color: #C7C7C7;
}

#footer-left p {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0.1em;
    color: #C7C7C7;
}

#footer-left .span5 p {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0.1em;
    color: #C7C7C7;
    line-height: 21px;
    padding-top: 5px;
}

#footer-left img {
    margin-right: 0.5em;
}

#footer-left .footer-info {
    display: inline-block;
    width: 100%;
}

#footer-left .footer-info .p-middle {
    margin-top:0.5em;   
}

#footer-left .span5 {
    margin-left: 0;
    
}

/* -------------------- Footer: right styling ------------------------- */


#footer-right .collapse {    
    overflow: hidden\9;
    *overflow: hidden;
    _overflow: hidden;    
}

#footer-right {
    margin: 1.5em 2.5em 0 2.5em;
}

#footer-right h1 {
    font-size: 20px;
    font-weight: normal;
    line-height: 30px;
    text-align: right;
    border-bottom: 1px solid #C7C7C7;
    color: #C7C7C7;
}

#footer-right #pref {
    display: inline-block;
    color: #C7C7C7;
    margin: 0;
    padding: 0;
    padding-top:0.5em;
}


#footer-right .btn-link {
    color: #C7C7C7;
    text-shadow: none;
}

#footer-right .btn-link:hover {
    color: #C7C7C7;
    text-shadow: none;
}


#footer-right #location-options {
/*    background-color: #fff;*/
}



/* -------------------- Footer: footer-bottom info styling ------------------------- */

#footer-bottom {
    border-top: 1px solid #C7C7C7;
    max-width: 95%;
    margin-left:2%;
    margin-top: 0.5em;
}

.copyright {
    margin-top: 0.5em;
}

.copyright li {
    display: inline;
    color: #C7C7C7;
}

.copyright li:first-child {
    margin-right: 0.5em;
    padding-right: 0.7em;
    border-right: 1px solid #C7C7C7; 
}







/* styling for the button for navigation for tablets/phones */
.navbar .btn-navbar {
  background-color: #1e82a4;
  background-image: -moz-linear-gradient(top, #00738b, #1e82a4);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00738b), to(#1e82a4));
  background-image: -webkit-linear-gradient(top, #00738b, #1e82a4);
  background-image: -o-linear-gradient(top, #00738b, #1e82a4);
  background-image: linear-gradient(to bottom, #00738b, #1e82a4);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00738b', endColorstr='#ff1e82a4', GradientType=0);
  border-color: #1e82a4 #1e82a4 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #1e82a4;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
}
.navbar .btn-navbar:hover,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
  color: #59c0e1;
  background-color: #1e82a4;
  *background-color: #1e82a4;
}


/* -------------------- Left banner caroussel ------------- */

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: auto;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: auto;
}


@media (max-width: 1549px) and (min-width: 980px) {

/* --- Main Content: Enrollments form access button styling --- */

#absolute-enroll-btn a:hover p,
#absolute-enroll-btn a:hover strong {
    text-decoration: underline;
    color: #fff;
}

#outer-enrollments-form-right-icon {
    width: 8em;
    height: 5.5em;
    position: inherit;
    float: right;
    margin-bottom: 0;
    margin-right: 1.5em;
    margin-top: 2em;
}

#outer-enrollments-form-btn {
    width: 16em;
    height: 5.5em;  
    position: inherit;
    float: right;
    margin-bottom: 1em;
    margin-top: 2em;
    border: 3px solid #95C11E;
}

#inner-enrollments-form-btn {
    background-color: #333333;
    width: 14em;
    height: 4em;
    top:23em;
    bottom:auto;
    right:0px;
    margin-right: 1em;
    left:auto;
    margin-left: 1em;
    border-left: 1px solid #fff;
}

#inner-enrollments-form-btn p {
    font-size: 19px;
    color: #fff;
    padding-left: 0.5em;
}

.sipe-course #inner-enrollments-form-btn p {
    text-align: left;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.5em;
}
    
#inner-enrollments-form-btn strong {
    font-size: 22px;
    color: #fff;
    padding: 0 1em 0 0.5em;
    text-transform: uppercase;
}


}


/* ----------------------------------------------------------------  */
/* ----------------- Styling for smaller sizes --------------------  */    
/* ------------(max-width: 979px) and (min-width: 810px)-----------  */

@media (max-width: 979px) and (min-width: 810px) {
    
    
	.search {
		margin: 1em;
                float:right;
            /* ------- Versão 1 ----------
                position: relative;
		top: 50px;
		float: right;
		padding-right: 1em;
            */
	}
        
        
.available-courses .span4 {
    width: 25em;
}

.available-courses .span5 {
    width: 25em;
}

.available-courses .span9 {
    width: 30em;
}

.available-courses .span10 {
    width: 55em;
}

div#courses-bottom.row-fluid {
    padding-left:0em;
}

/* --- Main Content: Enrollments form access button styling --- */

#absolute-enroll-btn a:hover p,
#absolute-enroll-btn a:hover strong {
    text-decoration: underline;
    color: #fff;
    
}

#outer-enrollments-form-right-icon {
    width: 8em;
    height: 5.5em;
    position: inherit;
    float: right;
    margin-bottom: 0;
    margin-right: 1.5em;
    margin-top: 2em;
}

#outer-enrollments-form-btn {
    width: 16em;
    height: 5.5em;  
    position: inherit;
    float: right;
    margin-bottom: 1em;
    margin-top: 2em;
    border: 3px solid #95C11E;
}

#inner-enrollments-form-btn {
    background-color: #333333;
    width: 14em;
    height: 4em;
    top:23em;
    bottom:auto;
    right:0px;
    margin-right: 1em;
    left:auto;
    margin-left: 1em;
    border-left: 1px solid #fff;
}

#inner-enrollments-form-btn p {
    font-size: 19px;
    color: #fff;
    padding-left: 0.5em;
}

.sipe-course #inner-enrollments-form-btn p {
    text-align: left;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.5em;
}
    
#inner-enrollments-form-btn strong {
    font-size: 22px;
    color: #fff;
    padding: 0 1em 0 0.5em;
    text-transform: uppercase;
}


/* --- Header: Collapsed menu styling --- */


.navbar-inner {
    padding-right: 0;
}

.navbar-inner .container-fluid {
    padding-right: 0;
}

a.btn.btn-navbar:before {
    content : 'Menu';
    margin: 0 0.5em 0.5em 0.5em;
}

a.btn.btn-navbar span {
    alignment: center;
}

.navbar .btn-navbar .icon-bar {
    margin-left: 1em;
}

a.btn.btn-navbar {
    background: none;
    margin-bottom: 0.5em;
    margin-right: 0;
    border: 1px solid #C7C7C7;
}

a.btn.btn-navbar:hover,
a.btn.btn-navbar:active {
    background: none;
    margin-bottom: 0.5em;
    border: 1px solid #fdcf00;
    color:#fdcf00;
    text-decoration: underline;
}


.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
    font-size:16px;
    text-decoration: underline;
    background-color: transparent;
    border: 1px solid #fdcf00;
    color: #fdcf00;
}

.navbar .nav > li > a {
    color: #fff;
    font-size: 16px;
    margin-right: 0.3em;
    border: 1px solid transparent;
    font-weight: 200;
    
}

.navbar .nav > li > a:hover {
    color: #fdcf00;
    font-size: 16px;
    margin-right: 0.3em;
    border-top: 0px solid transparent;
    border: 1px dashed #fdcf00;
    background-color: transparent;
}

ul.nav.menu li {
    line-height: 1em;
}

nav .nav-child a {
    padding: 0;
    padding-left: 2em;
    line-height: 1.5em;
    margin-bottom: 0.2em;
} 

nav .nav-child a:before {
    content: "- ";
}

ul.nav-child.unstyled.small {
    padding-top:0;
}


nav .nav-child {
    position: inherit;   
    display: block;
    float: none;
    padding: 0;
    background-color: transparent;
    border: none;
    border-color: transparent;
    border-bottom: 0px solid transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

nav .nav-child:before {
    border: none;
    border-color: transparent;
    border-bottom: 0px solid transparent;
}

nav .nav-child:after {
    border: none;
    border-color: transparent;
    border-bottom: 0px solid transparent;
}

/* -------------------- Left banner caroussel ------------- */

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: auto;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: auto;
}

/* ------------- Submenu buttons styling ----------------- */

.leftbanner .nav a img {
  
}

.leftbanner .nav a img:after {
    clear: both;
    
}

.leftbanner .nav a span {
    font-size: 12px;
}

.leftbanner .nav li {
/*    background-color: transparent;*/
font-size: 12px;
}

/* ------------- Enroll form styling ----------------- */

#enroll .input-medium {
    width: 26%;
}


}


/* ----------------------------------------------------------------  */
/* ----------------- Styling for smaller sizes --------------------  */    
/* ------------(max-width: 868px) and (min-width: 768px)-----------  */

@media (max-width: 868px) and (min-width: 768px) {

	.search {
		margin: 1em;
                float:right;
            /* ------- Versão 1 ----------
                position: relative;
		top: 50px;
		float: right;
		padding-right: 1em;
            */
	}
        
        
.available-courses .span4 {
    width: 24em;
}

.available-courses .span5 {
    width: 24em;
}

.available-courses .span9 {
    width: 25em;
}

.available-courses .span10 {
    width: 55em;
}


/* --- Main Content: Enrollments form access button styling --- */

#absolute-enroll-btn a:hover p,
#absolute-enroll-btn a:hover strong {
    text-decoration: underline;
    color: #fff;
    
}

#outer-enrollments-form-right-icon {
    width: 8em;
    height: 5.5em;
    position: inherit;
    float: right;
    margin-bottom: 0;
    margin-right: 1.5em;
    margin-top: 2em;
    margin-right: 6em;
    margin-top:0;
}

#outer-enrollments-form-btn {
    width: 16em;
    height: 5.5em;  
    position: inherit;
    float: right;
    margin-bottom: 1em;
    margin-top: 2em;
    border: 3px solid #95C11E;
    margin-right: 1.5em;
}

#inner-enrollments-form-btn {
    background-color: #333333;
    width: 14em;
    height: 4em;
    top:23em;
    bottom:auto;
    right:0px;
    margin-right: 1em;
    left:auto;
    margin-left: 1em;
    border-left: 1px solid #fff;
}

#inner-enrollments-form-btn p {
    font-size: 19px;
    color: #fff;
    padding-left: 0.5em;
}

.sipe-course #inner-enrollments-form-btn p {
    text-align: left;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.5em;
}
    
#inner-enrollments-form-btn strong {
    font-size: 22px;
    color: #fff;
    padding: 0 1em 0 0.5em;
    text-transform: uppercase;
}

/* --- Header: Collapsed menu styling --- */


.navbar-inner {
    padding-right: 0;
}

.navbar-inner .container-fluid {
    padding-right: 0;
}

a.btn.btn-navbar:before {
    content : 'Menu';
    margin: 0 0.5em 0.5em 0.5em;
}

a.btn.btn-navbar span {
    alignment: center;
}

.navbar .btn-navbar .icon-bar {
    margin-left: 1em;
}

a.btn.btn-navbar {
    background: none;
    margin-bottom: 0.5em;
    margin-right: 0;
    border: 1px solid #C7C7C7;
}

a.btn.btn-navbar:hover,
a.btn.btn-navbar:active {
    background: none;
    margin-bottom: 0.5em;
    border: 1px solid #fdcf00;
    color:#fdcf00;
    text-decoration: underline;
}


.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
    font-size:16px;
    text-decoration: underline;
    background-color: transparent;
    border: 1px solid #fdcf00;
    color: #fdcf00;
}

.navbar .nav > li > a {
    color: #fff;
    font-size: 16px;
    margin-right: 0.3em;
    border: 1px solid transparent;
    font-weight: 200;
    
}

.navbar .nav > li > a:hover {
    color: #fdcf00;
    font-size: 16px;
    margin-right: 0.3em;
    border-top: 0px solid transparent;
    border: 1px dashed #fdcf00;
    background-color: transparent;
}

ul.nav.menu li {
    line-height: 1em;
}

nav .nav-child a {
    padding: 0;
    padding-left: 2em;
    line-height: 1.5em;
    margin-bottom: 0.2em;
} 

nav .nav-child a:before {
    content: "- ";
}

ul.nav-child.unstyled.small {
    padding-top:0;
}


nav .nav-child {
    position: inherit;   
    display: block;
    float: none;
    padding: 0;
    background-color: transparent;
    border: none;
    border-color: transparent;
    border-bottom: 0px solid transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

nav .nav-child:before {
    border: none;
    border-color: transparent;
    border-bottom: 0px solid transparent;
}

nav .nav-child:after {
    border: none;
    border-color: transparent;
    border-bottom: 0px solid transparent;
}

/* -------------------- Left banner caroussel ------------- */

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: auto;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: auto;
}

/* ------------- Submenu buttons styling ----------------- */

.leftbanner .nav a img:after {
    clear: both;    
}

.leftbanner .nav a span {
    font-size: 11px;
}

/* ------------- Enroll form styling ----------------- */

#enroll .input-medium {
    width: 34%;
}

#enroll .input-mini {
    width: 12%;
}   




}

/* ----------------------------------------------------------------  */
/* ----------------- Styling for smaller sizes --------------------  */    
/* -----------(max-width: 767px) and (min-width: 687px)------------  */

@media (max-width: 767px) and (min-width: 687px)  {

    body header .row-fluid .span3 img {
        width: 30%;
        margin-top:1.5em;
        margin-left: 1.5em;
        margin-bottom: -7em;
    }    
    
    header .search {
        margin-right: 1.5em;
        margin-bottom: 0;
    }
    
    
    .available-courses .span4 {
        width: 20em;
        float: left;
    }

    .available-courses .span5 {
        width: 20em;
        float: left;
    }

    .available-courses .span9 {
        width: 25em;
        float: left;
    }

    .available-courses .span10 {
        width: 48em;
    }

    /* --- Main Content: Enrollments form access button styling --- */

    #absolute-enroll-btn a:hover p,
    #absolute-enroll-btn a:hover strong {
        text-decoration: underline;
        color: #fff;

    }

    #outer-enrollments-form-right-icon {
        width: 8em;
        height: 5.5em;
        position: inherit;
        float: right;
        margin-bottom: 0;
        margin-right: 1.5em;
        margin-top: 1em;
        margin-right: 6em;
    }

    #outer-enrollments-form-btn {
        width: 16em;
        height: 5.5em;  
        position: inherit;
        float: right;
        margin-bottom: 1em;
        margin-top: 1em;
        border: 3px solid #95C11E;
        margin-right: 1.5em;
    }

    #inner-enrollments-form-btn {
        background-color: #333333;
        width: 14em;
        height: 4em;
        top:23em;
        bottom:auto;
        right:0px;
        margin-right: 1em;
        left:auto;
        margin-left: 1em;
        border-left: 1px solid #fff;
    }

    #inner-enrollments-form-btn p {
        font-size: 19px;
        color: #fff;
        padding-left: 0.5em;
    }

    .sipe-course #inner-enrollments-form-btn p {
        text-align: left;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0.5em;
    }

    #inner-enrollments-form-btn strong {
        font-size: 22px;
        color: #fff;
        padding: 0 1em 0 0.5em;
        text-transform: uppercase;
    }

    /* --- Header: Collapsed menu styling --- */


    .navbar-inner {
        padding-right: 0;
        margin-right: 1.5em;
        margin-left: 1.5em;
    }

    .navbar-inner .container-fluid {
        padding-right: 0;
    }

    a.btn.btn-navbar:before {
        content : 'Menu';
        margin: 0 0.5em 0.5em 0.5em;
    }

    a.btn.btn-navbar span {
        
    }

    .navbar .btn-navbar .icon-bar {
        margin-left: 1em;
    }

    a.btn.btn-navbar {
        background: none;
        margin-top: 1em;
        margin-right: 0;
        margin-bottom: 1em;
        border: 1px solid #C7C7C7;
        clear:both;
    }

    a.btn.btn-navbar:hover,
    a.btn.btn-navbar:active {
        background: none;
        margin-bottom: 1em;
        border: 1px solid #fdcf00;
        color:#fdcf00;
        text-decoration: underline;
    }


    .navbar .nav > .active > a,
    .navbar .nav > .active > a:hover,
    .navbar .nav > .active > a:focus {
        font-size:16px;
        text-decoration: underline;
        background-color: transparent;
        border: 1px solid #fdcf00;
        color: #fdcf00;
    }

    .navbar .nav > li > a {
        color: #fff;
        font-size: 16px;
        margin-right: 0.3em;
        border: 1px solid transparent;
        font-weight: 200;

    }

    .navbar .nav > li > a:hover {
        color: #fdcf00;
        font-size: 16px;
        margin-right: 0.3em;
        border-top: 0px solid transparent;
        border: 1px dashed #fdcf00;
        background-color: transparent;
    }

    ul.nav.menu li {
        line-height: 1em;
    }

    nav .nav-child a {
        padding: 0;
        padding-left: 2em;
        line-height: 1.5em;
        margin-bottom: 0.2em;
    } 

    nav .nav-child a:before {
        content: "- ";
    }

    ul.nav-child.unstyled.small {
        padding-top:0;
    }


    nav .nav-child {
        position: inherit;   
        display: block;
        float: none;
        padding: 0;
        background-color: transparent;
        border: none;
        border-color: transparent;
        border-bottom: 0px solid transparent;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    nav .nav-child:before {
        border: none;
        border-color: transparent;
        border-bottom: 0px solid transparent;
    }

    nav .nav-child:after {
        border: none;
        border-color: transparent;
        border-bottom: 0px solid transparent;
    }

    /* -------------------- Left banner caroussel ------------- */

    .jcarousel-skin-tango .jcarousel-container-horizontal {
        display:none;
    }

    .jcarousel-skin-tango .jcarousel-clip-horizontal {
        width: auto;
    }

    /* ------------- Submenu buttons styling ----------------- */

    .leftbanner {
        display: none;
    }
    
    ul.nav.menu {
        margin-right: 1.5em;
        margin-left: 0.75em;
    }
    
    .span4 div.moduletable {
        margin-right: 1.5em;
        margin-left: 1.5em;
    }
    
    /* ------------- Enroll form styling ----------------- */

    #enroll .input-medium {
        width: 34%;
    }

    #enroll .input-mini {
        width: 12%;
    }   


    
    
    
    
}


/* ----------------------------------------------------------------  */
/* ----------------- Styling for smaller sizes --------------------  */    
/* -----------(max-width: 686px) and (min-width: 504px)------------  */

@media (max-width: 686px) and (min-width: 504px)  {

    body header .row-fluid .span3 img {
        width: 30%;
        margin-top:1.5em;
        margin-left: 1.5em;
        margin-bottom: -7em;
    }    
    
    header .search {
        margin-right: 1.5em;
        margin-bottom: 0;
    }
    
    
    .available-courses .span4 {
        width: 20em;
        float: left;
    }

    .available-courses .span5 {
        width: 20em;
        float: left;
    }

    .available-courses .span9 {
        width: 14em;
        float: left;
    }

    .available-courses .span10 {
        width: 41em;    
        max-width: 100%;
    }

    /* --- Main Content: Enrollments form access button styling --- */

    #absolute-enroll-btn a:hover p,
    #absolute-enroll-btn a:hover strong {
        text-decoration: underline;
        color: #fff;

    }

    #outer-enrollments-form-right-icon {
        width: 8em;
        height: 5.5em;
        position: inherit;
        float: right;
        margin-bottom: 0;
        margin-right: 1.5em;
        margin-top: 1em;
        margin-right: 6em;
    }

    #outer-enrollments-form-btn {
        width: 16em;
        height: 5.5em;  
        position: inherit;
        float: right;
        margin-bottom: 1em;
        margin-top: 1em;
        border: 3px solid #95C11E;
        margin-right: 1.5em;
    }

    #inner-enrollments-form-btn {
        background-color: #333333;
        width: 14em;
        height: 4em;
        top:23em;
        bottom:auto;
        right:0px;
        margin-right: 1em;
        left:auto;
        margin-left: 1em;
        border-left: 1px solid #fff;
    }

    #inner-enrollments-form-btn p {
        font-size: 19px;
        color: #fff;
        padding-left: 0.5em;
    }

    .sipe-course #inner-enrollments-form-btn p {
        text-align: left;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0.5em;
    }

    #inner-enrollments-form-btn strong {
        font-size: 22px;
        color: #fff;
        padding: 0 1em 0 0.5em;
        text-transform: uppercase;
    }

    /* --- Header: Collapsed menu styling --- */


    .navbar-inner {
        padding-right: 0;
        margin-right: 1.5em;
        margin-left: 1.5em;
    }

    .navbar-inner .container-fluid {
        padding-right: 0;
    }

    a.btn.btn-navbar:before {
        content : 'Menu';
        margin: 0 0.5em 0.5em 0.5em;
    }

    a.btn.btn-navbar span {
        
    }

    .navbar .btn-navbar .icon-bar {
        margin-left: 1em;
    }

    a.btn.btn-navbar {
        background: none;
        margin-top: 1em;
        margin-right: 0;
        margin-bottom: 1em;
        border: 1px solid #C7C7C7;
        clear:both;
    }

    a.btn.btn-navbar:hover,
    a.btn.btn-navbar:active {
        background: none;
        margin-bottom: 1em;
        border: 1px solid #fdcf00;
        color:#fdcf00;
        text-decoration: underline;
    }


    .navbar .nav > .active > a,
    .navbar .nav > .active > a:hover,
    .navbar .nav > .active > a:focus {
        font-size:16px;
        text-decoration: underline;
        background-color: transparent;
        border: 1px solid #fdcf00;
        color: #fdcf00;
    }

    .navbar .nav > li > a {
        color: #fff;
        font-size: 16px;
        margin-right: 0.3em;
        border: 1px solid transparent;
        font-weight: 200;

    }

    .navbar .nav > li > a:hover {
        color: #fdcf00;
        font-size: 16px;
        margin-right: 0.3em;
        border-top: 0px solid transparent;
        border: 1px dashed #fdcf00;
        background-color: transparent;
    }

    ul.nav.menu li {
        line-height: 1em;
    }

    nav .nav-child a {
        padding: 0;
        padding-left: 2em;
        line-height: 1.5em;
        margin-bottom: 0.2em;
    } 

    nav .nav-child a:before {
        content: "- ";
    }

    ul.nav-child.unstyled.small {
        padding-top:0;
    }


    nav .nav-child {
        position: inherit;   
        display: block;
        float: none;
        padding: 0;
        background-color: transparent;
        border: none;
        border-color: transparent;
        border-bottom: 0px solid transparent;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    nav .nav-child:before {
        border: none;
        border-color: transparent;
        border-bottom: 0px solid transparent;
    }

    nav .nav-child:after {
        border: none;
        border-color: transparent;
        border-bottom: 0px solid transparent;
    }

    /* -------------------- Left banner caroussel ------------- */

    .jcarousel-skin-tango .jcarousel-container-horizontal {
        display:none;
    }

    .jcarousel-skin-tango .jcarousel-clip-horizontal {
        width: auto;
    }

    /* ------------- Submenu buttons styling ----------------- */

    .leftbanner {
        display: none;
    }
    
    ul.nav.menu {
        margin-right: 1.5em;
        margin-left: 0.75em;
    }
    
    .span4 div.moduletable {
        margin-right: 1.5em;
        margin-left: 1.5em;
    }
    
    /* ------------- Enroll form styling ----------------- */

    #enroll .input-medium {
        width: 50%;
    }

    #enroll .input-mini {
        width: 17%;
    }   
    
    
    
}



/* ----------------------------------------------------------------  */
/* ----------------- Styling for smaller sizes --------------------  */    
/* -----------------------(max-width: 503px)-----------------------  */

@media (max-width: 503px)  {
    
    body header .row-fluid .span3 img {
        width: 30%;
        margin-top:1.5em;
        margin-left: 1.5em;
        margin-bottom: -7em;
    }    
    
    header .search {
        margin-right: 1.5em;
        margin-bottom: 0;
    }
    
    
    .available-courses .span4 {
        width: 21em;
        float: left;
        max-width: 100%;
    }

    .available-courses .span5 {
        width: 21em;
        float: left;
        max-width: 100%;
    }

    .available-courses .span9 {
        width: 14em;
        float: left;    
    }

    .available-courses .custom-span10 {
        width: 21em;
        max-width: 100%;
    }
    
        
    .page-header h1 {
        height: auto;
        text-transform: none;
        font-weight: bold;
    }

    /* --- Main Content: Enrollments form access button styling --- */

    #absolute-enroll-btn a:hover p,
    #absolute-enroll-btn a:hover strong {
        text-decoration: underline;
        color: #fff;

    }

    #outer-enrollments-form-right-icon {
        width: 8em;
        height: 5.5em;
        position: inherit;
        float: right;
        margin-bottom: 0;
        margin-right: 1.5em;
        margin-top: 1em;
        margin-right: 6em;
    }

    #outer-enrollments-form-btn {
        width: 16em;
        height: 5.5em;  
        position: inherit;
        float: right;
        margin-bottom: 1em;
        margin-top: 1em;
        border: 3px solid #95C11E;
        margin-right: 1.5em;
    }

    #inner-enrollments-form-btn {
        background-color: #333333;
        width: 14em;
        height: 4em;
        top:23em;
        bottom:auto;
        right:0px;
        margin-right: 1em;
        left:auto;
        margin-left: 1em;
        border-left: 1px solid #fff;
    }

    #inner-enrollments-form-btn p {
        font-size: 19px;
        color: #fff;
        padding-left: 0.5em;
    }

    .sipe-course #inner-enrollments-form-btn p {
        text-align: left;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0.5em;
    }

    #inner-enrollments-form-btn strong {
        font-size: 22px;
        color: #fff;
        padding: 0 1em 0 0.5em;
        text-transform: uppercase;
    }

    /* --- Header: Collapsed menu styling --- */


    .navbar-inner {
        padding-right: 0;
        margin-right: 1.5em;
        margin-left: 1.5em;
    }

    .navbar-inner .container-fluid {
        padding-right: 0;
    }

    a.btn.btn-navbar:before {
        content : 'Menu';
        margin: 0 0.5em 0.5em 0.5em;
    }

    a.btn.btn-navbar span {
        
    }

    .navbar .btn-navbar .icon-bar {
        margin-left: 1em;
    }

    a.btn.btn-navbar {
        background: none;
        margin-top: 1em;
        margin-right: 0;
        margin-bottom: 1em;
        border: 1px solid #C7C7C7;
        clear:both;
    }

    a.btn.btn-navbar:hover,
    a.btn.btn-navbar:active {
        background: none;
        margin-bottom: 1em;
        border: 1px solid #fdcf00;
        color:#fdcf00;
        text-decoration: underline;
    }


    .navbar .nav > .active > a,
    .navbar .nav > .active > a:hover,
    .navbar .nav > .active > a:focus {
        font-size:16px;
        text-decoration: underline;
        background-color: transparent;
        border: 1px solid #fdcf00;
        color: #fdcf00;
    }

    .navbar .nav > li > a {
        color: #fff;
        font-size: 16px;
        margin-right: 0.3em;
        border: 1px solid transparent;
        font-weight: 200;

    }

    .navbar .nav > li > a:hover {
        color: #fdcf00;
        font-size: 16px;
        margin-right: 0.3em;
        border-top: 0px solid transparent;
        border: 1px dashed #fdcf00;
        background-color: transparent;
    }

    ul.nav.menu li {
        line-height: 1em;
    }

    nav .nav-child a {
        padding: 0;
        padding-left: 2em;
        line-height: 1.5em;
        margin-bottom: 0.2em;
    } 

    nav .nav-child a:before {
        content: "- ";
    }

    ul.nav-child.unstyled.small {
        padding-top:0;
    }


    nav .nav-child {
        position: inherit;   
        display: block;
        float: none;
        padding: 0;
        background-color: transparent;
        border: none;
        border-color: transparent;
        border-bottom: 0px solid transparent;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    nav .nav-child:before {
        border: none;
        border-color: transparent;
        border-bottom: 0px solid transparent;
    }

    nav .nav-child:after {
        border: none;
        border-color: transparent;
        border-bottom: 0px solid transparent;
    }

    /* -------------------- Left banner caroussel ------------- */

    .jcarousel-skin-tango .jcarousel-container-horizontal {
        display:none;
    }

    .jcarousel-skin-tango .jcarousel-clip-horizontal {
        width: auto;
    }

    /* ------------- Submenu buttons styling ----------------- */

    .leftbanner {
        display: none;
    }
    
    ul.nav.menu {
        margin-right: 1.5em;
        margin-left: 0.75em;
    }
    
    .span4 div.moduletable {
        margin-right: 1.5em;
        margin-left: 1.5em;
    }
    
    /* ------------- Details button styling ----------------- */
    
   div#button.span2.pull-right {
        margin-right: 0.2em;
    }
    
    /* ------------- Enroll form styling ----------------- */
    
    #enroll .input-medium {
        width: 80%;
    }

    #enroll .input-mini {
        width: 30%;
    } 
    
    #enroll #submit-button {
        margin-left: 1em;
        margin-right: 0em;
        float: right;    
    }
    
}
    
 /* ----------------------------------------------------------------  */
/* ----------------- Styling for smaller sizes --------------------  */    
/* -----------------------(max-width: 503px)-----------------------  */

@media (max-width: 337px)  {
    

    h1#enroll {
        margin-left: 0;
        margin-right: 0;
    }
    
    form#enroll {
        margin-left: 0;
        margin-right: 0;
    }
    
    body header .row-fluid .span3 img {
        width: 30%;
        margin-top:1.5em;
        margin-left: 1.5em;
        margin-bottom: -7em;
    }    
    
    header .search {
        margin-right: 1.5em;
        margin-bottom: 0;
    }
    
    
    .available-courses .span4 {
        width: 21em;
        float: left;
        max-width: 100%;
    }

    .available-courses .span5 {
        width: 21em;
        float: left;
        max-width: 100%;
    }

    .available-courses .span9 {
        width: 14em;
        float: left;    
    }

    .available-courses .custom-span10 {
        width: 21em;
        max-width: 100%;
    }
    
        
    .page-header h1 {
        height: auto;
        text-transform: none;
        font-weight: bold;
    }

    /* --- Main Content: Enrollments form access button styling --- */

    #absolute-enroll-btn a:hover p,
    #absolute-enroll-btn a:hover strong {
        text-decoration: underline;
        color: #fff;

    }

    #outer-enrollments-form-right-icon {
        width: 8em;
        height: 5.5em;
        position: inherit;
        float: right;
        margin-bottom: 0;
        margin-right: 1.5em;
        margin-top: 1em;
        margin-right: 6em;
    }

    #outer-enrollments-form-btn {
        width: 16em;
        height: 5.5em;  
        position: inherit;
        float: right;
        margin-bottom: 1em;
        margin-top: 1em;
        border: 3px solid #95C11E;
        margin-right: 1.5em;
    }

    #inner-enrollments-form-btn {
        background-color: #333333;
        width: 14em;
        height: 4em;
        top:23em;
        bottom:auto;
        right:0px;
        margin-right: 1em;
        left:auto;
        margin-left: 1em;
        border-left: 1px solid #fff;
    }

    #inner-enrollments-form-btn p {
        font-size: 19px;
        color: #fff;
        padding-left: 0.5em;
    }

    .sipe-course #inner-enrollments-form-btn p {
        text-align: left;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0.5em;
    }

    #inner-enrollments-form-btn strong {
        font-size: 22px;
        color: #fff;
        padding: 0 1em 0 0.5em;
        text-transform: uppercase;
    }

    /* --- Header: Collapsed menu styling --- */


    .navbar-inner {
        padding-right: 0;
        margin-right: 1.5em;
        margin-left: 1.5em;
    }

    .navbar-inner .container-fluid {
        padding-right: 0;
    }

    a.btn.btn-navbar:before {
        content : 'Menu';
        margin: 0 0.5em 0.5em 0.5em;
    }

    a.btn.btn-navbar span {
        
    }

    .navbar .btn-navbar .icon-bar {
        margin-left: 1em;
    }

    a.btn.btn-navbar {
        background: none;
        margin-top: 1em;
        margin-right: 0;
        margin-bottom: 1em;
        border: 1px solid #C7C7C7;
        clear:both;
    }

    a.btn.btn-navbar:hover,
    a.btn.btn-navbar:active {
        background: none;
        margin-bottom: 1em;
        border: 1px solid #fdcf00;
        color:#fdcf00;
        text-decoration: underline;
    }


    .navbar .nav > .active > a,
    .navbar .nav > .active > a:hover,
    .navbar .nav > .active > a:focus {
        font-size:16px;
        text-decoration: underline;
        background-color: transparent;
        border: 1px solid #fdcf00;
        color: #fdcf00;
    }

    .navbar .nav > li > a {
        color: #fff;
        font-size: 16px;
        margin-right: 0.3em;
        border: 1px solid transparent;
        font-weight: 200;

    }

    .navbar .nav > li > a:hover {
        color: #fdcf00;
        font-size: 16px;
        margin-right: 0.3em;
        border-top: 0px solid transparent;
        border: 1px dashed #fdcf00;
        background-color: transparent;
    }

    ul.nav.menu li {
        line-height: 1em;
    }

    nav .nav-child a {
        padding: 0;
        padding-left: 2em;
        line-height: 1.5em;
        margin-bottom: 0.2em;
    } 

    nav .nav-child a:before {
        content: "- ";
    }

    ul.nav-child.unstyled.small {
        padding-top:0;
    }


    nav .nav-child {
        position: inherit;   
        display: block;
        float: none;
        padding: 0;
        background-color: transparent;
        border: none;
        border-color: transparent;
        border-bottom: 0px solid transparent;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    nav .nav-child:before {
        border: none;
        border-color: transparent;
        border-bottom: 0px solid transparent;
    }

    nav .nav-child:after {
        border: none;
        border-color: transparent;
        border-bottom: 0px solid transparent;
    }

    /* -------------------- Left banner caroussel ------------- */

    .jcarousel-skin-tango .jcarousel-container-horizontal {
        display:none;
    }

    .jcarousel-skin-tango .jcarousel-clip-horizontal {
        width: auto;
    }

    /* ------------- Submenu buttons styling ----------------- */

    .leftbanner {
        display: none;
    }
    
    ul.nav.menu {
        margin-right: 1.5em;
        margin-left: 0.75em;
    }
    
    .span4 div.moduletable {
        margin-right: 1.5em;
        margin-left: 1.5em;
    }
    
    /* ------------- Details button styling ----------------- */
    
   div#button.span2.pull-right {
        margin-right: 0.2em;
    }
    
    /* ------------- Enroll form styling ----------------- */
    
    #enroll .input-large {
        width: 96%;
    }
    
    #enroll .input-medium {
        width: 80%;
    }

    #enroll .input-mini {
        width: 30%;
    } 
    
    #enroll #submit-button {
        margin-left: 1em;
        margin-right: 0em;
        float: right;    
    }
    
    #mod-search-searchword {
        width: 7em;
    }
    
    
    
}