PDS Office Website CSS


/ Published in: CSS
Save to your folder(s)

Here is the CSS used for the PDS Office Websites


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.