/*
    This is the CSS file for pages other than the homepage, and for which no other separately
   named css file has been created.   */

/* CSS Document for Screens */

.

body {

    margin: 0; padding: 0; font-size: 14px; font-weight: 300; color: black; font-family: sans-serif;  }

/*   you can see that the margin is set to zero for the top and bottom and to auto for the right and left  ... by using auto for right and left we are basically centering the content      */

#page { max-width: 1000px; margin: 0 auto; position: relative;}

.smallupperrightlink {


}
aside {

    float: right;
}

.asidebox {
    width: 200px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 40px;
    margin-bottom: 10px;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 20px;
    padding-bottom: 0px;
    /*border-left: 2px solid #ccc;*/
    position: relative;
    display: inline-block;
    bottom: 10px;

    /*font: 13px Arial; line-height: 1.2em;*/

}

.aboutpic {

    -webkit-shape-outside: circle();
    border-radius: 5em;
    float: right;
    display: inline;
    margin: 15px;

}

/*.twoboxcontainer::after {*/
    /*content: '';*/
    /*/!*position: relative;*!/*/

    /*/!*  I think i need to clear some floats here    *!/*/

/*}*/

.twoboxcontainer {

    /* i was having trouble getting the right edge of the text of the main text area .. to move
       away from the right edge of the screen ... at first the problem was that I kept .. trying to
       adjust padding .. but adjusting the padding quality in the overriding container is what did the trick

       but note that i've decided to only change the amount of padding for the smaller screen sizes and leave
       it blank for the larger sizes ..
       */
    /*padding-right: 40px;*/

}

.textbox {

    /*position: absolute;*/
    width: 50%;
    float: left;
    display: inline-block;
    position: relative;
    padding-top: 30px;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 10px;
}




.topmenu {

    color: navajowhite;
    font-weight: bold;
    background-color: rgba(255,255,255,0.55);
    position: absolute;
    left: 0px;
    top: 167px;
}

.topmenu a {

	color: navy;

}
.topmenu a:visited {

	color: navy;

}



#rollcall {

display:block;
clear: both;


}
#rollcall li {
display: inline-block;
margin-right: 8px;
margin-left: 8px;

}
#rollcall a {

color: blue;


}

#rollcall a:visited {

color: blue;


}



/* Text

shorthand styles for the margin they go around like a clock: first is the top, the second is the right the third is the bottom and the fourth the left. */

h1 { margin: 0 0 1em 0; font-size: 2.8em; font-weight: 700}

h2 { margin: 0 0 0.5em 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em; color: darkslategrey}

h3 { margin: 0 0 0.5em 0; font-size: 1.3em; font-weight: 700;

    border: 2px dotted darkorange; padding: 4px 15px;
}

h4 { margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; }

p { margin: 0 0 1em 0;}

a {  color: #007eff;     }

.textbox a:hover {

        color: blue;

}

a:visited { color: #65b1ff; }

/* shorthand for padding 4px top and bottom 15px right and left   */

a.btn { font-size: 1.2em; text-decoration: none; color: black;
    border: 2px solid darkred; padding: 4px 15px;
    transition: background-color .5s;
}
/* rbga = red green blue alpha ... alpha refers to transparency ... here transparency is set to .3 or 30%  */
a.btn:hover { background-color: rgba(0,0,0,.3)   }


/* Header

 I used shorthand style for background: 1 property is the color, 2nd image, 3rd is the repeat property, 4th is the positioning properties

  ../ brings us out of the current directory and into the root and then back into the images folder ....

  note that the "center bottom" below relate to x and y positioning properties respectively ... so x is center and y is bottom ...
 */
.imageproofreading {

    width: 250px; height: auto;
}

.imagetranslation {

    height: 220px; width: auto;
}

.imagecustom {

    width: 250px; height: auto;
}

.lineheightdiv {

    line-height: 1.6em;
}

.upperrightemail {

    display: none;
}


header {

    height: 206px;

    background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url(../shenzhenSkylines/newbannerblank1000.jpg);

    position: relative;            }

header a.logo {
    z-index: 1;
    position: absolute; display: block;  width: 400px; height: 80px;  /* width used to be 160  */
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(../shenzhenSkylines/upperleftlogo.png);
    background-size: contain; /* this makes it proportional .. the graphic   will fit in proportionally   */
    top: 15px; left: 10px;

}

/*  notice that in the back ground below the 0 is for x and second 0 for y positioning within the anchor tag .... so the picture/image will get tagged up in the upper left corner of the element  */


.twoboxcontainer::after {
    content: '';
    /*position: relative;*/

    /*  I think i need to clear some floats here    */

}

.twoboxcontainer {

    /* i was having trouble getting the right edge of the text of the main text area .. to move
       away from the right edge of the screen ... at first the problem was that I kept .. trying to
       adjust padding .. but adjusting the padding quality in the overriding container is what did the trick

       but note that i've decided to only change the amount of padding for the smaller screen sizes and leave
       it blank for the larger sizes ..
       */
    /*padding-right: 40px;*/

}

.textbox {

    /*position: absolute;*/
    width: 90%;
    float: left;
    display: inline-block;
    padding-top: 30px;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 10px;
}

.imagebox {

    /*position: absolute;*/
    width: 25%;
    float: left;
    padding-top: 40px;
    padding-right: 20px;
    padding-left: 70px;
    padding-bottom: 30px;

}

header a.logo {
    z-index: 1;
    position: absolute; display: block;  width: 400px; height: 80px;  /* width used to be 160  */
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url(../shenzhenSkylines/upperleftlogo.png);
    background-size: contain; /* this makes it proportional .. the graphic   will fit in proportionally   */
    top: 15px; left: 10px;

}

/*  i pasted this class in from my anamericanwebdev site and nixed the old one ...  */
.logoright {

        z-index: 1;
    width: 310px; height: 70px; position: absolute; top: 15px; right: 15px; display: inline-block;
}

/*  ...this is the old one i was using ..   */
.socialmedia {

    z-index: 1;
    position: absolute; top: 5px; right: 5px;
    width: 180px; height: 60px;
    /*display: inline-block;*/
    display: none;
}

/*  note i'm not using the styling below that i had before */
.facebookbuttons {
    position: absolute; top: 22px;
}


/* the facebook properties below are in affect now ...*/
.facebooksharebuttons {

    float: left;
}

.linkedintwitterbuttons {
    float: left;
}
.googlebuttons {
    clear: both;
}

header div.textlogo {

    z-index: 1;
    position: absolute;
    top: 40px; left: 50px;
    color: white;
}
/*    height below was 66px before experimenting  */

header a.logo span {  display: none; }



/* clearing the floats ...here we're going to add a pseudo element ... for stylistic purposes, although we could define it with one colon, we'll use two so that it is extra clear that we are creating a pseudo element and not a pseudo class ... all pseudo elements need a content property  */
section::after { content: ''; display: block; clear: both; }



/* Navigation */

nav {

    background-color: rgba(0,0,0,.65);
    position: absolute;
    top: 165px; left: 0px;
    padding-top: 0px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
    width: 100%;
    /* setting width to 100% above will make sure that it is as wide
      as it's parent element, ie the main page container     */
}
nav::after { content: ''; display: block; clear: both;}

nav ul { list-style: none; margin: 0; padding: 0;  }

nav ul li:hover { background-color: darkblue; }

nav ul li:hover > ul { display: block;


    /* here here we are targeting unordered lists which are a direct descendent of a list item that is in it's hover state   */

}

nav ul li a {

    display: inline-block; color: #fff;
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
    text-decoration: none; width: 160px; position: relative;

}
nav ul li a:visited { color: #fff; }
nav ul li a:hover { background-color: #3383bb; }

nav ul ul { position: absolute; top: 100%; background-color: darkblue;
    display: none;
}

nav ul ul li { position: relative;  }

nav ul ul ul { left: 100%; top: 0px;  }

/* top-level */

/* the greater than sign allows us to target a ul element which is an immediate child of a nav element ... so if you look into the html the other ul elements which are nested within li tags are not targeted by this css rule .... */



nav > ul > li { float: left;  }

nav > ul { padding-left: 100px; }

nav > ul > li > a { width: auto;
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 15px;
}

nav > ul > li > ul > li {border: solid 1px; border-right: solid 2px; border-left: solid 2px; border-color: #3383bb;}

/*.lastlistitem {*/
 /*border-bottom: solid 2px;  border-color: #3383bb;*/

/*}*/

nav a[aria-haspopup="true"]::after {

    content: ''; display: block; width: 0px; height: 0px;
    position: absolute;
    top: 16px; right: 15px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #fff;
    /*  up above is how you do that little trick with the triangle ... part is transparent part is solid ...
         and the border is fat .. ie 4px ... so they cut each other off     */
}

nav > ul > li > a[aria-haspopup="true"]::after {


    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 4px solid #fff;
    left: 20px; right: auto;
    bottom: 6px; top: auto;


}

/* Footer */

footer {
    clear:both;
}

footer {

    font-size: .8em;
    margin: 40px;
    margin-top: 0px;

    color: #999;
}

footer .content {  display: inline;   }

footer a { margin-left: 30px; color: #777; margin-top: 0px; }
footer a:visited { color: #777; }
footer a:hover { color: #000;  }


footer {display: none;}


.copyrightdiv {

    padding-left: 40px;
    pading-top: 10px;
    font-size: 11px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 10px;
}

/*#rollcall li:first-child {*/
    /**/
    /*border-left: 1px solid;*/

/*}*/






/* Media Queries */

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

    
.twoboxcontainer::after {
    content: '';
    
}

.twoboxcontainer {
    
}

.textbox {
    width: 90%;
    float: left;
    padding-top: 30px;
    padding-right: 20px;
    padding-left: 40px;

    /* this created too large of a gap between the end of the text and the footer links following down
      below it WAS set to 50px for the longest time and i did not notice it because up above the first time the
           ".textbox" class was mentioned and properties assigned i saw that it had very low padding ... but it
           turns out that the setting here ... which for the longest time was a TOO HIGH 50 px ... went unnoticed and cascaded down .. not overridden by later screen size changes ... so it just stuck as it were ....*/
    padding-bottom: 10px;
}

.imagebox {
    width: 90%;
    float: left;
    padding: 20px 20px 30px 320px;
   
    
}
    
    
    h1 {font-size: 2.4em;}
    /* Header */
    header div.hero { left: 56%; }
    header div.hero { margin-bottom: 20px; }

    /* Section - Atmosphere */
    section.atmosphere article {
        
/*        padding-left: 400px;*/
/*        background-size: 375px auto; */
    
    }
    /* you can see above that 375 is given to width and auto to height ... this lets us skip the need to continuously calculate percentages ...proportions  */

}




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

    h1 {font-size: 2.2em;}
    /* Header */
    header {
            /*   82.5% times 206 =  169.95, i then rounded to 170, and took 170 as new height below */
        height: 170px;

        background-repeat: no-repeat;
        background-position: center bottom;
        background-image: url(../shenzhenSkylines/newbannerblank1000.jpg);
        /* note ... unlike the logo below i did NOT use background-size: contain .. it messes it up  */
        position: relative;
    }

    header a.logo {
        z-index: 1;
                                                     /*  note i may want just one property as to width or height    */
        position: absolute; display: block;
        /*width: 400px; */
        height: 66px; /* <- here i just multiplied 80 * 0.825 and it reformatted or auto adjuted the width  */
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: url(../shenzhenSkylines/upperleftlogo.png);
        background-size: contain; /* this makes it proportional .. the graphic   will fit in proportionally   */
        top: 15px; left: 10px;

    }
    nav {
        position: absolute;
        /*  i have to tweak the distance from the top of the screen .. do it manually ...   */
        top: 130px; left: 0px;
    }

 
    .textbox {
        display:block;
        width: 90%;
    }
    
    .imagebox {
        display:block;
        width: 90%;
        padding: 10px 20px 20px 20px;
        text-align: center;
        
    }
    



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


    h1 {font-size: 1.8em;}
    h2 {font-size: 1.4em;}
    h3 {font-size: 1.1em;}
    a.btn { font-size: 1em;  }

    /* Header */
    header {
        /*   82.5% times 206 =  169.95, i then rounded to 170, and took 170 as new height below */
        height: 157px;
        width: auto;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-image: url(../shenzhenSkylines/newbannerblank1000.jpg);
        /* note ... unlike the logo below i did NOT use background-size: contain .. it messes it up  */
        position: relative;            }

    header a.logo {
        z-index: 1;
        /*  note i may want just one property as to width or height    */
        position: absolute; display: block;
        /*width: 400px; */
        height: 61px; /* <- here i just multiplied 80 * 0.825 and it reformatted or auto adjuted the width  */
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: url(../shenzhenSkylines/upperleftlogo.png);
        background-size: contain; /* this makes it proportional .. the graphic   will fit in proportionally   */
        top: 15px; left: 10px;

    }

    nav {
        position: absolute;
        /*  i have to tweak the distance from the top of the screen .. do it manually ...   */
        top: 124px; left: 0px;
    }

    /*  here i want to get rid of that little triangle trick which indicates submenus  */
    nav a[aria-haspopup="true"]::after {

        /* here i set the display to none ... that seemed to do it  */
        content: '';
        display: none;
        width: 0px; height: 0px;
        position: absolute;
        top: 16px; right: 15px;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 4px solid #fff;
        /*  up above is how you do that little trick with the triangle ... part is transparent part is solid ...
             and the border is fat .. ie 4px ... so they cut each other off     */
    }

    nav > ul > li > a[aria-haspopup="true"]::after {

        /* here again ... i set the display to none and it disappeared  */
        display: none;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        border-top: 4px solid #fff;
        left: 20px; right: auto;
        bottom: 6px; top: auto;


    }

    nav > ul > li > a {

        font-size: 12px;
        /*width: auto;*/
        width: 50px;
        padding-top: 10px;
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 15px;
    }


    nav ul li a {

        font-size: 12px;
        display: inline-block; color: #fff;
        padding-top: 10px;
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 10px;
        text-decoration: none;
        /* width started at 160px  */
        /*width: 100px;*/
        position: relative;
        text-align: center ;
    }

    /* i nixed the setting below because I think the  <a> tags are stretching out too far . .. not sure
     but it looks like they are taking their width based on the element above ...*/

    /*nav > ul > li > ul > li {*/
    /*width: 150px;*/
    /*}*/

    /*nav > ul > li > ul > li > a {*/
        /*width: 150px;*/
    /*}*/



    nav > ul { padding-left: 5px; }

    /* PROBLEM: at about 722px width ... the menu items become too big and one drops down onto the
        next line ...     */

}

}
    /*   padding-left started at 100px    */





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


    footer {

        display: none;
    }

    #rollcall li  {

	display: block;
	color: white;
	background-color: navy;
       

    }

	.topmenu {display:none;}


    nav {
        clear:both;
    }
    
    h1 {font-size: 1em;}
    h3 {margin-bottom: 0px;}
    a.btn { font-size: 0.9em;  }

    /* Header */
    header {
        /*  635 pixels wide  and 0.635 x 206 =  131px as to the height  */
        height: 131px;
        width: 635px;

        background-repeat: no-repeat;
        background-position: center bottom;
        background-image: url(../shenzhenSkylines/newbannerblank1000.jpg);
        background-size: contain;
        /* note ... unlike the logo below i did NOT use background-size: contain .. it messes it up  */
        position: relative;
        /*before it used the setting below */
        /*background-position: left top;*/
    }

    /*header a.logo { width: 100%; height: 66px; left: 0px; top: 0px;*/
    /*background-color: rgba(0,0,0,.65); background-size: 112px 46px;*/
    /*background-position: 20px center;*/
    /*}*/

    /* new change  */

    header div.hero { width: 300px; top: 85px; left: 130px;  }
    header div.hero h1 { margin-bottom: 10px; }

    header a.smallupperrightlink {
        z-index: 4;
        /*  note i may want just one property as to width or height    */
        position: absolute; display: block;
        /*width: 400px; */
        /*  as the screen gets smaller i'm reducing the size of the logo in the upper left  */
        height: 51px; /* <- here i just multiplied 80 * 0.825 and it reformatted or auto adjuted the width  */
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: url(../shenzhenSkylines/smallscreenupperright.jpg);
        background-size: contain; /* this makes it proportional .. the graphic   will fit in proportionally   */
        top: 10px; right: 5px;

    }


    header a.logo {
        z-index: 1;
        /*  note i may want just one property as to width or height    */
        position: absolute; display: block;
        /*width: 400px; */
        /*  as the screen gets smaller i'm reducing the size of the logo in the upper left  */
        height: 51px; /* <- here i just multiplied 80 * 0.825 and it reformatted or auto adjuted the width  */
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: url(../shenzhenSkylines/upperleftlogo.png);
        background-size: contain; /* this makes it proportional .. the graphic   will fit in proportionally   */
        top: 10px; left: 5px;

    }

    /*.upperrightemail {*/

        /*height: 60px;*/
        /*display: block;*/
        /*position: absolute;*/
        /*top: 10px;*/
        /*right: 13px;*/
    /*}*/



    /*  i pasted this class in from my anamericanwebdev site and nixed the old one ...  */
    .logoright {
        position: relative;
        z-index: 1;
        width: 310px; height: 70px; display: inline-block;
        padding-left: 25px;
    }


    .twoboxcontainer {

        /* i was having trouble getting the right edge of the text of the main text area .. to move
           away from the right edge of the screen ... at first the problem was that I kept .. trying to
           adjust padding .. but adjusting the padding quality in the overriding container is what did the trick

           but note that i've decided to only change the amount of padding for the smaller screen sizes and leave
           it blank for the larger sizes ..
           */
        padding-right: 40px;

    }


    /* Navigation */
    nav { position: static; width: auto;
        padding-top: 20px;
        padding-right: 15px;
        padding-left: 15px;
        padding-bottom: 20px;
        background-color: darkblue; }

    nav > ul > li > ul > li {border: none }

    .lastlistitem {



    }
    /* Get rid of the "Services" and "FAQs" hyperlinks as it messes up the menu's logic and people will
      click on a link that is unresponsive   */

    .hashpop {
        display: none;

    }




    /* we give it that position of STATIC above so that it will display in the browser matching where it appears in our html code  */

    nav ul,
    nav ul ul,
    nav ul ul ul {
        display: block; position: static;  }

    nav > ul { padding: 0; }
    /* originally it gives a margin to each imediate child ...  */
    /*nav > ul > li { float: none; margin-top: 25px;  }*/
    /* but below I applied the padding across the bord to all list items ...  */
    nav ul li { float: none; margin-top: 20px;  }

    nav ul li:hover { background: none; }

    /*nav > ul > li > ul > li {border: none }*/

    /*.lastlistitem {*/



    /*}*/
    /*.lastlistitem a {*/

        /*border: 1px solid rgba(255,255,255,.25);*/

    /*}*/

    nav ul li a {
        z-index: 2;
        width: auto;
        display: block;
        margin-top: 8px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 8px;
        padding-top: 8px;
        padding-right: 15px;
        padding-left: 15px;
        padding-bottom: 8px;
        border: 1px solid rgba(255,255,255,.25);
    }

    nav ul li a:hover { background-color: rgba(255,255,255,.2); }

    nav ul ul { background: none;  }

    /* originally it was set to 30px  */
    /*nav ul ul li a { margin-left: 30px; }*/
    nav ul ul li a { margin-left: 10px; }

    /* originally this created the slight indent for what were orginially submenus ...  */
    /*nav ul ul ul li a { margin-left: 60px; }*/

    nav ul ul ul li a { margin-left: 10px; }

    nav a[aria-haspopup="true"]::after { display: none;  }

    /* Footer  */
    footer div.content { display: block; margin-top: 3px; }
    footer div.content a {
        margin-top: 0;
        margin-right: 20px;
        margin-left: 0;
        margin-bottom: 0;
    }

}




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

    footer {

        display: none;
    }

    #rollcall {

        

    }


    .contactgraphic {

        width: 260px;
        height: auto;

    }

    .contactlogo {

        width: 260px;
        height: auto;

    }

    .imagebox {
        display: block;
        width: 90%;

        padding: 20px 20px 20px 20px;
        text-align: center;
        /*       note that the text align property above works on images as well as text and that's what i'm doing here: aligning the image in the center of the div, then aligning the text/image within that div to the center ... and given i have set the div width to 90% it makes automatic adjustments    */
    }

    header {
        /*  635 pixels wide  and 0.635 x 206 =  131px as to the height  */
        height: 88px;
        width: 425px;

        background-repeat: no-repeat;
        background-position: center bottom;
        background-image: url(../shenzhenSkylines/newbannerblank1000.jpg);
        background-size: contain;
        /* note ... unlike the logo below i did NOT use background-size: contain .. it messes it up  */
        position: relative;
        /*before it used the setting below */
        /*background-position: left top;*/
    }

    header a.logo {
        z-index: 1;
        /*  note i may want just one property as to width or height    */
        position: absolute; display: block;
        /*width: 400px; */
        /*  as the screen gets smaller i'm reducing the size of the logo in the upper left  */
        height: 45px; /* <- here i just multiplied 80 * 0.825 and it reformatted or auto adjuted the width  */
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: url(../shenzhenSkylines/upperleftlogo.png);
        background-size: contain; /* this makes it proportional .. the graphic   will fit in proportionally   */
        top: 7px; left: 4px;

    }

    nav {
        clear: both;
    }



    header div.textlogo {
        z-index: 2;
        color: black;
        position: absolute;
        top: 20px;
        left: 35px;
        font-weight: bold;
    }



    header div.hero {
        width: 100%;
        left: 0px;
        top: 46px;
        text-align: center;
    }

    header div.hero h1 {
        font-size: 1em;
        margin-bottom: 10px;
    }

    header div.hero a.btn {
        padding: 2px 30px;
        font-size: .8em;
    }

    /* Note here that in the video the author used a span tag to hide part of the button's text for smaller screens ... he set display to "none" for just a portion of the text ...

    he did it like this:

    header div.hero a.btn span { display: none; } ... and the span tag in the region selected simply surrounds the text you wish to disappear when users have the much smaller screen size ...

      */

    .logoright {
        position: relative;
        z-index: 1;
        width: 310px; height: 70px; display: inline-block;
        padding-left: 25px;
    }


    .twoboxcontainer {

        /* i was having trouble getting the right edge of the text of the main text area .. to move
           away from the right edge of the screen ... at first the problem was that I kept .. trying to
           adjust padding .. but adjusting the padding quality in the overriding container is what did the trick

           but note that i've decided to only change the amount of padding for the smaller screen sizes and leave
           it blank for the larger sizes ..
           */
        padding-right: 40px;

    }


    /* Footer */
    footer::after {
        content: '';
        display: block;
        clear: both;
    }

    footer div.content a {
        display: inline-block;
        margin-top: 0;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 5px;
        float: left;
        clear: both;

    }

    .siteby { margin-right: 4px;}


    .facebookbuttons {
        position: absolute;
        top: 22px;
    }

}