/* Calculator styles */
body {}
/* body.MSIE {background-color:#333}*/
a img { border: 0; }
.result-margin-future {margin-top:40px}
.result-margin-present {margin-top:0px}
#preg_calc_container {width:673px; height:auto;margin:auto}
#instructions {margin-right:10px;width:663px;height:auto;float:left;margin-bottom:10px}
#instructions p {font-family:verdana; font-size:8pt;color:#666666;}
#instructions h1 {font-family:"century gothic", verdana, sans-serif; font-size:15pt;color:#D875AE}
/* calc main container */
#calc {width:550px; height:auto;overflow: hidden;display: none;float:left;margin-top:10px;}
/* calculator header */
#calc-header { width:592px;height:20px;float:left;padding-left:30px;margin-top:60px}
#calc-header h1 {font-family:"century gothic", verdana, sans-serif; font-size:11pt;color:#fff}
#due-date-calc .button {background-color:#6179FF;height: 40px;line-height: 20px;font-size: 13pt;}
/* Question Marks */
#calc-question-mark {width:102px; height:101px; background-image:url('');float:left;margin-top:95px;margin-left:5px; }
#calc-controls{width:310px; height:auto;margin:30px 20px 10px 30px;float:left}
#calc-controls #menu { float:right;height:auto;width:auto}
#calc h3 {width: auto;font-family: "verdana",sans-serif; font-size:16pt;color:#00bfd7;float:left;margin-top: 5px;}
#calc span {margin-left:40px;}
#results {float:left; width:550px; height:auto; padding:0px;font-family:verdana; font-size:9pt;color:#666666;}
/*#results h1 {font-family:century gothic; font-size:11pt;color:#D875AE;margin-top:2px; margin-bottom:3px}*/
/* drop down select boxes */
.monthSelectBox {background: url("/glue/css-images/due-date-calc-month-select.png") no-repeat scroll 100% center rgba(0, 0, 0, 0);font-size:12px;margin-right:10px;float:left;}
.daySelectBox {font-size:12px;margin-right:10px;float:left;}
.yearSelectBox {font-size:12px;margin-right:40px;float:left;}
.periodSelectBox {font-size:12px;margin-left:0px; float:left;}
.period {display:none}
/* button container */
#calculteBTN {width:140px;float:left;margin-left:0px;clear: both;margin-top: 30px;}
/* error message styling*/
#error {float:left; width:120px; height:auto; padding:0px;margin-top:35px;margin-left:-18px;text-align:center;}
#error h3 {width:200px; font-family: verdana;font-size: 14px; color:#c7233a; font-weight:bold;padding:10px}
#content-msg {font-family: "verdana",sans-serif; font-size:8pt;color:#D875AE; text-align:center; font-weight:bold;}
#content-msg a:link  {color:#D875AE; text-decoration:underline;margin:0px;}
#content-msg a:hover  {color:#D875AE; text-decoration:underline;}
#content-msg a:visited  {color:#D875AE; text-decoration:none;}
/* current week styling*/
#week {color: #0F1934;font-size: 10pt;padding: 0px 0px 10px 0px;width: 100%;float: left;margin-top:20px;clear: both;}
#week span {color: #ED6D3B;margin-left: 0px;}
#week-side {float:left;width:200px;color: #868686;font-size: 10pt;margin-left:10px}
/* date entered last period styling */
#perd b {color:#7029EC} 
/* estimated due date styling*/
#estdd {color:#7029EC; font-size:14px; font-weight:bold;}
#ovul b {color:#7029EC}
/* Tooltip Styling */
.toolTip { /* This is the hook that the jQuery script will use */
    padding-left: 10px; /* This is need to make sure that the help icon is always visible */
    left:-45px;
    background-image:url('');
    color: #3366FF;
    cursor: help; 
    position: relative; /* This contains the .toolTipWrapper div that is absolutely positioned  */
}
.toolTipWrapper { /* The wrapper holds its insides together */
    width: 261px; height:141px;
    background-image:url('');
    position: absolute; /* Absolute will make the tooltip float above other content in the page */
    top: 10px;
    left:20px;
    display: none; /* It has to be displayed none so that the jQuery fadein and fadeout functions will work */
    color: #333;
    font-weight: normal;
    font-size: 8pt; /* A font size is needed to maintain consistancy */'
    margin-left:-100px;
    margin-top:3px;
    
    }
    
.toolTipTop { /* Top section of the tooltip */
    width: 261px;
    height: 30px;
    background: transparent url() no-repeat;
    }
.toolTipMid { /* Middle section of the tooltip */
    padding: 8px 15px 8px 30px;
    /*background: #9c5fb5 url() repeat-x top;*/
    
    }
.toolTipMid h1 {color:#7029EC;margin-top:-5px; font-family:"century gothic", verdana, sans-serif; font-size:11pt; width:200px}
.toolTipMid p {color:#333;margin-top:-20px!important; width:210px;font-size:8pt}
    
.toolTipBtm { /* Bottom Section of the tooltip */
    height: 13px;
    background: transparent url() no-repeat;
    }
#due-date-calc {width: 426px;height: auto;overflow: hidden;padding: 20px;border: 1px solid #333;border-radius: 9px;}
#due-date-calc-top {
    width: 550px;
}
#due-date-calc-top h2 {
    margin-bottom: 20px;
}
#due-date-calc-bottom {
    width: 550px;
    margin-top: 110px;
}
#due-date-calc-bottom h1 {
    color: #7029EC!important;
    margin-bottom: 5px;
}
#due-date-calc-bottom h2 {
    color: #7029EC;
    margin-bottom: 0px;
    margin-top: 14px;
}
 
#ddc-month {
    float: left;
    height: 29px;
    overflow: hidden;
    width: 139px;
    border: 1px solid #0F1934;
    border-radius: 7px;
    background-image:url('/glue/css-images/up-down-arrow.png');
    background-repeat: no-repeat;
    background-position: 95% center;
    background-color: #f8f8f8;
}

#ddc-month select {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    color: #0F1934;
    display: inline;
    height: 29px;
    padding: 0px 0px 0px 10px;
    width: 100%;
    font-size: 14px;
    -webkit-appearance: none;
}
#ddc-month select option {
    width: 110px;
}
#ddc-date {
    float: left;
    height: 29px;
    overflow: hidden;
    width: 83px;
    margin-left: 10px;
    border: 1px solid #0F1934;
    border-radius: 7px;
    background-image:url('/glue/css-images/up-down-arrow.png');
    background-repeat: no-repeat;
    background-position: 95% center;
    background-color: #f8f8f8;
}
#ddc-date select {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    color: #0F1934;
    display: inline;
    height: 29px;
    padding: 0px 0px 0px 10px;
    width: 100%;
    font-size: 14px;
    -webkit-appearance: none;
}
#ddc-date select option {
    width: 55px;
}
#ddc-year {
    float: left;
    height: 29px;
    overflow: hidden;
    width: 83px;
    margin-left: 10px;
    border: 1px solid #0F1934;
    border-radius: 7px;
    background-image:url('/glue/css-images/up-down-arrow.png');
    background-repeat: no-repeat;
    background-position: 95% center;
    background-color: #f8f8f8;
}
#ddc-year select {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    color: #0F1934;
    display: inline;
    height: 29px;
    padding: 0px 0px 0px 10px;
    width: 100%;
    font-size: 14px;
    -webkit-appearance: none;
}
#ddc-year select option {
    width: 55px;
}

@media screen and (max-width: 991px) and (orientation: portrait), screen and (max-width: 991px) and (orientation: landscape) {
    #due-date-text {border: none!important;}
    #due-date-calc {background-image: none!important;width:100%!important;padding:0px!important;height:auto!important;}
    #due-date-calc-top {width: 100%!important;}
    #due-date-calc-top h2 {width: 94%!important;}
    #due-date-calc-bottom {width: 94%!important; margin-left: 0px;} 
    #due-date-calc-bottom #calc {margin-bottom: 30px;} 
    .calc-desktop-button {display:none!important} 
    #due-date-calc #calcform {width: 100%!important;margin-bottom:30px;height: auto!important;}
    #ddc-month {
        width: 41%!important;
        height: 40px!important;
        overflow: hidden;
        border: 1px solid #0F1934;
        border-radius: 6px;
        background-image:url('/glue/css-images/up-down-arrow.png');
        background-repeat: no-repeat;
        background-position: 95% center;
    }  
    #ddc-date {
        width: 20%!important;
        margin-left: 6%!important;
        height: 40px!important;
        overflow: hidden;
        border: 1px solid #0F1934;
        border-radius: 6px;
        background-image:url('/glue/css-images/up-down-arrow.png');
        background-repeat: no-repeat;
        background-position: 95% center;
    }
    #ddc-year {
        width: 25%!important;
        margin-left: 6%!important;
        float: right!important;
        height: 40px!important;
        overflow: hidden;
        border: 1px solid #0F1934;
        border-radius: 6px;
        background-image:url('/glue/css-images/up-down-arrow.png');
        background-repeat: no-repeat;
        background-position: 95% center;
    }
    #ddc-year select, #ddc-date select, #ddc-month select, #ddc-day-amount select {
        padding: 8px 0px 0px 10px !important;
        font-size: 12pt!important;
        font-weight: bold!important;
    }
    .result-margin-present h2, .result-margin-future h2 {
        font-size: 12pt;
        float: left;
        width: 20%;
        line-height: 16px;
        margin-top: 20px;
    }
    .result-margin-present h3, .result-margin-future h3 {
        font-size: 12pt!important;
        float: left;
        width: 70%;
        color: #868686!important;
        line-height: 16px !important;
    }
    #due-date-calc #week {
        width: 100%;
    }
    #due-date-calc .button {
        width: 100%!important;
        line-height: 40px;
    }
    #due-date-calc #error, #due-date-calc #error h3 {
        width: 100%!important;
    }
    /* Mobile Calculator Button - 100% button  x 32px */
    #calculteBTN {width:100%!important;clear: both;margin-left: 0px!important;}
    #calculate {
        background-color: #9b5ab6;
        float: left;
        width: 100%;
        height: 40px;
        text-decoration: none!important;
        margin-top: 20px!important;
        padding: 0px;
    }
    #calculate p {
        padding:0; 
        margin-top:10px; 
        font-weight:bold; 
        font-size: 12pt;
        color:#ffffff!important;
        font-family: verdana;
        text-align:center;
        vertical-align:middle;
        line-height: 2em;
    }
}

@media only screen and (max-width : 769px) {
    #ddc-month {
        width: 41%!important;
        height: 40px!important;
        overflow: hidden;
        border: 1px solid #0F1934;
        border-radius: 6px;
    }
    #ddc-date {
        width: 20%!important;
        margin-left: 6%!important;
        height: 40px!important;
        overflow: hidden;
        border: 1px solid #0F1934;
        border-radius: 6px;
    }
    #ddc-year {
        width: 25%!important;
        margin-left: 6%!important;
        float: right!important;
        height: 40px!important;
        overflow: hidden;
        border: 1px solid #0F1934;
        border-radius: 6px;
    }

    .styled-select {
        width: 100%;
        height: 40px;
        overflow: hidden;
        border: 1px solid #0F1934;
        border-radius: 6px;
        clear: both;
    }
    #due-date-calc {border: none;}
}