/*@font-face {*/
    /*font-family: Milkshake;*/
    /*src: url('fontfiles/milkshake.ttf');*/
/*}*/

/*@font-face {*/
    /*font-family: atomicage;*/
    /*src: url('fontfiles/atomicage.ttf');*/
/*}*/

/*@font-face {*/
    /*font-family: Hardman;*/
    /*src: url('fontfiles/Hardman.ttf');*/
/*}*/

@font-face {
    font-family: lifesaversregular;
    src: url('fontfiles/lifesaversregular.ttf');
}


body {
    margin: 0;
    padding: 0;
    background-color: lightyellow;
    font-family: 'Roboto', sans-serif;
}


a {
    transition: background-color 1s;
}

div {
    transition: background-color 0.1s;
}

#youtubediv {
    width: 560px;
    margin-right: auto;
    margin-left: auto;
}

#flagstrip {

    height: 300px;
    width: 100%;
    background-color: lightgoldenrodyellow;
    padding: 50px;

}
#flagcontainer {
    width: 450px;
    margin-left: auto;
    margin-right: auto;

}
#imagelinktoanameric {
    display: inline-block;
    width: 450px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 5px 8px rgba(0,0,0,.5);
}

.bodytagcontainer {
    margin: 0;
}


#mainheader {

    width: 100%;
    height: 100px;
    background-color: lightyellow;
}


/*#mainlogobox {*/
    /*position: absolute;*/
    /*z-index: 44;*/
    /*background-color: rgba(128,128,128,0.8);*/
    /*width: 205px;*/
    /*height: 90px;*/
    /*left: 10px;*/
    /*top: 10px;*/
    /*border: solid 2px darksalmon;*/
    /*border-radius: 10px;*/
    /*padding-top: 10px;*/
/*}*/

#mainlogoimage {

    position: absolute;
    left: 5px;
    top: 10px;
    height: 80px;
    width: auto;

}

#contactlogoimage {

    position: absolute;
    right: 5px;
    top: 10px;
    height: 80px;
    width: auto;
}




.stripfirst {
    /*background-color: lightseagreen;*/
    background-color: lightyellow;
    /*border: dashed 2px burlywood;*/
    width: 100%;
    padding: 30px;
    padding-left: 250px;
    padding-right: 250px;
    /*font-family: Futura;*/
    font-family: 'Roboto', sans-serif;
    /*font-family: "Courier New", serif;*/
}

.subpage {
    /*min-height: 600px;*/
}


.textboxfirststrip {
    background-color: lightyellow;
    color: black;
    /*font-family: fantasy;*/
    font-family: 'Roboto', sans-serif;
    /*font-family: "Courier New", serif;*/
    font-size: 12pt;
    /*border: dashed 4px burlywood;*/
    border: solid 1px black;
    padding: 8px;
    box-shadow: 5px 5px 8px rgba(0,0,0,.5);
}


/******** I just used this for testing the javascript scroll to top function***********/
#scrollcounter {
    background-color: red;
    color: white;
}

/*

After scroll ... set to these:
z-index: 30;*/
/*position: fixed;*/
/*left: 26%;*/
/*top: 0px;*/

#mainmenu {
    position: relative;
    height: 40px;
    width: 100%;
    background-color: black;
    padding: 0;
    margin: 0;
    z-index: 99;
}

.menubox {
    position: relative;
    display: inline-block;
    color: black;
    width: 10%;
    height: 40px;
    /*text-align: center;*/
    /*background-color: lightgoldenrodyellow;*/
    background-color: #9acfea;
    /*border: solid 1px black;*/
    padding-top: 9px;
    /*padding-left: 40%;*/
    font-family: Futura;
    margin: 0;
    border: 2px solid black;
    border-right: 1px;
    /*  NOTE: I did not appear to need box-sizing below ..?..     */
    /*box-sizing: border-box;*/
    /*-moz-box-sizing: border-box;*/
    /*-webkit-box-sizing: border-box;*/
}




/**************************  Drop Down Menus   **************************/


#ddownsamples {
    display: none;
    z-index: 25;
    position: absolute;
    width: 300px;
    /*height: 100px;*/
    left: 10%;
    top: 40px;
    /*padding-top: 32px;*/
    background-color: whitesmoke;
}
#ddownsamples a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}
.ddownindividualmenubox {
    width: 300px;
    height: 40px;
    display: block;
    text-align: center;
    padding-top: 10px;
    border: 2px solid black;
    border-top: none;
    background-color: yellow;
}
.ddownindividualmenubox:hover {
    background-color: whitesmoke;

}
#samplestopmenuobox {
    /*border-top: none;*/

}



#ddownservices {
    display: none;
    z-index: 25;
    position: absolute;
    width: 220px;
    /*height: 100px;*/
    left: 20%;
    top: 40px;
    /*padding-top: 32px;*/
    background-color: aliceblue;
}
#ddownservices a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}
.ddservicesindividualmenubox {
    width: 220px;
    height: 40px;
    display: block;
    text-align: center;
    padding-top: 10px;
    border: 2px solid black;
    border-top: none;
    background-color: aliceblue;
}
.ddservicesindividualmenubox:hover {
    background-color: lightgrey;

}



#ddownblogs {
    display: none;
    z-index: 25;
    position: absolute;
    width: 220px;
    /*height: 100px;*/
    left: 60%;
    top: 40px;
    /*padding-top: 32px;*/
    background-color: ivory;
}
#ddownblogs a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}
.ddblogsindividualmenubox {
    width: 220px;
    height: 40px;
    display: block;
    text-align: center;
    padding-top: 10px;
    border: 2px solid black;
    border-top: none;
    background-color: ivory;
}
.ddblogsindividualmenubox:hover {
    background-color: whitesmoke;

}






.splint {
    margin-left: 40%;
}
.splintsamples {
    margin-left: 35%;
}
.splintservices {
    margin-left: 35%;
}
.splintcontact {
    margin-left: 35%;
}


#bgmenuhome {
    background-image: url(images/iconbluehousetransparent.png);
    /*background-size: cover;*/
    background-size: 20px auto;
    background-repeat: no-repeat;
    /*background-position: center center;*/
    background-position: 15% 50%;
    background-color: lightgreen;
}
#bgmenuhome:hover {
    background-color: whitesmoke;
}

#bgmenusamples {
    background-image: url(images/iconsamplesfinal.png);
    /*background-size: cover;*/
    background-size: 20px auto;
    background-repeat: no-repeat;
    /*background-position: center center;*/
    background-position: 15% 50%;
    background-color: yellow;
}

#bgmenuservices {
    background-image: url(images/iconservicesfinal.png);
    /*background-size: cover;*/
    background-size: 20px auto;
    background-repeat: no-repeat;
    /*background-position: center center;*/
    background-position: 15% 50%;
    background-color: aliceblue;
}

#bgmenuservices:hover {
    background-color: lightgrey;
}

#bgmenuprices {
    background-image: url(images/iconpricesfinal.png);
    /*background-size: cover;*/
    background-size: 20px auto;
    background-repeat: no-repeat;
    /*background-position: center center;*/
    background-position: 15% 50%;
    background-color: lightpink;
}

#bgmenuprices:hover {
    background-color: whitesmoke;
}

#bgmenufaqs {
    background-image: url(images/iconfaqtruefinal.png);
    /*background-size: cover;*/
    background-size: 20px auto;
    background-repeat: no-repeat;
    /*background-position: center center;*/
    background-position: 15% 50%;
    background-color: lightskyblue;
}
#bgmenufaqs:hover {
    background-color: whitesmoke;
}


#bgmenuaboutme {
    background-image: url(images/iconaboutfinal.png);
    /*background-size: cover;*/
    background-size: 20px auto;
    background-repeat: no-repeat;
    /*background-position: center center;*/
    background-position: 15% 50%;
    background-color: lightcoral;
}
#bgmenuaboutme:hover {
    background-color: whitesmoke;
}


#bgmenublogs {
    background-image: url(images/iconblogsfinal.png);
    /*background-size: cover;*/
    background-size: 20px auto;
    background-repeat: no-repeat;
    /*background-position: center center;*/
    background-position: 15% 50%;
    background-color: ivory;
}
#bgmenublogs:hover {
    background-color: whitesmoke;
}


#bgmenuthedr {
    background-image: url(images/iconthedrfinal.png);
    /*background-size: cover;*/
    background-size: 20px auto;
    background-repeat: no-repeat;
    /*background-position: center center;*/
    background-position: 15% 50%;
    /*background-color: lightgreen;*/
    background-color: lime;
}
#bgmenuthedr:hover {
    background-color: whitesmoke;
}


#bgmenucontact {
    background-image: url(images/iconcontactfinal.png);
    /*background-size: cover;*/
    background-size: 20px auto;
    background-repeat: no-repeat;
    /*background-position: center center;*/
    background-position: 15% 50%;
    background-color: lightgrey;
}
#bgmenucontact:hover {
    background-color: whitesmoke;
}


#bgmenulogin {
    background-image: url(images/iconloginfinal.png);
    /*background-size: cover;*/
    background-size: 20px auto;
    background-repeat: no-repeat;
    /*background-position: center center;*/
    background-position: 15% 50%;
    background-color: mediumpurple;
}
#bgmenulogin:hover {
    background-color: whitesmoke;
}


.wht:hover {
    background-color: navajowhite;
}

/*.mbicon {*/
    /*!*position: absolute;*!*/
    /*!*left: 7px;*!*/
    /*!*top: 8px;*!*/
    /*display: inline-block;*/
    /*height: 20px;*/
    /*width: auto;*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*!*margin-top: 10px;*!*/

/*}*/


.lastmenubox {
    border-right: yellow;
    background-color: yellow;
    border-right: 1px solid black;
}

/*.menubox:hover {*/
    /*background-color: lightgray;*/
/*}*/
#bgmenusamples:hover {
    background-color: whitesmoke;
}






.firstpicturestrip {

    position: relative;
    height: 325px;
    width: 100%;
    background-image: url(images_old_fashioned/steel_code.jpg);
    background-size: cover;
    background-position: center center;
    /*padding-top: 135px;*/

}

.secondpicturestrip {

    position: relative;
    height: 350px;
    width: 100%;
    background-image: url(images_old_fashioned/man_painting_code.jpg);
    background-size: cover;
    background-position: center center;
    /*padding-top: 135px;*/

}

/* test */
.screen {
    height: 325px;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
}

.secondscreen {
    height: 350px;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
}

.textforpicturestrip {
    color: ivory;
    font-size: 2.2em;
    font-weight: bold;
    position: absolute;
    top: 100px;
    left: 20%;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.6);
    padding: 10px;

    font-family: lifesaversregular, sans-serif;

}

#textforwelderstrip {
    left: 6%;
    top: 110px;
}

#textformanpainting {
    left: 6%;
    top: 120px;
    text-align: center;

}


.thirdpicturestrip {

    position: relative;
    height: 350px;
    width: 100%;
    background-image: url(images/DRbeach_with_flag.jpg);
    background-size: cover;
    background-position: center center;
    /*padding-top: 135px;*/
}

#textforbeachwithmap {
    left: 6%;
    top: 100px;
    text-align: center;

}

.thirdscreen {
    height: 350px;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
}




.returntotop {
    width: 80px;
    height: 120px;
    background-color: lightyellow;
    background-image: url(images/returntotop.png);
    background-size: cover;
    background-position: center center;
    /*background-color: lightseagreen;*/
    /*border: 2px solid grey;*/
}
.returntotop:hover {
    background-color: lightcoral;
}
#leftreturntotop {
    position: absolute;
    left: 0;
    bottom: 0;
}

#rightreturntotop {
    position: absolute;
    right: 0;
    bottom: 0;
}

#footermenu {

    position: relative;
    /*background-color: lightseagreen;*/
    background-color: lightyellow;
    /*border: dashed 2px burlywood;*/
    width: 100%;
    /*min-height: 240px;*/
    height: 240px;
    /*padding: 30px;*/
    /*padding-left: 250px;*/
    /*padding-right: 250px;*/
    /*font-family: Futura;*/
    font-family: 'Roboto', sans-serif;
    padding-top: 20px;
    clear: both;
}

#footerlinkbox {

    position: relative;
    width: 800px;
    height: 160px;
    /*background-color: silver;*/
    margin-left: auto;
    margin-right: auto;
}
/* 263 ...531  */

.sublinkbox {

    display: inline-block;
    width: 260px;
    height: 150px;
    margin-left: 3px;
    padding-left: 20px;
    padding-top: 30px;
    /*margin-right: px;*/
    /*background-color: gold;*/
}
#firstsublinkbox {
    position: absolute;
    left: 2px;
    top: 2px;

}
#secondsublinkbox {
    position: absolute;
    left: 263px;
    top: 2px;
}
#thirdsublinkbox {
    position: absolute;
    left: 533px;
    top: 2px;
}

.footeratag {
    margin-bottom: 4px;
    /*font-family: "Courier New", serif;*/
    font-family:  sans-serif;
    color: black;
}



#copyrightstrip {
    position: relative;
    width: 600px;
    height: 30px;
    /*background-color: blue;*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    text-align: center;

}



/******************************* Content Sub Page Styles *******************************************/
/**************************** these are pages like Prices, Websites, Network setup etc ******************/

.floatingimage {

    float: right;
    width: 300px;
    height: auto;
    margin-left: 10px;
    margin-bottom: 8px;
    /*border-radius: 10px;*/

}

.textboxonsubcontentpage {

    padding: 20px;
}

.stripcontentsubpage {
    padding-left: 25%;
    padding-right: 25%;
}

#pagewebsitespicturestrip {

     position: relative;
     height: 350px;
     width: 100%;
     background-image: url(images_old_fashioned/strong_foundations.jpg);
     background-size: cover;
     background-position: center center;
     /*padding-top: 135px;*/
 }

#textforstrongfoundations {
    left: 36%;
    top: 130px;
    text-align: center;

}

#screenforstrongfoundations {
    height: 350px;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
}


#pagephoneappspicturestrip {

    position: relative;
    height: 350px;
    width: 100%;
    background-image: url(images_old_fashioned/xamarin_bannerfinal.jpg);
    background-size: cover;
    background-position: center center;
    /*padding-top: 135px;*/
}

#textforphoneapps {
    left: 36%;
    top: 130px;
    text-align: center;

}

#screenforphoneapps {
    height: 350px;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
}

#floatingphonesimage {
    width: 225px;
    height: auto;
}





#pageseostrip {

    position: relative;
    height: 350px;
    width: 100%;
    background-image: url(images_old_fashioned/banner_seo_yellow_pages_5men_walking144kb.jpg);
    background-size: cover;
    background-position: center center;
    /*padding-top: 135px;*/
}

#floatingseoimage {
    width: 325px;
    height: auto;
}

#textforseoservices {
    left: 83%;
    top: 100px;
    text-align: center;

}


#pagerepairstrip {

    position: relative;
    height: 350px;
    width: 100%;
    background-image: url(images_old_fashioned/banner_repair_motherboard_on_yellow_gradient_final.jpg);
    background-size: cover;
    background-position: center center;
    /*padding-top: 135px;*/
}

#floatingcomputerrepairimage {
    width: 325px;
    height: auto;
    border-radius: 25px;
    border: solid 2px darkblue;

}

#textforrepair {
    left: 60%;
    top: 100px;
    text-align: center;

}




#pagenetworkingstrip {

    position: relative;
    height: 350px;
    width: 100%;
    background-image: url(images_old_fashioned/banner_net_diagram_on_yellow_gradient.jpg);
    background-size: cover;
    background-position: center center;
    /*padding-top: 135px;*/
}

#floatingnetworkingimage {
    width: 325px;
    height: auto;
    border-radius: 25px;
    border: solid 2px darkblue;

}

#textfornetworking {
    left: 55%;
    top: 125px;
    text-align: center;

}







#floatingspanishlanguageimage {
    width: 225px;
    height: auto;
    border-radius: 25px;
    border: solid 2px darkblue;

}

#pagespanishtranslationstrip {
    position: relative;
    height: 350px;
    width: 100%;
    background-image: url(images_old_fashioned/banner_yellow_human_only_translation.jpg);
    background-size: cover;
    background-position: center center;
    /*padding-top: 135px;*/

}

#textforspanishtranslation {

    left: 48%;
    top: 125px;
    text-align: center;

}





#pagepricesstrip {
    position: relative;
    height: 350px;
    width: 100%;
    background-image: url(images_old_fashioned/banner_yellow_gradient.jpg);
    background-size: cover;
    background-position: center center;
    /*padding-top: 135px;*/

}

#textforprices {
    left: 53%;
    top: 100px;
    text-align: center;

}



.pictureabovegradientstrip {

    height: 221px;
    width: 291px;
    background-image: url(images_old_fashioned/DR_map_location_my_custom_final.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 65px;
    left: 13%;
    border: solid 1px black;
    border-radius: 10px;
    box-shadow: 5px 5px 8px rgba(0,0,0,.5);

}


.faqlink {

    margin-bottom: 5px;

}


.faqmorestyles {
    margin-bottom: 4px;
}


#pagefaqsstrip {
    position: relative;
    height: 250px;
    width: 100%;
    background-image: url(images_old_fashioned/banner_better_mousetrap_better_price.jpg);
    background-size: cover;
    background-position: center center;
    /*padding-top: 135px;*/

}

#textforfaqs {
    left: 31%;
    top: 125px;
    text-align: center;

}

#screenforfaqs {
    height: 250px;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
}



#floatingrobimage {
    width: 175px;
    height: auto;
    border-radius: 40px;
    border: solid 2px darkblue;
}


#pageaboutstrip {
    position: relative;
    height: 350px;
    width: 100%;
    background-image: url(images_old_fashioned/banner_old_record_player.jpg);
    background-size: cover;
    background-position: center center;
    /*padding-top: 135px;*/

}

#textforabout {
    left: 65%;
    top: 100px;
    text-align: center;

}


/*  this is on the-dr.php page*/
#floatingdrcrestimage {

    width: 200px;
    height: auto;
    /*border-radius: 40px;*/
    /*border: solid 2px darkblue;*/
}


#pagethedrstrip {
    position: relative;
    height: 250px;
    width: 100%;
    background-image: url(images_old_fashioned/skylineSantodomingo.jpg);
    background-size: cover;
    background-position: center center;
    /*padding-top: 135px;*/

}

#textforthedr {
    left: 40%;
    top: 80px;
    text-align: center;

}


#pageloginstrip {
    position: relative;
    height: 350px;
    width: 100%;
    background-image: url(images_old_fashioned/banner_lock_yellow_gradient.jpg);
    background-size: cover;
    background-position: center center;
    /*padding-top: 135px;*/

}

#textforlogin {
    left: 50%;
    top: 150px;
    text-align: center;

}






.basicinputcontrol {
    width: 300px;

}

#contactpagedetailsimage {

    width: 250px;
    height: auto;

}

#makeentryloadingpic {
    display: none;
    width: 60px;
    height: auto;
}

#floatingblogentryimage {
    width: 150px;
    height: auto;
    border-radius: 25px;
    /*border: solid 2px darkblue;*/

}

.youtubeiframe {
    width: 560px;
    margin-right: auto;
    margin-left: auto;
}

.blogentryholdingbox {

    position: relative;
    height: 100px;
    width: 400px;
    margin-bottom: 10px;
    border: 1px dashed black;
    margin-right: auto;
    margin-left: auto;

}
.blogentryholdingbox:hover {
    box-shadow: 5px 5px 8px rgba(0,0,0,.5);
}

.picpart {
    position: absolute;
    left: 0;
    top:0;
    width: 100px;
    height: 100px;
}
.imagefileforpicpart {
    height: 100px;
    width: 100px;
}

.textpart {
    position: absolute;
    left: 120px;
    top: 20px;
    width: 260px;
}

.bloglinkatag:hover {

}

.warningmessage {
    padding: 5px;
    color: red;
    font-weight: bold;
    background-color: yellow;
    width: 242px;
}


#currentpicture1 {
    width: 100px;
    height: auto;
}

.loadingpicgeneric {

    width: 60px;
    height: auto;
}

#loadingpicchosenentry {
    display: none;

}

#updateentryloadingpic {
    width: 60px;
    height: auto;
    display: none;
}

#deleteentryloadingpic {
    width: 60px;
    height: auto;
    display: none;
}


.listofwebsitefeatures li {

    /* note that the bootstrap col width for this on large screens is a total of about
       97px wide   */
    /*font-family: Courier,  serif;*/
    /*font-family:  sans-serif;*/
    font-family: Verdana;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    list-style: none;
    background-image: url('images/wrench_icon_final.png');
    background-repeat: no-repeat;
    /*background-size: auto 17px ;*/
    background-size: auto 22px ;
    /*background-position: 0 ;*/
    padding-left: 24px;
    margin-bottom: 4px;
}


#wordpressfastsetupimage {

    width: 250px;
    height: auto;
}



.wordpressincludeslist li {
    /* note that the bootstrap col width for this on large screens is a total of about
     97px wide   */
    /*font-family: Courier,  serif;*/
    font-family:  sans-serif;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    list-style: none;
    background-image: url('images/checkblue.png');
    background-repeat: no-repeat;
    background-size: auto 17px ;
    /*background-position: 0 ;*/
    padding-left: 18px;
    margin-bottom: 4px;

}



.listofnetworkservices li {

    /* note that the bootstrap col width for this on large screens is a total of about
    97px wide   */
    /*font-family: Courier,  serif;*/
    font-family:  sans-serif;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    list-style: none;
    background-image: url('images/arrow.gif');
    background-repeat: no-repeat;
    background-size: auto 16px ;
    /*background-position: 0 ;*/
    padding-left: 20px;
    margin-bottom: 4px;

}




#floatingyoutubeimage {

    float: right;
    width: 220px;
    height: auto;
    /*margin-left: 10px;*/
    /*margin-bottom: 8px;*/
    /*border-radius: 10px;*/
    border-radius: 40px;
    /*border: solid 2px red;*/
}

#floatingyoutubeimage:hover {
    border: solid 2px red;
    background-color: lightcoral;
}