Advanced Search

PDS Office Website CSS

/ Published in: CSS
Save to your folder(s)
Here is the CSS used for the PDS Office Websites

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* HTML Elements */
  2. body{ background-color:#e9e9e9;  font-family:Verdana,Geneva,sans-serif;  color:#545454;  line-height:1.5em}
  3.  
  4. h1, h2, h3{ color:#00aeef;  font-family:Verdana,Geneva,sans-serif;  font-weight:normal;  margin-left:10px}
  5.  
  6. h2{font-size:1.3em; line-height:1.5em}
  7.  
  8. h3{font-size:.8em; text-transform:uppercase; line-height:1.5em; margin-left:10px}
  9.  
  10. h4{font-size:.8em; line-height:1.5em}
  11.  
  12. p{ font-family:Verdana,Geneva,sans-serif;  font-size:.8em;  margin:10px}
  13. a{ color:#00aeef}
  14.  
  15. a:hover{ color:#000}
  16.  
  17. /* END HTML Elements */
  18. #wrapper{    margin-top:15px;     width:955px;     margin-left:auto;     margin-right:auto;     background-color:#FFF;     background-image:url(../images/footercap.gif);  background-position:bottom;  background-repeat:no-repeat;  padding-bottom:5px}
  19. /* Start Header */
  20. #topheadwrap{    }
  21.  
  22. #header{    padding:10px 0 0 0;     background-image:url(../images/headercap.gif);  background-repeat:no-repeat}
  23.  
  24. #logo{ float:left;  margin-left:10px}
  25.  
  26. #headphnaddr{ text-align:right;  margin-right:10px}
  27.  
  28. #subheader{background-color:#07b0ef;  color:#FFF;  font-size:10px;  font-weight:bold;  width:955px;  height:26px}
  29.  
  30. .subheadertext{margin-left:15px}
  31. .phone{ font-size:16px;  font-weight:bold;  line-height:18px}
  32.  
  33. .address{ font-size:12px;  font-weight:normal;  margin:0;  padding:0;  line-height:14px}
  34.  
  35. #introtext{ font-size:10px;  line-height:14px}
  36.  
  37. .clear{ clear:both !important}
  38.  
  39. /* END Header */
  40. /* Start Homepage Content */
  41. #defaulth1{    margin-top:30px;     margin-bottom:35px;     text-indent:-9999px;     width:322px;     height:58px}
  42. #reqapptaction{position:relative; float:right; top:-30px}
  43. #reqapptaction img{    z-index:5000}
  44.  
  45. #herocopy{    float:left;     width:955px;     height:374px;     background-image:url(../images/defaulthero.jpg);  background-repeat:no-repeat}
  46.  
  47. #herocopy p{ width:335px;  line-height:1.4em;  font-size:.75em;  margin-left:45px}
  48.  
  49. #herocopy a{ color:#000;  text-decoration:none;  font-style:italic}
  50.  
  51. #herocopy a:hover{ color:#00aaef;  text-decoration:none;  font-style:italic}
  52.  
  53. .herohighlight{ font-weight:bold;  color:#00aeef}
  54.  
  55. .highlight{ color:#00aeef}
  56.  
  57. #herocontent{ width:955px;  height:374px}
  58.  
  59. #heroapptbox{ width:200px;  height:374px;  background-color:#cfcfcf;  text-align:center}
  60.  
  61. .fpfimg{ }
  62.  
  63. #specialimg{ }
  64.  
  65. #requestapptimg{ margin-bottom:10px}
  66.  
  67. #heroapptbox .text-input{ width:140px;  position:relative}
  68.  
  69. #heroapptbox .phone-input{ width:40px;  margin-left:0;  margin-right:0;  padding-left:0;  padding-right:0;  position:relative}
  70.  
  71. #heroapptbox .text-input-notes{ color:#000;  width:130px;  padding:0;  font-size:11px;  background-color:#faffbd;  overflow:auto;  border:none}
  72.  
  73. #heroapptbox .checkbox{ background-color:Transparent}
  74.  
  75. #heroapptbox .checkboxtxt{ font-size:11px;  font-weight:bold}
  76.  
  77. #heroapptbox .exampleText{ color:#bbb;  font-size:11px;  text-align:center;  font-weight:bold;  background-color:#FFF}
  78.  
  79. #heroapptbox input{ color:#000;  font-size:11px;  text-align:center;  background-color:#faffbd;  margin:2px}
  80.  
  81. .faqsidebar{ width:180px;  text-align:left;  margin-bottom:20px;  margin-top:20px;  margin-left:8px;  display:block;  border:solid 1px #e9e9e9;  background-color:#faffc8;  padding:10px 0 10px 0}
  82.  
  83. .faqsidebar h2{  margin-left:0;  font-size:1.2em;  text-align:center}
  84.  
  85. .faqsidebar p{ font-family:Georgia,"Times New Roman",Times,serif;  font-size:.8em;  padding:5px;  font-style:italic}
  86.  
  87. .faqsidebar ul{ list-style-type:disc;  font-family:Georgia,"Times New Roman",Times,serif;  font-size:.8em;  margin:10px 10px 10px 25px;  font-style:italic}
  88.  
  89. .faqsidebar ul li{ margin:10px}
  90.  
  91. #sidebar{ float:right;  width:200px;  margin:0 0 0 0}
  92.  
  93. .faqinfobox p, .faqinfobox h3{ margin:5px;  padding:0}
  94.  
  95. .footerbutton{ margin:2px}
  96.  
  97. /* END Homepage Content */
  98. /* START Internal Page Content */
  99. /*Dental 101*/
  100. .dentalimg{ float:left;  margin:5px}
  101.  
  102. /* HEADER IMAGES */
  103. .pageheads{    width:363px;     height:36px;     text-indent:-9999px;     margin-top:35px;     background-repeat:no-repeat}
  104.  
  105. .pageheadbreak{    width:99%;     margin-bottom:10px;     position:inherit;        color:#ccc}
  106.  
  107. #aboutushead{    background-image:url(../images/pageheads/aboutushead.gif)}
  108.  
  109. #bridgeshead{    background-image:url(../images/pageheads/bridgeshead.gif)}
  110.  
  111. #cadcamheader{    background-image:url(../images/pageheads/cadcamhead.gif)}
  112.  
  113. #contactushead{    background-image:url(../images/pageheads/contactushead.gif)}
  114.  
  115. #crownshead{    background-image:url(../images/pageheads/crownshead.gif)}
  116.  
  117. #dentureshead{    background-image:url(../images/pageheads/dentureshead.gif)}
  118.  
  119. #hygienehead{    background-image:url(../images/pageheads/hygienehead.gif)}
  120.  
  121. #insurancehead{    background-image:url(../images/pageheads/insurancehead.gif)}
  122.  
  123. #fillingshead{    background-image:url(../images/pageheads/fillingshead.gif)}
  124.  
  125. #orthodonticshead{    background-image:url(../images/pageheads/orthodonticshead.gif)}
  126.  
  127. #ourteamhead{    background-image:url(../images/pageheads/ourteamhead.gif)}
  128.  
  129. #periodonticshead{    background-image:url(../images/pageheads/periodonticshead.gif)}
  130.  
  131. #rootcanalhead{    background-image:url(../images/pageheads/rootcanalhead.gif)}
  132.  
  133. #specialtyhead{    background-image:url(../images/pageheads/specialtyhead.gif)}
  134.  
  135. #technologyhead{    background-image:url(../images/pageheads/technologyhead.gif)}
  136.  
  137. #veneershead{    background-image:url(../images/pageheads/veneershead.gif)}
  138.  
  139. #whiteninghead{    background-image:url(../images/pageheads/whiteninghead.gif)}
  140.  
  141. #wisdomteethhead{    background-image:url(../images/pageheads/wisdomteethhead.gif)}
  142.  
  143. /* END HEADER IMAGES */
  144. .emergency{    float:right;     margin:0 10px 0 0}
  145. .emergency img{  vertical-align:middle}
  146.  
  147. .emergency a{    text-decoration:none;     font-weight:bold;     color:#FFF;     font-size:10px}
  148.  
  149. .emergency a:hover{   color:#00aeef}
  150.  
  151. .introimg{    margin:0 15px 0 5px !important;     border:solid 4px #ccc;     float:left}
  152.  
  153. #sidebar1{    float:left;     width:130px;     margin:10px}
  154.  
  155. #sidebar1 img{    margin-top:20px}
  156.  
  157. #sidebanners{    text-align:center}
  158.  
  159. #internalcopy{    width:70%;     float:left;     margin-left:45px}
  160.  
  161. #internalcontent{    width:745px;     padding-bottom:15px}
  162.  
  163. #internalcontent ul{    list-style-type:disc;     font-family:Georgia,"Times New Roman",Times,serif;     font-size:.8em;     margin:10px 10px 10px 35px;     font-style:italic}
  164.  
  165. #internalcontent ul li ul li{    font-size:1.4em}
  166.  
  167. #internalcontent ol{    list-style-type:decimal;     font-family:Georgia,"Times New Roman",Times,serif;     font-size:.8em;     margin:10px 10px 10px 35px;     font-style:italic}
  168.  
  169. #internalcontent ul li, #internalcontent ol li{    margin-top:10px; margin-bottom:10px}
  170.  
  171. #contentwrapper{}
  172.  
  173. #aboutuscontent{    width:480px;     float:right}
  174.  
  175. #aboutuscontentsupp{    padding-top:25px}
  176.  
  177. .vtbuttonlrg{     float:left;      clear:left;      margin-left:22px;      margin-top:10px}
  178. .techwrap{    width:690px;     height:160px;     border:solid 1px #c2c2c2;     margin:0;     padding:0}
  179.  
  180. .techimg{    float:left;     margin:10px}
  181.  
  182. .serviceswrap{    width:561px;     height:84px;     border-bottom:solid 3px #c2c2c2;     margin:0;     padding:0}
  183.  
  184. .serviceswrap h3{     margin:0 !important;      padding:0 !important}
  185.  
  186. .serviceswrap p{    height:74px !important;     line-height:1.2em !important;     font-size:12px !important}
  187.  
  188. .servicesbox a{text-decoration:none}
  189.  
  190. .servicesbox{    margin-left:50px;     margin-top:10px;     margin-bottom:10px}
  191.  
  192. .servicesbox h3{    margin:0 !important;     font-size:16px;     font-weight:bold}
  193.  
  194. .serviceimg{    float:left;     margin:10px;     border:solid 1px #c2c2c2}
  195.  
  196. .techpanel{    margin:10px !important}
  197.  
  198. #cadcam{    margin:0;     padding:0}
  199.  
  200. #cadcamhead{    width:188px;     height:35px;     background-image:url("../images/pageheads/cadcamheader.gif");     text-indent:-9999px}
  201.  
  202. #edrhead{    width:418px;     height:35px;     background-image:url("../images/pageheads/edrheader.gif");     text-indent:-9999px}
  203.  
  204. #xrayhead{    width:254px;     height:35px;     background-image:url("../images/pageheads/xrayheader.gif");     text-indent:-9999px}
  205.  
  206. #intraoralhead{    width:298px;     height:35px;     background-image:url("../images/pageheads/intraoralheader.gif");     text-indent:-9999px}
  207.  
  208. #emergencyhead{    width:321px;     height:35px;     background-image:url("../images/pageheads/emergencyheader.gif");  text-indent:-9999px}
  209.  
  210. /* END Internal Page Content */
  211. /* Footer Modules */
  212. #socialimages{    position:relative;     right:15px;     float:right}
  213.  
  214. .footmodcontent p{    margin:0 0 5px 10px;     padding:0;     width:205px;     line-height:1.1em}
  215.  
  216. .footmodwrapper{    margin:10px 0 0 13px}
  217.  
  218. .locationmap{    float:left;     margin-left:10px}
  219.  
  220. #footmodulecontent{background-color:#5b5b5b;    padding-left:4px}
  221.  
  222. .modBoxTop{width:225px; height:180px; background-image:url("../images/modBoxTopContentBG.png"); float:left; background-repeat:no-repeat; margin:6px}
  223.  
  224. .modBoxTop .locationText{padding:2px; font-size:12px; color:#fff; line-height:1.2em; text-align:left; height:80px}
  225.  
  226. .modBoxOutro{font-size:11px; color:#fff; line-height:1.2em; text-align:Center; margin:10px 10px 0 10px}
  227.  
  228. .modBoxWrap{height:145px; max-height:145px}
  229.  
  230. .modNav{float:right; padding:5px}
  231.  
  232. #servicesNav{margin-left:8px; margin-top:10px; height:96px}
  233.  
  234. #servicesNav li{font-size:11px; float:left; width:101px; color:#fff; padding:3px; line-height:1em; text-align:left; list-style-image:url("../images/modBox/serviceListArrow.png"); list-style-position:inside}
  235.  
  236. .modBoxContentImg{float:right; padding:3px}
  237.  
  238. .modBoxIntroImg{margin:10px auto; width:100%; text-align:center}
  239.  
  240. .modBoxBottom{width:461px; height:147px; background-image:url("../images/modBoxBottomContentBg.png"); float:left; background-repeat:no-repeat; margin:1px 6px 6px}
  241.  
  242. .modBoxBottomLeft{float:left; width:205px; height:135px; padding:8px 13px}
  243.  
  244. .modBoxBottomRight{float:left; width:205px; height:135px; padding:8px}
  245.  
  246. .modBoxBottomLeft p{margin:5px; padding:0; font-size:11px; color:#fff; line-height:1.2em}
  247.  
  248. .modRight{margin-left:1px}
  249.  
  250. .modBoxHead{width:220px; height:40px; text-align:center}
  251.  
  252. .modBoxHead h2{color:#fff; font-family:Century Gothic,sans-serif; font-weight:normal; padding:7px; font-size:18px; text-shadow:#000 -1px -1px; letter-spacing:.1em}
  253.  
  254. .modBoxVideoLeft{margin:45px 0 0 18px; float:left}
  255.  
  256. .modBoxVideoHead{margin:10px auto; width:260px; height:29px; text-indent:-9999px; background-image:url("../images/modBox/videoHead.png")}
  257.  
  258. .modBoxVideoRight ul{    width:260px;     height:88px;     margin-left:175px !important;     position:relative;     background-image:url("../images/modBox/videoListBg.png");  list-style-type:none;  list-style-image:none}
  259. .modBoxVideoRight ul li{ float:left;  width:129px;  height:16px;  line-height:1em;  list-style-type:none !important;  list-style-image:none !important;  padding-top:2px !important;  margin:0 !important;  font-size:11px;  font-weight:bold;  color:#FFF;  text-align:center}
  260.  
  261. .modBoxVideoRight ul li a{ color:#FFF;  text-decoration:none}
  262.  
  263. .modBoxVideoRight ul li a:hover{ color:#00aeef}
  264.  
  265. /* END Footer Modules */
  266. /* Site Index */
  267. #index{ width:955px;  margin:0 auto 0 auto}
  268.  
  269. #indexul{ width:80%;  margin-left:auto;  margin-right:auto;  font-size:10px;  line-height:1em;  padding-top:10px;  list-style-type:none;  color:#7f8185}
  270.  
  271. #indexul a{ color:#7f8185;  text-decoration:underline;  font-weight:normal}
  272.  
  273. #indexul a:hover{ color:#000;  text-decoration:none}
  274.  
  275. #indexul li{ float:left;  width:25%;  text-align:center}
  276.  
  277. #logoicon{ margin-top:10px;  width:100%;  text-align:center}
  278.  
  279. /* END Site Index */
  280. .clearleft{    clear:left}
  281. .clearright{    clear:right}
  282.  
  283. span.LV_valid{     background-image:url('/OfficeRedesign/Views/Public/images/valid.gif');      height:21px;  width:21px;      position:inherit;      margin-right:-22px;      margin-top:3px}
  284.  
  285. span.LV_invalid{     background-image:url('../Views/Public/images/invalid.gif');      height:21px;  width:21px;  position:inherit;      margin-right:-22px}
  286.  
  287. #apptconfirmblock{    background-color:#cfcfcf;     background-image:url('../../../Public/images/apptconfirmbg.gif') !important;  background-repeat:no-repeat;  width:181px;  height:282px;  margin:0 auto 0 auto;  padding:5px 0 0 0}
  288.  
  289. .apptlogoimg{ margin:5px}
  290.  
  291. .phoneinput{ width:30px !important}
  292.  
  293. /* Contact Us Form */
  294. #contactus{ font-size:15px;  font-weight:bold;  margin-left:35px}
  295.  
  296. #contactcol1{ width:275px;  float:left}
  297.  
  298. #contactcol1 input{ width:250px;  height:25px;  margin-bottom:15px;  line-height:25px;  font-size:15px;  font-weight:bold;  color:#3c3c3c;  padding:0;  border-style:solid;  border-width:1px;  border-color:#909090}
  299.  
  300. #contactcol2 p{ width:380px;  background-color:#e9e9e9;  margin:10px 0 0 0;  padding:10px}
  301.  
  302. #contactcol2{ width:325px;  float:left}
  303.  
  304. #contact_message{ overflow:auto;  width:400px;  height:150px;  margin:0;  padding:0;  border-style:solid;  border-width:1px;  border-color:#909090;  font-size:15px;  font-weight:bold;  color:#3c3c3c;  font-family:Arial}
  305.  
  306. #contact_form p{ line-height:normal;  font-size:10px}
  307.  
  308. #contactbutton{ margin:10px 0 0 0}
  309.  
  310. #contactbutton a{ color:#FFF;  text-decoration:none}
  311.  
  312. #contactbutton a:hover{ color:#000}
  313.  
  314. /* Office Hours */
  315. .hoursheader{  width:191px;   height:52px;   background-image:url('../images/hourshead.gif') !important;  text-indent:-9999px;  margin:0 0 10px 0;  padding:0;  border-bottom:solid 1px #909090}
  316.  
  317. #officehours{ width:191px;  text-align:center;  margin-left:15px}
  318.  
  319. .hours{ margin-bottom:10px}
  320.  
  321. .hours h4{ margin-bottom:3px;  font-size:16px}
  322.  
  323. .officephoto{ float:right}
  324.  
  325. .contentimgr{ float:right;  margin:10px}
  326.  
  327. .contentimgleft{ float:left;  padding:10px}
  328.  
  329. .contentimgright{ float:right;  padding:10px}
  330.  
  331. #bios table table td{ vertical-align:middle !important;  text-align:left !important}
  332.  
  333. #bios p{ display:none}
  334.  
  335. #bios table table{ margin:0 !important;  padding:0 !important}
  336.  
  337. .hideme{ display:none}
  338.  
  339. #insurancelist{ width:75%}
  340.  
  341. #insurancelist li{ float:left;  padding:5px;  list-style-type:none}
  342.  
  343. .staffwrap{ height:130px;  margin:10px;  background-color:#f2f2f2}
  344.  
  345. .staffwrap img{ float:left;  border:solid 2px #00aeef;  vertical-align:middle;  margin-top:8px;  margin-left:10px}
  346.  
  347. .staffwrap p{ float:left;  width:290px;  height:114px;  margin:8px 0 0 10px;  padding-top:15px}
  348.  
  349. /* Doc Bios */
  350. #bioscrollwrap{    float:right}
  351.  
  352. .biocaptop{    width:401px;     height:26px;     background-image:url(/Views/Master_1/1/images/bios/biocaptop.jpg)}
  353.  
  354. .biocapbottom{    width:401px;     height:26px;     background-image:url(/Views/Master_1/1/images/bios/biocapbottom.jpg)}
  355.  
  356. .biosinglecontent{    width:401px;     background-image:url(/Views/Master_1/1/images/bios/biobodybg.jpg)}
  357. .biophotobg{    width:364px;     height:235px;     background-image:url(/Views/Master_1/1/images/bios/biobgphotoback.jpg);  margin-left:auto;  margin-right:auto}
  358.  
  359. .biointro{ position:relative;  width:100% }
  360.  
  361. .biointro img{ margin-top:15px}
  362.  
  363. .biointro h2{ position:absolute;  top:125px;  left:-25px;  width:100%;  text-align:right}
  364.  
  365. .biointro h2 span{ color:#FFF;  letter-spacing:-1px;  padding:5px;  font-size:20px}
  366.  
  367. .biotitle{}
  368.  
  369. .biocopy{ padding:10px}
  370.  
  371. /* bio thumbnails */
  372. .biothumbwrap{    background-color:#555;     background-image:url("../images/bios/biobgphotoback_thumb.jpg");  margin-top:10px;  margin-bottom:10px;  height:75px;  width:200px;  cursor:pointer}
  373.  
  374. .biothumbimg{ width:75px;  float:left}
  375.  
  376. .thumbtitle{ font-size:14px;  font-weight:bold;  text-align:right;  color:#000;  padding:3px 8px 3px 3px}
  377.  
  378. #biosidebar{ float:left;  width:200px;  margin-left:50px}

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.