﻿@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
  body {color: black;}
  header, footer, nav, section, article, main 
          {display:block}
  header  {width:970px; background-color:yellow; text-align:center}
  main    {width:970px; background-color:red; display:table }
  nav     {width:230px; background-color:Orange; text-align:left; float:left; }
  section {width:740px; height:auto;  background-color:SpringGreen; float:left;}
  article {width:720px; display:table; float:left;  margin-left:10px; margin-top:10px;  margin-bottom:10px }
  footer  {width:970px; background-color:Pink; text-align:center; clear:both;} 
  
  
#mainMenuContainer ul.mainMenu{margin:0; width: 260px;padding:0px 0px 0px 0px; list-style-type: none;text-align: left  ;}
#mainMenuContainer ul.mainMenu li{display: inline-block; padding:10px 10px 10px 10px; margin:0 0 5px 0; border:2px solid #1795a2;width: 260px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4479cb), to(#5f8dc5));
background: -webkit-linear-gradient(top, #4479cb, #5f8dc5); 
background: -moz-linear-gradient(top, #4479cb, #5f8dc5);
background: -ms-linear-gradient(top, #4479cb, #5f8dc5);
background: -o-linear-gradient(top, #4479cb, #5f8dc5);}
#mainMenuContainer ul.mainMenu li a{text-decoration: none;color: #fff; font-weight:bold; -moz-text-shadow: 1px 1px 0px #000;
-webkit-text-shadow: 1px 1px 0px #000;text-shadow: 1px 1px 0px #000;font: 16px 'Open Sans', Arial, Helvetica, sans-serif ;  }
#mainMenuContainer ul.mainMenu li a:visited {text-decoration: none;color: #fff; font-weight:bold; -moz-text-shadow: 1px 1px 0px #000;
-webkit-text-shadow: 1px 1px 0px #000;text-shadow: 1px 1px 0px #000;font: 16px 'Open Sans', Arial, Helvetica, sans-serif;}
#mainMenuContainer ul.mainMenu li a:hover {text-decoration: underline;color: #f1f1f1; font-weight:bold;-moz-text-shadow: 1px 1px 0px #000;
-webkit-text-shadow: 1px 1px 0px #000;text-shadow: 1px 1px 0px #000;font: 16px 'Open Sans', Arial, Helvetica, sans-serif;}
#mainMenuContainer ul.mainMenu li.noImg{ border:none;}

a:link.nav {  
text-decoration: none;
color: #000; 
font-family: 'Trajan Pro', Georgia, 'Times New Roman', Times, serif; 

font-size: 13px;  
 }
a:visited.nav { 
text-decoration: none;
color: #000; 
font-family: 'Trajan Pro', Georgia, 'Times New Roman', Times, serif; 

font-size: 13px;  
 }
a:hover.nav { 
text-decoration: underline; 
color: #1F2E4D; 
font-family: 'Trajan Pro', Georgia, 'Times New Roman', Times, serif; 

font-size: 13px;   }



a:link.nav2 {  
text-decoration: none;
color: #000; 
font-family: 'Trajan Pro', Georgia, 'Times New Roman', Times, serif; 

font-size: 12px;  
 }
a:visited.nav2 { 
text-decoration: none;
color: #000; 
font-family: 'Trajan Pro', Georgia, 'Times New Roman', Times, serif; 

font-size: 12px;  
 }
a:hover.nav2 { 
text-decoration: underline; 
color: #1F2E4D; 
font-family: 'Trajan Pro', Georgia, 'Times New Roman', Times, serif; 

font-size: 12px;   }

a:link.recent	{
				color: red;
				font-weight: 700;
				text-decoration: none;
				font-size: 11pt;
}
a:visited.recent	{
				color: red;
				font-weight: 700;
				text-decoration: none;
				font-size: 11pt;
}
a:hover.recent	{
				color: red;
				font-weight: 700;
				text-decoration: underline;
				font-size: 11pt;
}


.top-menu { margin-left:auto; margin-right:auto;
	height: 32px;
	width: 1000px;
	margin-top:0px;
	overflow: hidden;
	border-bottom:#9f9f9f 1px solid;
	border-left:#bfbfbf 1px solid;
	border-right:#bfbfbf 1px solid;
	background:url(/style/images/bg-nav.jpg) repeat-x left top;
}

.top-menu ul {
	margin:0;
	padding:0;
	list-style-type:none;
}

.top-menu ul li {
	margin:0;
	padding:0;
	float:left;
}

.top-menu ul li a {
	background:none; font-family: 'Trajan Pro', Georgia, 'Times New Roman', Times, serif; 

	display:block;
	padding-top:10px;
	width:141px;
	height:22px;
	border-right:1px #cccccc solid;
	text-decoration:none;
	text-align:center;
	color:#ffffff;
	font-size:14px;
}

.top-menu ul li a:hover {
	background:url(/style/images/bg-hov-nav.jpg) repeat-x left top;
	text-decoration:none;
	color:#ffffff; font-family: 'Trajan Pro', Georgia, 'Times New Roman', Times, serif; 

}

.top-menu ul li a.selected {
	background:url(/style/images/bg-hov-nav.jpg) repeat-x left top;
	text-decoration:none; font-family: 'Trajan Pro', Georgia, 'Times New Roman', Times, serif; 

	color:#ffffff;
}




#red-box{ float:right; width:275px; margin:0 0 0 10px; border:2px solid #cb0000; font-family:Georgia, Times, serif; font-size:14px; 
color:#fff; text-decoration:none; padding:0px 10px 0px 10px; font-weight: normal;-moz-text-shadow: 1px 1px 0px #000;
-webkit-text-shadow: 1px 1px 0px #000; text-shadow: 1px 1px 0px #000;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#870000), to(#b51900));
background: -webkit-linear-gradient(top, #870000, #b51900); 
background: -moz-linear-gradient(top, #870000, #b51900);
background: -ms-linear-gradient(top, #870000, #b51900);
background: -o-linear-gradient(top, #870000, #b51900); }
#red-box a p {font-family:Georgia, Times, serif; font-size:14px; text-decoration:none;
color:#fff ;  font-weight: normal;}
 #red-box a:hover p{font-family:Georgia, Times, serif; font-size:14px;  font-weight: normal;text-decoration:none;
color:#fff;}
#red-box a p strong {font-size:18px; font-weight:normal}
#red-box p  a {font-family:Georgia, Times, serif; font-size:14px; text-decoration:none;
color:#fff ;  font-weight: normal;}
 #red-box p a:hover {font-family:Georgia, Times, serif; font-size:14px;  font-weight: normal;text-decoration:none;
color:#fff;}

a:link { text-decoration: none; color: #010082; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold }
a:visited { text-decoration: none; color: #010082; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold }
a:hover { text-decoration: none; color: #010082; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold }


#top-bg{ margin-left:auto; margin-right:auto; width:1000px; height:30px; text-decoration: none;
color: #000; 
font-family: 'Trajan Pro', Georgia, 'Times New Roman', Times, serif; 
-moz-text-shadow: 1px 1px 0px #000;
-webkit-text-shadow: 1px 1px 0px #000;
text-shadow: 1px 1px 0px #fff;
font-size: 13px;   }

#top-header{ margin-left:auto; margin-right:auto; width:1000px; height:100px; margin-top:10px; background-color:#FFFFFF;  background-image:url(/style/images/logo.png); background-repeat:no-repeat; background-position:left center;}

#appointment{ float:right; width:507px; height:101px; }

#address{  width:320px;   color: #000; font-family: 'Trajan Pro', Georgia, 'Times New Roman', Times, serif; -moz-text-shadow: 1px 1px 0px #000; -webkit-text-shadow: 1px 1px 0px #000; text-shadow: 1px 1px 0px #fff; font-size: 22px;}

#hr_nav{ background-image:url(/style/images/navigation_background.png); height:28px; padding-top:15px; width:1000px; margin-right:auto; margin-left:auto;}

#header{ margin-left:auto; margin-right:auto; height:445px; width:1000px; }

#faces{ width:710px; height:445px;}

#right-side{ width:290px; float:right; height:445px;}

#border{ margin-left:auto; margin-right:auto; width:1010px; background-color:#fff; border:4px solid #010082; }

#content{ width:698px; float:right; padding-top:35px; padding-right:10px;}

#content-text{ width: 470px; padding-top:10px; float:left; margin-left:18px;}

#content-bg{ background-image:url(/style/images/bg_content.png); background-repeat:repeat-y;}

 
#patient-box{ background-image:url(/style/images/request_box.jpg); width:183px; padding-left:10px; padding-right:10px; padding-top:20px; background-repeat:no-repeat;}

#left-navigation{ padding-top:35px; margin-left:5px; float:left; width:289px; }

#footer { margin-left:auto; margin-right:auto; padding-bottom:10px; width:1000px;  background-image:url(/style/images/footer-bg.jpg); background-repeat:repeat-x;    padding-top:20px;  }

.spacer{
	clear:both; 
	font-size:0; 
	line-height:0;
}

.Title {
	margin-top: 0px;
	color: #00508F;
	font-size: 24px;
	line-height: 22px;
	font-family: Georgia, 'Times New Roman', Times, serif;
	-moz-text-shadow: 1px 1px 0px #b7bdc8;
	-webkit-text-shadow: 1px 1px 0px #fff;

}


#floating-box-wrapper{
 width:800px;
 margin:0 auto 0 auto;
 height: auto;
 position: fixed;
}
  
#floating-box-container{
 float:right;
 top:0px;
 left:50px;
 position:fixed;
 width:60px;
}
  
#floating-box-container .fixed{
 position:fixed;
 top:0;
}

#floating-box-vertical{
 border:2px solid #ddd;
 background-color:white;
 padding:.8em 0 .8em .8em;
 margin-top:10px;
 z-index:10000;
 -webkit-border-top-left-radius:6px;
 -webkit-border-bottom-left-radius:6px;
 -moz-border-radius-topleft:6px;
 -moz-border-radius-bottomleft:6px;
 border-top-left-radius:6px;
 border-bottom-left-radius:6px;
 -webkit-border-top-right-radius:6px;
 -webkit-border-bottom-right-radius:6px;
 -moz-border-radius-topright:6px;
 -moz-border-radius-bottomright:6px;
 border-top-right-radius:6px;
 border-bottom-right-radius:6px;

 width:60px;
 }
  
#floating-box-horizontal{
 border:2px solid #ddd;
 border-top:0;
 border-right:2px solid #ddd;
 background-color:white;
 padding:.8em 0 .8em .8em;
 margin-top:0px;
 z-index:10000;
 -webkit-border-bottom-right-radius:6px;
 -webkit-border-bottom-left-radius:6px;
 -moz-border-radius-topright:0px;
 -moz-border-radius-bottomright:6px;
 border-top-left-radius:0px;
 border-bottom-left-radius:6px;
 -moz-column-count: 4;
 -moz-column-gap: 3px;
 -webkit-column-count: 4;
 -webkit-column-gap: 3px;
 column-count: 4;
 column-gap: 3px;
 width:300px;
 height:70px;
 }
#floating-box .vr{
margin-left:-2px;
display: inline;
background-color:1px solid #cccccc;
width: 1px;
height: 100px;
}  
#floating-box .hr{
 margin-left: -2px;
 height:1px;
 border-bottom:1px solid #cccccc;
 margin:.6em 0;
 width:55px;
} 
#floating-box .fb_like {
 margin-top:.5em;
 margin-bottom:.5em;
 margin-left: 2px;
 width: 60px;
 height: 60px;
}
#floating-box .fb_like {
 margin-top:.5em;
 margin-bottom:.5em;
 margin-left: 2px; 
 width: 60px;
 height: 60px;
}
#floating-box .twit {
 margin-top:.5em;
 margin-bottom:.5em;
 margin-left: 2px;
 width: 60px;
 height: 60px;
}
#floating-box .pluss {
 margin-top:.5em;
 margin-bottom:.5em;
 width: 60px;
 height:60px;
 margin-left:-2px;
}
You will need to play around with some of the margins to make the floating bar appear correctly on your site. We use

.PageTitle {
	font-family: Arial, Helvetica, sans-serif; 
	font-size:15px; 
	color:#ffffff; 
	text-decoration:none; 
	font-weight: bold;}

.MainTable {
	background-color: #FFFFFF;
	}

body {
 
	background-position: center top;
	background-repeat:repeat-x;
	background-color: #f1f1f1;
	margin: 0px;
	padding: 0px;
}

body, td, p, ul, ol, li, input, select, textarea, div, span, blockquote {
  font-size : 14.0px ;
  color:#000000;
  font-family: Arial, Helvetica, sans-serif;
}

div #javascriptmsg
{
background-image: url('//style/images/scrolling_text.jpg'); background-repeat: no-repeat; background-position: left top;
}

/* services menu */

.serv:before	{
				content: "\2022""\0020";
				display: inline;
}
.serv a:link	{
				color: #000080;
				font-weight: bold;
				font-size: 10pt;
				text-decoration: none;
}
.serv a:hover	{
				color: #000000;
				font-weight: bold;
				font-size: 10pt;
				text-decoration: underline;
}
.serv a:visited	{
				color: #000080;
				font-weight: bold;
				font-size: 10pt;
				text-decoration: underline;
}
/* box with rounded corners for services menu */
.serv-container { 
				background-color: #e6e6e6;
				border: 2px #000080 solid;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				padding: 5px;
}
.serv-txt		{
				font-size: 10pt;
				font-weight: normal;
				margin: 6px 10px 6px; 
}

/* end services menu */

/* Horizontal rule styles - for page copy and menu separation; Change style in dental-services-menu.asp */
/* Type 1: Gradient transparent - color - transparent */	
hr.t-1 {
    border: 0;
    height: 2px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}
/* Type 2: Inset */		
hr.t-2 {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* Type 3: Double-color dashed line */
hr.t-3 {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}



.cn	{
				text-align: center;
}
.reg	{
				font-size: 6pt;
				vertical-align: text-top;
}
 
h1 {
				font-size: 19px;
				font-family:Arial, Helvetica, sans-serif;
				font-style:oblique;
				font-weight:bold;
				padding: 0px;
}
h2 {
				font-size: 14px;
}
h3 {
				color:#008284;
				font-weight: bold;
				font-size: 14px;
}
h4 {
				font-weight: normal;
				font-size: 12px;
}
h5 {
				text-align: center;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 12px;
				font-weight: bold;
				color: black;
				margin-bottom: 0px;
}

.letter {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 18px;
}


