.loader {
    position: relative;
    width: 75px;
    height: 100px;
    background-repeat: no-repeat;
    background-image: linear-gradient(#DDD 50px, transparent 0), linear-gradient(#DDD 50px, transparent 0), linear-gradient(#DDD 50px, transparent 0), linear-gradient(#DDD 50px, transparent 0), linear-gradient(#DDD 50px, transparent 0);
    background-size: 8px 100%;
    background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;
    animation: pillerPushUp 4s linear infinite;
}

    .loader:after {
        content: '';
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 10px;
        height: 10px;
        background: #de3500;
        border-radius: 50%;
        animation: ballStepUp 4s linear infinite;
    }

@keyframes pillerPushUp {
    0%, 40%, 100% {
        background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px
    }

    50%, 90% {
        background-position: 0px 50px, 15px 58px, 30px 66px, 45px 78px, 60px 90px
    }
}

@keyframes ballStepUp {
    0% {
        transform: translate(0, 0)
    }

    5% {
        transform: translate(8px, -14px)
    }

    10% {
        transform: translate(15px, -10px)
    }

    17% {
        transform: translate(23px, -24px)
    }

    20% {
        transform: translate(30px, -20px)
    }

    27% {
        transform: translate(38px, -34px)
    }

    30% {
        transform: translate(45px, -30px)
    }

    37% {
        transform: translate(53px, -44px)
    }

    40% {
        transform: translate(60px, -40px)
    }

    50% {
        transform: translate(60px, 0)
    }

    57% {
        transform: translate(53px, -14px)
    }

    60% {
        transform: translate(45px, -10px)
    }

    67% {
        transform: translate(37px, -24px)
    }

    70% {
        transform: translate(30px, -20px)
    }

    77% {
        transform: translate(22px, -34px)
    }

    80% {
        transform: translate(15px, -30px)
    }

    87% {
        transform: translate(7px, -44px)
    }

    90% {
        transform: translate(0, -40px)
    }

    100% {
        transform: translate(0, 0);
    }
}
    


.divaccapo {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: "";
    clear: both;
    height: 0;
    width: 0;
}

.divaccapo10 {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: "";
    clear: both;
    height: 10px;
    width: 0px;
}

.divaccapo20 {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: "";
    clear: both;
    height: 20px;
    width: 0px;
}
.custom-textbox {
    height: 80px;
    width: 300px;
}
/* PRESENZE layout
----------------------------------------------------------*/
/* Customize the label (the container) */
/*.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}*/

    /* Hide the browser's default radio button */
    /*.container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }*/

/* Create a custom radio button */
/*.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}*/

/* On mouse-over, add a grey background color */
/*.container:hover input ~ .checkmark {
    background-color: #ccc;
}*/

/* When the radio button is checked, add a blue background */
/*.container input:checked ~ .checkmark {
    background-color: #2196F3;
}*/

/* Create the indicator (the dot/circle - hidden when not checked) */
/*.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}*/

/* Show the indicator (dot/circle) when checked */
/*.container input:checked ~ .checkmark:after {
    display: block;
}*/

/* Style the indicator (dot/circle) */
/*.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}*/

.CursorPointer {
    cursor: pointer;
}

.ordinariosw {
    background-color: lightblue;
    width: 19px;
    height: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px dashed gray;
    float: left;
}

.straordinariosw {
    background-color: blue;
    width: 19px;
    height: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px dashed gray;
    float: left;
}

.menu-selected {
    height: 40px;
    float: left;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-top: 8px;
    padding-left: 8px;
    border-top: lightgray outset 1px;
    border-left-color: lightgray;
    border-left-style: outset;
    border-left-width: 1px;
    border-right-color: lightgray;
    border-right-style: outset;
    border-right-width: 1px;
    background-color: white;
}

.menu-unselected:hover {
    cursor: pointer;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-top: 8px;
    padding-left: 8px;
    border-top: lightgray outset 1px;
    border-left-color: lightgray;
    border-left-style: outset;
    border-left-width: 1px;
    border-right-color: lightgray;
    border-right-style: outset;
    border-right-width: 1px;
}

.menu-unselected {
    height: 40px;
    float: left;
    padding-top: 8px;
    padding-left: 8px;
    border-bottom: lightgray outset 1px;
}

.nascondi_scopri {
    font-family: Segoe UI;
    font-size: 0.8em;
    color: blue;
    font-weight: bold;
    margin-left: 5px;
    float: left;
    width: 30px;
    margin-top: 3px
}

    .nascondi_scopri:hover {
        cursor: pointer;
    }

.hidden > div {
    display: none;
}

.visible > div {
    display: block;
}


/* PRESENZE layout
----------------------------------------------------------*/
.TT460, .TT460i, .TableTitle, .TableOre, .TT720, .TT720i, .TT820, .TT820i, .TT500, .TT500i, .TT100, .TT80, .TT70, .TT130, .TT130i, .TT650, .TT650i, .TT700, .TT700i, .TT100i, .TT80i, .TT70i, .TT280, .TT280i, .TT960, .TT960i, .TT200, .TT200i {
    box-sizing: content-box;
    float: left;
    height: 35px;
    font: 16px Segoe UI;
    color: GrayText;
    text-align: center;
    padding-top: 5px;
    border-left: 1px solid;
    border-top: 1px solid;
    border-color: darkgray;
    overflow: hidden;
    padding-left: 0px;
}

.TT200, .TT200i {
    width: 200px;
}

.TT500, .TT500i {
    width: 500px;
}

.TT650, .TT650i {
    width: 650px;
}

.TT820, .TT820i {
    width: 820px;
}

.TT960, .TT960i {
    width: 960px;
}

.TT700, .TT700i {
    width: 650px;
}

.TT720, .TT720i {
    width: 720px;
}

.TT460, .TT460i {
    width: 460px;
}

.TT100, .TT100i {
    width: 100px;
}

.TT80, .TT80i {
    width: 80px;
}

.TT70, .TT70i {
    width: 70px;
}

.TT130, .TT130i {
    width: 130px;
}

.TT280, .TT280i {
    width: 320px;
}

.TT820i, .TT700i, .TT720i, .TT500i, .TT100i, .TT80i, .TT70i, .TT130i, .TT280i, .TT460i, .TT650i, .TT960i, .TT200i {
    background-color: #C24501;
    color: white;
    display: block;
}




.mycombo {
    width: 250px;
    height: 30px;
}

#DescrAttivit_ {
    width: 600px;
    height: 30px;
}

#T_PianificazioneNew_Ore, #T_PianificazioneNew_Importo, #T_PianificazioneNew_CostoOrario {
    width: 100px !important;
}

.titolo3 {
    /*box-sizing: border-box;*/
    color: rgb(51, 51, 51);
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 25px;
    /*font-weight: 500;*/
    height: 40px;
    /*line-height: 26.3999996185303px;*/
    margin-bottom: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    width: 100%;
}

.titolo4 {
    /*box-sizing: border-box;*/
    color: rgb(51, 51, 51);
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 21px;
    /*font-weight: 500;*/
    height: 35px;
    /*line-height: 26.3999996185303px;*/
    margin-bottom: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    width: 100%;
}

.titolo5 {
    /*box-sizing: border-box;*/
    color: #990000;
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 18px;
    /*font-weight: 500;*/
    height: 25px;
    /*line-height: 26.3999996185303px;*/
    margin-bottom: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    width: 100%;
}

.titolo6 {
    /*box-sizing: border-box;*/
    color: rgb(51, 51, 51);
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-decoration: wavy;
    font-size: 16px;
    /*font-weight: 500;*/
    height: 40px;
    /*line-height: 26.3999996185303px;*/
    margin-bottom: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    width: 100%;
}

/* MODAL WINDOWS WITH HTML + CSS */
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

    .modalDialog:target {
        opacity: 1;
        pointer-events: visible;
    }

    .modalDialog > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

    .close:hover {
        background: #00d9ff;
    }

/* MODAL WINDOWS WITH JQUERY UI*/
#modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: .50;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    z-index: 1000;
}

#modal-content {
    background-color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0 0 20px 0 #222;
    -webkit-box-shadow: 0 0 20px 0 #222;
    -moz-box-shadow: 0 0 20px 0 #222;
    display: none;
    height: 420px;
    left: calc(50% - 225px);
    margin: 0 0 0 0;
    padding: 10px;
    position: absolute;
    top: 0px;
    max-height: 420px;
    min-height: 42px;
    width: 600px;
    z-index: 1000;
}

#modal-background-note {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: .50;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    z-index: 1000;
}



#modal-content-note {
    background-color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0 0 20px 0 #222;
    -webkit-box-shadow: 0 0 20px 0 #222;
    -moz-box-shadow: 0 0 20px 0 #222;
    display: none;
    height: auto;
    left: 50%;
    margin: -120px 0 0 -160px;
    padding: 10px;
    position: fixed;
    top: 50%;
    min-height: 200px;
    min-width: 300px;
    width: auto;
    z-index: 1000;
}

    #modal-background.active, #modal-content.active, #modal-content-note.active, #modal-background-note.active {
        display: block;
    }

​ .uppercase {
    text-transform: uppercase;
}

.fumetto {
    width: 235px;
    height: 81px;
    background-image: url(../Images/info.png);
    background-repeat: no-repeat;
}

.orario-label {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label0 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
    background-image: url(../Images/orario_0030.png);
    background-repeat: no-repeat;
}

.orario-label1 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
    background-image: url(../Images/orario_0100.png);
    background-repeat: no-repeat;
}

.orario-label2 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label3 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
    background-image: url(../Images/orario_0200.png);
    background-repeat: no-repeat;
}

.orario-label4 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label5 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
    background-image: url(../Images/orario_0300.png);
    background-repeat: no-repeat;
}

.orario-label6 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label7 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
    background-image: url(../Images/orario_0400.png);
    background-repeat: no-repeat;
}

.orario-label8 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label9 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
    background-image: url(../Images/orario_0500.png);
    background-repeat: no-repeat;
}

.orario-label10 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label11 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
    background-image: url(../Images/orario_0600.png);
    background-repeat: no-repeat;
}

.orario-label12 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label13 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
    background-image: url(../Images/orario_0700.png);
    background-repeat: no-repeat;
}

.orario-label14 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label15 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
    background-image: url(../Images/orario_0800.png);
    background-repeat: no-repeat;
}

.orario-label16 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label17 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
    background-image: url(../Images/orario_0900.png);
    background-repeat: no-repeat;
}

.orario-label18 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label19 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
    background-image: url(../Images/orario_1000.png);
    background-repeat: no-repeat;
}

.orario-label20 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label21 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
    background-image: url(../Images/orario_1100.png);
    background-repeat: no-repeat;
}

.orario-label22 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label23 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
    background-image: url(../Images/orario_1200.png);
    background-repeat: no-repeat;
}

.orario-label24 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label25 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label26 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}

.orario-label27 {
    width: 19px;
    height: 40px;
    position: relative;
    float: left;
    border-right: 1px dashed gray;
}







.orario-label-empty {
    width: 20px;
    height: 40px;
    position: relative;
    float: left;
}



.empty {
    background-color: white;
    width: 19px;
    height: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px dashed gray;
    float: left;
}

.ordinario {
    background-color: lightblue;
    width: 19px;
    height: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px dashed gray;
    float: left;
}

.ordinario_notturno {
    background-color: #33CCFF;
    width: 19px;
    height: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px dashed gray;
    float: left;
}

.ordinario_trasferta {
    background-color: #33CCFF;
    width: 19px;
    height: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px dashed gray;
    float: left;
}

.reperibilità {
    background-color: lightgreen;
    width: 19px;
    height: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px dashed gray;
    float: left;
}

.straordinario {
    background-color: blue;
    width: 19px;
    height: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px dashed gray;
    float: left;
}


.permesso {
    background-color: yellow;
    width: 19px;
    height: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px dashed gray;
    float: left;
}

.malattia {
    background-color: red;
    width: 20px;
    height: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px dashed gray;
    float: left;
}

.ferie {
    background-color: orange;
    width: 20px;
    height: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px dashed gray;
    float: left;
}

.cig {
    background-color: gray;
    width: 20px;
    height: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px dashed gray;
    float: left;
}

.straordinario_viaggio {
    background-color: darkblue;
    width: 19px;
    height: 20px;
    position: relative;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px dashed gray;
    float: left;
}

.display-label,
.editor-label {
    margin: 1em 0 0 0;
}

.display-field,
.editor-field {
    width: 350px;
    font-size: 0.9em;
    position: relative;
    float: left;
}

.display-subfield {
    margin-left: 60px;
    font-size: 0.7em;
    font: bolder;
    position: relative;
    float: left;
}

.display-titlefield {
    width: 60px;
    margin: 0em 0 0 0;
    font-size: 1.1em;
    font: bolder;
    position: relative;
    float: left;
}





.fakeLink {
    font-size: medium;
    border: 0px;
    background-color: transparent;
    color: #404040;
    height: 40px;
    width: 200px;
    margin-left: 0px;
    margin-top: 0px;
    padding: 0px;
}



.TableOre {
    box-sizing: content-box;
    float: left;
    height: 35px;
    font: 16px Segoe UI;
    color: GrayText;
    text-align: center;
    padding-top: 5px;
    border-left: 1px solid;
    border-top: 1px solid;
    border-color: darkgray;
    overflow: hidden;
    padding-left: 0px;
}

.TableOreTitle {
    background-color: #d57100;
    color: white;
    display: block;
}






/* PRESENZE layout
------------------.Col-descr {width:380px;}----------------------------------------

@media print {

body a:link:after{content: "";}
  
body a:link, body a:visited { text-decoration:none; } 



#ultimaRiga {width:280px;}

#menu, #login, #advertising, .Col-uno, .Col-due { display:none; }

body { background-image: none; } 

}*/

  
  body a:link, body a:visited { 


      text-decoration:none; 


      /*  annullare gli altri stili 


         inseriti nel nostro CSS */ 


   } 

   #nav, #advertising { display:none; } 


   body { background-image: none; } 



#modal-background-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        opacity: .50;
        -webkit-opacity: .5;
        -moz-opacity: .5;
        filter: alpha(opacity=50);
        z-index: 1000;
    }
#modal-content-menu {
        background-color: white;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        box-shadow: 0 0 20px 0 #222;
        -webkit-box-shadow: 0 0 20px 0 #222;
        -moz-box-shadow: 0 0 20px 0 #222;
        display: none;
        height: 420px;
        /*left: calc(50% - 225px);*/
        left: 100px;
        margin: 0 0 0 0;
        padding: 10px;
        position: absolute;
        /*top: 0px;*/
        max-height: 200px;
        min-height: 42px;
        width: 200px;
        z-index: 1000;
    }

#modal-background-menu.active, #modal-content-menu.active {
        display: block;
    }​



html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: 13px;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    
}

a {
    color: none;
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: none;
}

    a:link, a:visited,
    a:active, a:hover {
        color: #333;
    }

    a:hover {
        background-color: none;
    }


.aCalendar a {
    float: left;
    height: 30px;
    width: 30px;
    font-size: 14px;
    font-family: "Arial", Verdana, Helvetica, Sans-Serif;
    font-weight: bold;
    margin-top: 3px;
    margin-left: 4px;
    color: black;
    text-align: left;
    text-decoration: none;
}

    .aCalendar a:hover{
        color: blue;
    }

._Domenica a {
    color: red;
}


header, footer, hgroup,
nav, section {
    display: block;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.red-text {
    color: red;
}


h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        color: white;
    }


/* main layout
----------------------------------------------------------*/




.content-wrapper {
    margin: 0 auto;
    max-width: 1300px;
}

#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
    box-sizing: content-box;
}

    .main-content {
        background: url("../Images/accent.png") no-repeat;
        padding-left: 10px;
        padding-top: 30px;
    }

    .featured + .main-content {
        background: url("../Images/heroAccent.png") no-repeat;
    }

header .content-wrapper {
    padding-top: 20px; 
}

footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: 13px;
    height: 100px;
}


/* site title
----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;
}

.site-title a, .site-title a:hover, .site-title a:active {
    background: none;
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}


/* login
----------------------------------------------------------*/
#login {
    display: block;
    font-size: 12px;
    margin: 0 0 10px;
    text-align: right;
}

    #login a {
        background-color: #d3dce0;
        margin-left: 10px;
        margin-right: 3px;
        padding: 2px 3px;
        text-decoration: none;
    }

    #login a.username {
        background: none;
        margin: 0;
        padding: 0;
        text-decoration: underline;
    }

    #login ul {
        margin: 0;
    }

    #login li {
        display: inline;
        list-style: none;
    }


/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: center;
}

    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }

        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }

        ul#menu li a:hover {
            color: #333;
            text-decoration: none;
        }

/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
    background-color: #fff;
}

    .featured .content-wrapper {
        background-color: gray;
        color: gray;
        padding: 20px 40px 30px 40px;
    }

        .featured hgroup.title h1, .featured hgroup.title h2 {
            color: #fff;
        }

        .featured p {
            font-size: 1.1em;
        }

/* page titles */
hgroup.title {
    margin-bottom: 10px;
}

hgroup.title h1, hgroup.title h2 {
    display: inline;
}

hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}

/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/* ordered list */
ol.round {
    list-style-type: none;
    padding-left: 0;
}

    ol.round li {
        margin: 25px 0;
        padding-left: 45px;
    }

        ol.round li.zero {
            background: url("../Images/orderedList0.png") no-repeat;
        }

        ol.round li.one {
            background: url("../Images/orderedList1.png") no-repeat;
        }

        ol.round li.two {
            background: url("../Images/orderedList2.png") no-repeat;
        }

        ol.round li.three {
            background: url("../Images/orderedList3.png") no-repeat;
        }

        ol.round li.four {
            background: url("../Images/orderedList4.png") no-repeat;
        }

        ol.round li.five {
            background: url("../Images/orderedList5.png") no-repeat;
        }

        ol.round li.six {
            background: url("../Images/orderedList6.png") no-repeat;
        }

        ol.round li.seven {
            background: url("../Images/orderedList7.png") no-repeat;
        }

        ol.round li.eight {
            background: url("../Images/orderedList8.png") no-repeat;
        }

        ol.round li.nine {
            background: url("../Images/orderedList9.png") no-repeat;
        }

/* content */
article {
    float: left;
    width: 70%;
}

aside {
    float: right;
    width: 5%;
}

    aside ul {
        list-style: none;
        padding: 0;
    }

        aside ul li {
            background: url("../Images/bullet.png") no-repeat 0 50%;
            padding: 2px 0 2px 20px;
        }

.label {
    font-weight: 700;
}

/* login page */
#loginForm {
    border-right: solid 2px #c8c8c8;
    float: left;
    width: 55%;
}

    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }

    #loginForm .validation-summary-errors ul {
        margin: 0;
        padding: 0;
    }

    #loginForm .validation-summary-errors li {
        display: inline;
        list-style: none;
        margin: 0;
    }

    #loginForm input {
        width: 250px;
    }

    #loginForm input[type="checkbox"],
    #loginForm input[type="submit"],
    #loginForm input[type="button"],
    #loginForm button {
        width: auto;
    }

#socialLoginForm {
    margin-left: 40px;
    float: left;
    width: 40%;
}

    #socialLoginForm h2 {
        margin-bottom:  5px;
    }

#socialLoginList button {
    margin-bottom: 12px;
}

#logoutForm {
    display: inline;
}

/* contact */
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}




    /* footer
    ----------------------------------------------------------*/
    footer .float-left,
    footer .float-right {
        float: none;
    }

    footer {
        text-align: center;
        height: auto;
        padding: 10px 0;
    }

        footer p {
            margin: 0;
        }






div.fffa {
        display: none;
    }


fieldset legend {
    display: none;
}





/*@media (max-width: 450px) {
    nav ul {
        display: none;
    }

    div.fffa {
        display: inline-block;
    }
}*/