/* 
    Created on : Jan 21, 2016, 10:56:35 AM
    Author     : aheinrich
*/

/* Html5 */
section, footer, article, figure {
    display: block;
}

/*-----HEADER STYLES-----*/
#separator{
    margin:0;
    padding:0;
    text-align: right;
    background-color: #00a3c8;//#00c5c0;//#358bc4; //#cc0000;//#d50c36;
    height: 35px;
    width:100%;
    position: static;
}
#separator p{
    color: #ffffff;
    font-size: 15px;
    padding-top: 8px;
    padding-right:10px;
    margin:0;
    text-align: right;
}
nav.cssmenu {
    background-color: #ffffff;
    z-index:2000; 
    width:100%;
    border-bottom: 5px solid #ddd;
    font-family: Montserrat, sans-serif;
}
nav.cssmenu ul { 
    margin: 0;
    position: relative;
    list-style-type: none; 
    text-align: right; 
    font:Georgia, "Times New Roman", Times, serif;
} 
nav.cssmenu ul li {
    float: left;
    margin:0;
}
nav.cssmenu ul li a {
    padding: 10px;
    font-size: 15px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #555;
    font-weight: 300;
    text-transform: uppercase;
}
nav.cssmenu ul li:hover a {
    color: steelblue;
}
#active{ 
    color: #74a9d1;
    font:Georgia, "Times New Roman", Times, serif;
}
.dropdown{
    display:none;
    margin-top:20px;
}

@media screen and (max-width:425px) {
    .dropdown  {
        position: absolute;
        z-index:1000;
    }
}
/* When the screen is less than 1075 pixels wide, hide all list items. Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:1075px) {
    nav.cssmenu li  {
        display: none;
    }

    /* The container <div> - needed to position the dropdown content */
    .dropdown {
        float: right;
        display:inline-block;
        font-size:15px;
        color: #444;
        text-decoration: none;
        z-index:1000;
    }
}

/* Dropdown Button */
.dropbtn {
    background-color: white;
    padding: 16px;
    font-size: 24px;
    border: none;
    cursor: pointer;
    text-align: right;
}

/* Dropdown button on hover & focus */
.dropbtn:hover {
    color: steelblue;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    right: 0;
    z-index:1000;
    text-align: left;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


header.large{padding:0;}
header.large img{height: 80px; padding-top: 10px; padding-bottom: 10px; margin-left:60px;}
header.large li{padding-top: 20px; }
header.large ul{float: right; margin-right:60px; background-color:#ffffff; margin-top:30px;}

header.small{height: 78px;}
header.small nav{position: fixed;}
header.small img{height: 55px; margin-top: 5px; margin-left:60px;}
header.small li{padding-top: 0px;}
header.small ul{float:right; margin-top: 25px; margin-right: 60px;}
header.small ul li a{font-size:15px; padding-right: 10px; padding-left: 10px;}
header.small #separator p{font-size:0px;}

header, nav, a, img, li{
    transition: all 0.1s;
    -moz-transition: all 0.1s; /* Firefox 4 */
    -webkit-transition: all 0.1s; /* Safari and Chrome */
    -o-transition: all 0.1s; /* Opera */
}
/*-----END HEADER STYLES-----*/

/*-----index.html-----*/
#about{
    padding-top:20px;
    color: #444;
}
#about h2 {
    font-size: 30px;
}
#boldtitle{
    font-size: 24px;
}
#case1, #case2, #case3{
    padding-top: 30px;
    text-align: center;
    padding-bottom:20px;
    height: auto;
    //height: 250px;
}
#case1 h2, #case2 h2, #case3 h2{
    font-size: 20px;
    text-align: center;
}
#case1 p, #case2 p, #case3 p{
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}
#case1{
    color: white;
    background-color: #53a4dd;
    float:left;
    width:33.33%;
    position:relative;
    left:66.67%;
    overflow:hidden;
}
#case2{
    color: white;
    background-color: #2175c9;
    float:left;
    width:33.33%;
    position:relative;
    left:66.67%;
    overflow:hidden;
}
#case3{
    color: white;
    background-color: #09C;
    float:left;
    width:33.33%;
    position:relative;
    left:66.67%;
}
#cases{
    padding-bottom:60px;
}
#contact{
    float:left;
    width:25%;
    position:relative;
    left: 78%;
    overflow:hidden;
    padding: 0px;
    margin-bottom: 10px;
}
#contactinfo {
    float:left;
    width:25%;
    position:relative;
    left: 78%;
    overflow:hidden;
    padding-top: 15px;
    margin-bottom: 10px;
}
#contactintro{
    padding-top:20px;
    padding-bottom: 20px;
    color: #444;
}
#healthline{
    text-align: center;
}
#date p {
    text-align: right;
    padding-right:100px;
    font-size: 16px;
}
#homenews {
    padding-left: 110px;
    padding-right: 110px;
    padding-top: 30px;
    padding-bottom: 40px;
    color: #444;;
}
#homenews h2 {
    text-align: left;
    padding-bottom: 20px;
    font-size: 25px;
}
#homenews h3 a {
    text-align: left;
    padding-bottom: 20px;
    padding-left: 50px;
    font-size: 20px;
    color: #333;
}
#homenews p{
    text-align: left;
    padding-left: 120px;
    padding-right: 40px;
}
#image-home{
    margin:0px;
    padding:0px;
    width:100%;
    position: relative;
}
#image-home img{
    margin:0px;
    padding:0px;
    height: auto;
    width:100%;
    position: relative;
}
#map {
    width: 100%;
    height: 400px;
}
.bottom{
  top: 0px;
    margin:1em;
  position:absolute;
  background-color: #444;
  opacity: 0.8;
  color: white;
  font-size: 35px;
}
/*-----END index.html STYLES----*/

/*------SERVICES STYLES-------*/
#scase1, #scase2, #scase3{
    text-align: center;
    padding-bottom:20px;
}
#scase1 h2, #scase2 h2, #scase3 h2{
    font-size: 20px;
    text-align: center;
}
#scase1 p, #scase2 p, #scase3 p{
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}
#scase1 img, #scase2 img, #scase3 img{
    text-align: center;
    height: auto;
    width: 90%;
}
#scase1{
    float:left;
    width:33.33%;
    position:relative;
    left:66.67%;
    overflow:hidden;
}
#scase2{
    float:left;
    width:33.33%;
    position:relative;
    left:66.67%;
    overflow:hidden;
}
#scase3{
    float:left;
    width:33.33%;
    position:relative;
    left:66.67%;
    height:100%;
}
#servicecases{
    padding-top: 20px;
    padding-bottom:10px;
}
.serviceleft{
    float:left;
    width:29.33%;
    position:relative;
    left:68.67%;
    overflow:hidden;
}
.servicemiddle{
    float:left;
    width:29.33%;
    position:relative;
    left:72.67%;
    overflow:hidden;
}
.serviceright{
    float:left;
    width:29.33%;
    position:relative;
    left:76.67%;
    overflow:hidden;
}
.servicecontainer2{
    float:left;
    width:100%;
    position:relative;
    right:66.66%;
}
.servicecontainers{
    float:left;
    width:100%;
    padding-bottom:20px;
}
/*-------END services.html STYLES--------*/

/*-----staff.html*/
.staffcontainer{
    width: 100%;
    text-align: left;
}
.togglephoto {
    width: 180px;
    height: 200px;
}
.staffimage {
    white-space: nowrap;
}
#practicemanager{
    background-color:white;
}
.staffcontainer b{
    font-size: 20px;
}
#Doctors table tr, #Nurses table tr, #Reception table tr, #PracticeManager table tr{
background-color: white;
}
/*-----END staff.html STYLES-----*/

/*-----CHARGES STYLE------*/
#casualpatients, #generalcharges, #overseaspatients, #registeredpatients{
    width:100%;
}
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}
ul.tab li {
    float: left;
}
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
ul.tab li a:hover {
    background-color: #ddd;
}
ul.tab li a:focus, .active {
    background-color: #ccc;
}
/*--------END charges.html STYLES--------*/

/*------PATIENT STYlES--------*/
.patientcol
{
    float: left;
    width: 20%;
    text-align: center;
}
.patientcol a{
    text-align: center;

}
.patientcol img{
    text-align: center;
    width: 90%;
    height: auto;
}
.patientlast{
    float: right;
    width: 20%;
    text-align: center;
}
.patientlast img{
    text-align: center;
    width: 90%;
    height: auto;
}
.patientrow{
    height: auto;
    overflow: auto;
}
/*--------END patient.html STYLES---------*/

/*----SPECIALIST STYLES-----*/
.specialists_info{
    background-color: paleturquoise;//#d2e9f2;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
}
.specialists_info1{
    background-color: aliceblue;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
}
/*----END specialists.html-----*/

/*-----GENERAL STYLES-----*/
a {
    text-decoration: underline;
    color: #000;
}
a:hover {
    color: #09C;
}
body {
    //background-color: #ffffff;
    color: #444;;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    margin: 0;
}
#container {
    text-align: center;
    margin: 0;
    margin-bottom: auto;
}
.container1{
    float:left;
    width:100%;
    position:relative;
    right:33.33%;
}
.container2{
    float:left;
    width:100%;
    position:relative;
    right:66.66%;
}
.containers{
    float:left;
    width:100%;
    padding-bottom:20px;
}
#mainbody{
    padding-left: 130px;
    padding-right: 130px;   
}
p{
    font-size: 14px;
    text-align: left;
}
table {
    font-family: "Lato","sans-serif";
    margin-top:20px;
}
table.one {									 
    margin-bottom: 3em;	
    border-collapse:collapse;	
}	
td {						
    text-align: center;     
    width: 10em;					
    padding: 1em;
    color: #222;
    font-size: 14px;
}		
th {							  
    text-align: center;
    font-size: 20px;
    padding: 1em;
    background-color: #2d7cbe;	    
    color: white;		
}			
tr {
    height: 1em;	
}
table tr:nth-child(even) {
    background-color: aliceblue;		
}
table tr:nth-child(odd) {
    background-color: paleturquoise;		
}
.threecontainerleft{
    float:left;
    width:29.33%;
    position:relative;
    left:68.67%;
    overflow:hidden;
}
.threecontainermiddle{
    float:left;
    width:29.33%;
    position:relative;
    left:72.67%;
    overflow:hidden;
}
.threecontainerright{
    float:left;
    width:29.33%;
    position:relative;
    left:76.67%;
    overflow:hidden;
}
.twocontainerleft{
    float:left;
    width:55%;
    position:relative;
    left:75%;
    overflow:hidden;

}
.twocontainerleft h2{
    text-align: left;
}
/*-----END GENERAL STYLES-----*/

/*-----FOOTER STYLES-----*/
footer {
    margin-top: 80px;
    padding-bottom:0;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    width: 100%;
    background-color: teal;
    color: #fff;
}
footer a{
    color: tan;
}
footer ul {
    color: lightgrey;
    list-style-type: none;
}
.footer-copyright{
    padding-bottom:10px;
    background-color: #2d7cbe;
}
.footer-copyright p{
    text-align: center;
    font-size: 10px;
    background-color: #2d7cbe;
}
.footer-header{
    font-weight: bold;
    font-size:  15px;
    text-align: left;
}
.footer-headerl{
    font-weight: bold;
    font-size:  15px;
    text-align: left;
    margin-left:40px;
}
.footer-container{
    margin-top:20px;
    height: 280px;
    width: 25%;
    float: left;
    text-align: left;
    background-color: #2d7cbe;
    display: block;
    padding-bottom:60px;
}
.footer-container ul li{
    margin-bottom: 10px;
}
.footer-container ul li a{
    color: #fff;
    text-decoration: none;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size:14px;
}
.footer-container p{
    margin-right: 40px;
    text-align: left;
    font-size: 14px;
}
/*-----END FOOTER STYLES-----*/