/* this is for my bootstrap version of

  www.anamericanwebdeveloper.com

  */

/*html {*/

    /*height: 100%;*/
/*}*/

/*body {*/

    /*height: 100%;*/
/*}*/


.twocheckoutimage {

    width: 470px;
    height: auto;


}

.paymentbox {

    max-width: 500px;
    min-height: 420px;
}



.socialmediadivs {


}

.bannershenzhen {

    border: 1px solid darkslateblue;

    background-image: url('images/skylinesetc/hkshimmery.jpg');
    background-position: center center;
    background-size: cover;
    height: 180px;

}

.bannershenzhenbottom {

    display: none;
}

.maintext {

    padding: 25px;
}

.siteheadergreeting {

    margin-top: -10px;
}

.frontpagesidebar {

    border: 1px solid darkslateblue;
    background-color: grey;

}

.arrowtobaimage {

    float: left;
}

.bottomcopyright {

    display: none;
}

.frontpagefaceimage {

    float: right;
    /*-webkit-shape-outside: circle();*/
    /*border-radius: 5em;*/
    width: 220px;
    height: auto;
    margin: 15px;
    border: 1px solid #666;
    background-color: #fff;
    padding: 4px;
    box-shadow: 4px 4px 8px rgba(0,0,0,.5);

}

.postfloat {

    clear: both;
}

.smallscreenfaqs {

    display: none;
}


.topmenu {

    color: navajowhite;
    font-weight: bold;
    background-color: rgba(255,255,255,0.55);
}

.servicehighlightimage {

    height: auto;
    width: 100px;
    /*margin-left: 50%;*/
    /*margin-right: 50%;*/

}

.servicehighlightimage:hover {

    /*transform: rotate(-45deg);*/
    /*transform-origin: 0 0;*/
}


.myimagecontainer {

    width: 110px;
    margin-left: auto;
    margin-right: auto;

}

.servicecallouttext {

    margin: 12px;
    border: solid 1px darkblue;
    font-weight: bold;
    background-color: white;
    transition-property: background-color;
    transition-duration: 1.2s;
    text-decoration: underline;
}

.servicecallouttext:hover {

    background-color: lightskyblue;

}

.servicehighlightborder {

    /*border: solid 1px darkblue;*/
    /*margin: 10px;*/
    margin: 15px;
    border: 1px solid #666;
    background-color: #fff;
    padding: 4px;
    box-shadow: 4px 4px 8px rgba(0,0,0,.5);

}

.servicehighlightborder:hover {

    box-shadow: 4px 4px 8px rgba(255,0,0,.8);;

}

/* ============ Contact Form/Page ====================  */

.emailform {

    line-height: 1.2em;
}

.contactform {

    line-height: 1.8em;
}



/* New simple column format   */

.textcol {

    margin-bottom: 20px;
}

.imagelogophp {

    max-width: 190px;

}

.imagelogobootstrap {

    max-width: 200px;

}

.imagelogojquery {

    max-width: 150px;

}

.imagelogopython {

    max-width: 150px;
    border-radius: 8px;
    margin-left: 7px;

}


.secondsetofsimplecolumns {

    margin-top: 40px;

}


.graphicchinadirectpage {

    float: right;
    /*-webkit-shape-outside: circle();*/
    /*border-radius: 5em;*/
    width: 250px;
    height: auto;
    margin: 15px;
    border: 1px solid #666;
    background-color: #fff;
    padding: 4px;
    box-shadow: 4px 4px 8px rgba(0,0,0,.5);

}

/*  =======FAQs================= */

.faqlink {

    margin-bottom: 5px;

}







/* ================================================  */
/* Sample website page styles   */

.samplesitepagecontainer {

    /* for some reason the margin below caused the banner at the top of the site to
      jut down from the top of the browser screen by 30 px .. i commented it out and
      it disappeared ... hmm strange....
      */
    /*margin-top: 30px;*/

}

.samplesiteheadline {

    margin-top: 30px;

}

.sitegraphiccontainer {

    border: dashed 1px darkblue;
    padding-top: 4px;

}

.picdiv {

    margin-top: 7px;
}

.sitepicstyles {

    width: 250px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    /*margin-top: 4px;*/

}

.bluecodeblock {

    color: blue;
}

.visitsitetext {

    text-align: center;
    width: 240px;
    margin-right: auto;
    margin-left: auto;
    padding: 2px;
    margin-top: 9px;
    /*margin-bottom: 4px;*/

}

.samplesiteurl {

    text-align: center;
    width: 260px;
    margin-right: auto;
    margin-left: auto;
    padding: 3px;
    margin-top: 1px;
    margin-bottom: 4px;
    font-size: 14px;
    color: blue;
    text-decoration: underline;

}


.siteincludeslistheader {

    text-align: center;
    width: 220px;
    margin-right: auto;
    margin-left: auto;
    font-size: 14px;
    font-weight: bold;

}

.siteincludescheckboxcontainer {

    width: 285px;
    margin-left: auto;
    margin-right: auto;

}

.siteincludescheckboxcontainer ul {

    margin: 0;

}

.siteincludeslist li {

    /* note that the bootstrap col width for this on large screens is a total of about
       97px wide   */

    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;


}

.sitesamplecolumn {

    
    margin-top: 20px;
    margin-bottom: 20px;
}

.checklistcol {

    min-height: 370px;
}










.datacentertext {

    margin-top: 40px;
    min-height: 500px;
}



.aboutpagecontactgraphic {

    float: left;
}







/* ============================================= */
/*  Newspaper column/article text section */

.firstrowofarticles {

    margin-bottom: 50px;

}

.firsttextcolumn {

    background-image: url("images/logophp.jpg");

    background-position: center 10px;
    background-size: 100px auto;
    background-repeat: no-repeat;
    height: 180px;


    padding-top: 100px;

    /*border-right: solid 1px black;*/


}

.secondtextcolumn {

    background-image: url("images/logomysql.jpg");
    background-position: center 10px;
    background-size: 100px auto;
    background-repeat: no-repeat;
    height: 180px;
    padding-top: 100px;

}

.thirdtextcolumn {

    background-image: url("images/logojquery.png");
    background-position: center 10px;
    background-size: 60px auto;
    background-repeat: no-repeat;
    height: 180px;
    padding-top: 100px;


}

.newscolumn {

    /*min-height: 100%;*/
    min-height: 700px;

}

/*  PROBLEM: the row of articles below overlaps by about 138px .. the row above    */

/* second row of articles */

.secondrowofarticles {

    clear: both;
}



/* ============================================ */
/*  Footer portion   */

.bottombannerbackground {

    /* 1250 by 210 is the approximate bottom banner size i'm shooting for  */

    background-image: url('images/skylinesetc/bannerbottomwebdev.jpg');
    background-position: center center;
    background-size: cover;
    /*height: 210px;*/
    margin-top: 30px;

}

.footerrowcontainer {


}

.footercol {

    /*background-color: lightgray;*/
    /*margin-top: 40px;*/

    min-height: 210px;

}

.footerlinkcol {

    border-right: 2px solid white;
    height: 122px;

    /*background-color: rgba(255,255,255,0.65);*/

}


.footerlinklist {

    list-style: none;

}

#lastfooterlinkcol li {

    margin: 4px;
}

.footerlinklist a {

    /*color: slategray;*/
    color: white;

}

#lastfooterlinkcol a {

    background-color: rgba(255,255,255,0.65);
    color: black;
    padding: 2px;

}

.footerheading {

    font-size: 1.2em;
    /*border-bottom: 1px dashed darkgray;*/
    color: white;
    /*text-align: center;*/
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;

}

#lastfooterlinkcol {

    border-right: none;

}

.shenzhenphotodescripright {

    position: absolute;
    bottom: 0px;
    right: 0px;
    color: white;
    font-size: 10px;
    background-color: green;
    padding: 2px;
}

.shenzhenphotodescripleft {

    position: absolute;
    bottom: 0px;
    left: 0px;
    color: white;
    font-size: 10px;
    background-color: green;
    padding: 2px;
}

.hongkongphotodescripright {

    position: absolute;
    bottom: 0px;
    right: 0px;
    color: white;
    font-size: 10px;
    background-color: grey;
    padding: 2px;

}




/* ================================================================= */
/* Social media section: if lg-3 then it is 291px wide ...
    so I need to look at what the separate widths of he smed icons
    add up to ... note also that the "combo" social media set up
    i've used on healthyfoodhappypeople website has a total width of
    213 px ...

    */

.linkedindiv {



    /* 97 pixels wide  */
    position: absolute;
    left: 10px;
    top: 4px;

}

.facebookdiv {

    /* 126 pixels wide  */
    position: absolute;
    left: 110px;
    top: 4px;


}


.twitterdiv {

    /* 60 px wide  */
    position: absolute;
    left: 10px;
    top: 34px;

}

.googleplusdiv {

    /* 152 px wide  */
    position: absolute;
    left: 76px;
    top: 30px;

}

.jiathisdiv {

    position: absolute;
    left: 7px;
    top: 60px;
    color: white;

}


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

    .twocheckoutimage {

        width: 430px;
        height: auto;
        margin-left: auto;
        margin-right: auto;

    }

    .bannershenzhenbottom {

        display: block;
    }


   .bottombannerbackground {

       display: none;
       /*background-image: none;*/
   }


    .shenzhenphotodescripleft {

        display: none;
    }

    .shenzhenphotodescripright {

        display: none;
    }

    .footerrowcontainer {


    }

    .footercol {

        /*background-color: lightgray;*/
        /*margin-top: 40px;*/

        min-height: 210px;

    }

    .footerlinkcol {

        /*border-right: 2px solid white;*/
        height: 122px;

        /*background-color: rgba(255,255,255,0.65);*/

    }


    .footerlinklist {

        list-style: none;

    }

    #lastfooterlinkcol li {

        margin: 4px;
    }

    .footerlinklist a {

        /*color: slategray;*/
        color: black;

    }

    #lastfooterlinkcol a {

        /*background-color: rgba(255,255,255,0.65);*/
        color: black;
        padding: 2px;

    }

    .footerheading {

        font-size: 1.2em;
        /*border-bottom: 1px dashed darkgray;*/
        color: white;
        /*text-align: center;*/
        width: 150px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;

    }

    #lastfooterlinkcol {

        border-right: none;

    }




    /* end media query at 768px  */
}


@media screen and (max-width: 450px){

    .twocheckoutimage {

        width: 340px;
        height: auto;
        margin-left: auto;
        margin-right: auto;

    }

    .smallscreenfaqs {

        display: inline-block;
    }

    .largescreenfaqs {

        display: none;

    }

    .jiathisdiv {

        display: none;
    }

    .bannershenzhenbottom {

        display: block;
    }

    .bottombannerbackground {

        display: none;
        /*background-image: none;*/
    }

    .frontpagefaceimage {

        float: none;
        margin-bottom: 40px;
        margin-right: auto;
        margin-left: auto;
        width: 175px;

    }

    .bottomcopyright {

        display: block;
        font-size: 10px;
        padding: 3px;
        width: 220px;
        margin-right: auto;
        margin-left: auto;

    }

    .checklistcol {

        min-height: 3px;
    }

    /* end media query at 450px  */
}