American Medical Association

AMA Corporate Site CSS

 

Purple #442266
Yellow #ffcc00
Orange #D56800
Blue #0088BB
Dark Gray #33333
DkMed Gray #555555
Med Gray #666666
LT Gray #EDEDED

 

Headings & body copy

 

H1 Example Headline Text

H2 Subhead Example Text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Bold Example Text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

H3 Sample Headline Text

Lorem ipsum dolor sit amet consectetur adipiscing elit integer molestie lorem at massa facilisis in pretium nisl aliquet nulla volutpat aliquam velit.

Sample Caption text example with link

Sample Highlight or Blockquote

Lorem ipsum dolor sit amet consectetur adipiscing vivamus sagittis lacus.

The Basics CSS Code

body {
	 color: #3B3B3B;
 	 font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
}
h1 {
    font-size: 19px; line-height: 19px; margin-bottom: 0.75em;
}

h2 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 0.25em;
}

h3 {
    font-size: 16px;
    line-height: 16px;
}
p {
    margin-bottom: 1.1em;
    font-size: 13px;
}
a {
	color: #442266;
    text-decoration: underline;
}
a:hover {
	color: #e68700;
}

Back to top

Strong, emphasis, caption, and cite

Element Sample CSS
<strong> Lorem ipsum dolor sit amet consectetur adipiscing None
<em> Lorem ipsum dolor sit amet consectetur adipiscing None
<span class="caption">

Lorem ipsum dolor sit amet consectetur adipiscing

.caption { font-size: 11px; line-height: 14px; }
<cite> Lorem ipsum dolor sit amet consectetur adipiscing cite { color: #B0AFAF; font-size: 8px; }

Back to top

Blockquotes and boxes

Content Highlight

Lorem ipsum dolor sit amet consectetur adipiscing vivamus sagittis lacus.

.contenthighlight {
    background-color: #FCF9FF;
    border-bottom: 1px dotted #555;
    border-top: 1px dotted #555;
    margin-bottom: 20px;
    padding: 15px 20px 10px;
}
.contenthightlight p {
    font-size: 14px;
    margin-bottom: 0.8em;
    margin-top: 0;
}
  

Blockquote

Lorem ipsum dolor sit amet consectetur adipiscing vivamus sagittis lacus.

blockquote {
    background-color: #FCF9FF;
    border-bottom: 1px dotted #555;
    border-top: 1px dotted #555;
    display: block;
    font-size: 17px;
    font-style: oblique;
    margin-bottom: 20px;
    padding: 15px 20px;
}
  

Callout

Lorem ipsum dolor sit amet consectetur adipiscing vivamus sagittis lacus.

.callout {
    background-color: #FCF9FF;
    border-bottom: 1px dotted #555;
    border-top: 1px dotted #555;
    display: block;
    font-size: 15px;
    margin-bottom: 20px;
    padding: 10px 20px;
}
  

Clean-Gray2

Lorem ipsum dolor sit amet consectetur adipiscing vivamus sagittis lacus.

.clean-gray2 {
   border-top:dotted 1px #555; 
   border-bottom:dotted 1px #555;
   background:#EFEFEF; 
   padding:10px;
   margin-bottom: 15px;
}
  

Back to top

Lists

Unordered

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Code

ul, ol {
	margin-left: 1.25em;
    padding-left: 1.25em;
	margin-bottom: 1.1em;
	font-size: 13px;
}
	
ul li {
	list-style: disc outside none;
    margin: 0 0 0.5em 5px;
}

ol li { 
	list-style: decimal outside none;
    margin: 0 0 0.5em 5px;
}
		

# First Name Last Name Username Information
1 Mark Otto @mdo True
2 Jacob Thornton @great True
3 Larry the Bird @twitter False
4 Zeus Godly @light False

 

Tables are automatically styled with light borders to ensure readability and maintain structure. The .zebra class is required on the table. For IE, code that appends .alt class to alternating <tr> is suggested.

<table class="zebra">
  <tr  class="alt"> 
    <td> ... </td>
  </tr>
</table>
table.zebra {
	border: 1px solid #BCBCBC;
    border-collapse: collapse;
	width: 100%;
}
table.zebra th {
   	font-weight: bold;
   	text-align: left;
	padding: 7px;
	border: 1px solid #BCBCBC;
}
table.zebra td { 
	border: 1px solid #BCBCBC;
    padding: 7px;
    vertical-align: top;
}
table.zebra tr:nth-child(2n) td,  table .alt {
   	background-color: #F9F9F9;
}
	  

Buttons should be text links

Buttons should be text when ever possible. Buttons as images get hard to manage over time and cannot scale. Text and CSS based buttons can be edited via code quickly.

Cross browser compatibility

CSS on an <a> or <input> tag: This uses a simple a tag with a class (using css3 - it degrades gracefully in older browsers). The css controls everything (gradient, color, size...). This version has only one class that every button shares. No rounded corners on IE7. No gradient on IE6.

Button Sample

Link Button

<a href="#" class="button">Sample Button</a>

 

<input class="button" type="submit" value="Submit Button" />

CSS

a.button, input.button {
   background-color:#452663;/* fallback */
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4e2670), color-stop(1, #1b072c) );/* chrome 2+, safari 4+ */
   background-image:-webkit-linear-gradient(#4e2670,#1b072c); /* chrome 10+, safari 5.1+ */
   background:-moz-linear-gradient( center top, #4e2670 5%, #1b072c 100% );/* firefox  */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e2670', endColorstr='#1b072c');/* ie 6+ */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e2670', endColorstr='#1b072c')"; /* IE8+ */
   background-image: -ms-linear-gradient(#4e2670,#1b072c);   /* IE10 */
   background-image: -o-linear-gradient(#4e2670,#1b072c);  /* Opera 11.1 */
   background-image: linear-gradient(#4e2670,#1b072c);/* The "standard" */
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   border:1px solid #a48fba;
   display:inline-block;
   color:#fff!important;
   font-family:Trebuchet MS;
   font-size:1em;
   font-weight:bold;
   line-height: 1em;
   padding:.5em 1em;
   text-decoration:none !important;
}
input.button{ 
   padding:.3em .8em; 
   overflow: visible;
}
a.button:hover, input.button:hover {
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ED980C), color-stop(1, #CA5904) );
   background:-moz-linear-gradient( center top, #ED980C 5%, #CA5904 100% );
   border:1px solid #e68700;
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ED980C', endColorstr='#CA5904');
   background-color:#e68700;
   color: #fff!important;
}
a.button:active, input.button:active {
   position:relative;
   top:1px;
}

Sidebar Promo Area

Need more time to catch up on health IT? Listen to webinars on the go!

Learn More

CSS

#secondary {
    background: none transparent;
    border-top: 1px dotted #999999;
    margin-top: 15px;}
#secondary #freeform {
    margin: 2px 0;
    padding: 0 0 2px;
	border-bottom: 1px dotted #999999;}
#secondary #freeform p {
    font-size: 12px;
    margin: 0.9em 8px 0.9em 0.5em;
    padding: 0 0 0 8px;}
.secondary-links {
    border-bottom: 1px dotted #999999;
    border-top: 1px dotted #999999;
    margin: 0 0 2px;
    padding: 0;}
#secondary #freeform .spacer {
    border-bottom: 1px dotted #999999;
    height: 5px;
    margin-bottom: 2px;}
.secondary-links a {
    background: url('../img/secondarylinks-arrow.gif') no-repeat  260px center transparent;
    display: block;
    list-style: none outside none;
    padding: 0;}
#secondary .promo {
    background-color: #F9F9F9;
    border-bottom: 1px dotted #999999;
    border-top: 1px dotted #999999;
    margin: 0;
    overflow: auto;
    padding: 0;}
#secondary .promo h4 {
    color: #333;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 14px;
    margin: 0 0 0 0.5em;
    padding: 15px 0 0 8px;	
    font-weight: bold;}
#secondary .related-links, 
#secondary.new .related-links-amn {
    background: none repeat scroll 0 0 transparent;
    padding-top: 0;
    width: 100%;
    border-bottom: 1px dotted #999999;
    padding: 0;}
.related-links-amn .related li, .related-links .related li {
    margin: 0;}
#secondary .heading {background: none ;
    color: #555;
    font-size: 14px;
    margin: 0 0 0 0.5em;
    padding: 15px 0 10px 8px; }
#secondary .related-links .related, 
#secondary .related-links-amn .related { font-size: 12px;
    margin: 0 0 2px 3px;
    padding: 0 0 5px 8px;}
#secondary p.amn {
    float: right;
    font-size: 10px;	
    color: #999;}	
#secondary .amn a {
    color: #9681B9;	
    text-decoration: none;}
#secondary .amn a:hover {	
    text-decoration: underline;}
#secondary .spacer {
    border-bottom: 1px dotted #999999;
    height: 5px;
    margin-bottom: 2px;
    clear: both;
    display: block;}

CSS

#secondary{
margin:0; padding:0; width:300px; zoom:1;} #secondary .heading {
background:url('http://www.ama-assn.org/resources/images/global/dotted-300.gif') 0 100% no-repeat;
margin:0 6px .5em;
padding:7px 0 1em 1px;
font-size: 14px;
font-weight: bold;
line-height: 16px;} #secondary ul.related {
font-size:12px; margin:0 0 1em; padding:0; text-align:left;} #secondary p{ font-size:12px; margin:0 8px 1em; padding:0;} #secondary li { list-style: none outside none; margin: 0 0 0.5em 5px;} #secondary a {color: #442266; text-decoration:underline;line-height:18px; } #secondary a:hover {color: #e68700; }

#secondary .related-links { background: url("http://www.ama-assn.org/resources/images/global/bg-related-links.png") no-repeat scroll 0 0 transparent; margin: 0; padding: 10px 10px 5px; width: 280px;}
#secondary .related-links-amn { background: url("http://www.ama-assn.org/resources/images/global/bg-related-links-amnews.png") no-repeat scroll 0 0 transparent; margin: 0; padding: 10px 10px 5px; width: 280px;} #secondary p.amn { float: right; font-size: 10px;}

ul#scroll-products { margin: 0; padding: 0;} #scroll-products li { clear: both; height: 110px;} #scroll-products li img { float: left; margin: 0 10px 10px 0;}

 

Rich Footer

 

HTML

<div id="footer-rich">
<div class="col-footer col1-footer">
<h4>AMA Publications</h4>
<ul>
<li><a href="http://www.jamanetwork.com/" target="_blank" alt="The JAMA Network">The JAMA Network</a></li>
<li><a href="http://jama.jamanetwork.com/" target="_blank" alt="JAMA (The Journal of the American Medical Association)">JAMA (The Journal of the American Medical Association)</a></li>
<li><a href="http://www.ama-assn.org/amednews/" target="_blank" title="American Medical News" alt="American Medical News">American Medical News</a></li>
<li><a href="http://archderm.jamanetwork.com/" target="_blank" title="Archives of Dermatology" alt="Archives of Dermatology">Archives of Dermatology</a></li>
<li><a href="http://archfaci.jamanetwork.com/" target="_blank" title="Archives of Facial Plastic Surgery" alt="Archives of Facial Plastic Surgery">Archives of Facial Plastic Surgery</a></li>
<li><a href="http://archpsyc.jamanetwork.com/" target="_blank" title="Archives of General Psychiatry" alt="Archives of General Psychiatry">Archives of General Psychiatry</a></li>
<li><a href="http://archinte.jamanetwork.com/" target="_blank" title="Archives of Internal Medicine" alt="Archives of Internal Medicine">Archives of Internal Medicine</a></li>
<li><a href="http://archneur.jamanetwork.com/" target="_blank" title="Archives of Neurology" alt="Archives of Neurology">Archives of Neurology</a></li>
</ul>
</div>
<!-- end col1-footer -->
<div class="col-footer col2-footer">
<ul>
<li><a href="http://archopht.jamanetwork.com/" target="_blank" title="Archives of Ophthalmology" alt="Archives of Ophthalmology">Archives of Ophthalmology</a></li>
<li><a href="http://archotol.jamanetwork.com/" target="_blank" title="Archives of Otolaryngology&mdash; Head &amp;amp; Neck Surgery" alt="Archives of Otolaryngology&mdash; Head &amp;amp; Neck Surgery">Archives of Otolaryngology&mdash; Head &amp; Neck Surgery</a></li>
<li><a href="http://archpedi.jamanetwork.com/" target="_blank" title="Archives of Pediatrics &amp; Adolescent Medicine" alt="Archives of Pediatrics &amp; Adolescent Medicine">Archives of Pediatrics &amp; Adolescent Medicine</a></li>
<li><a href="http://archsurg.jamanetwork.com/" target="_blank" title="Archives of Surgery" alt="Archives of Surgery">Archives of Surgery</a></li>
<li><a href="http://www.dmphp.org/" target="_blank" title="Journal of Disaster Medicine and Public Health Preparedness" alt="Journal of Disaster Medicine and Public Health Preparedness">Journal of Disaster Medicine and Public Health Preparedness</a></li>
<li><a href="http://virtualmentor.ama-assn.org/" target="_blank" title="Virtual Mentor - A Forum for Medical Ethics" alt="Virtual Mentor - A Forum for Medical Ethics">Virtual Mentor - A Forum for Medical Ethics</a></li>
</ul>
</div>
<!-- end col2-footer -->
<div class="col-footer col3-footer">
<h4>AMA Membership</h4>
<ul>
<li><a href="http://www.ama-assn.org/go/join" target="_blank" title="Join / Renew Your Membership" alt="Join / Renew Your Membership">Join / Renew Your Membership</a></li>
<li><a href="http://www.ama-assn.org/ama/pub/membership/membership-benefits/member-value-program.page" title="AMA MVP Benefits Program" alt="AMA MVP Benefits Program">AMA MVP Benefits Program</a></li>
<li><a href="http://www.ama-assn.org/ama/pub/community/groups.page" target="_blank" title="AMA Communities" alt="AMA Communities">AMA Communities</a></li>
<li><a href="http://www.ama-assn.org/ama/pub/membership/contact-us.page" title="Contact the AMA" alt="Contact the AMA">Contact the AMA</a></li>
</ul>
</div>
<!-- end col3-footer -->
<div class="col-footer col4-footer">
<h4>AMA Affiliates</h4>
<ul>
<li><a href="http://www.amaalliance.org/" target="_blank" title="AMA Alliance" alt="AMA Alliance">AMA Alliance</a></li>
<li><a href="http://www.amafoundation.org" title="AMA Foundation" alt="AMA Foundation">AMA Foundation</a></li>
<li><a href="http://www.ama-assn.org/ama/pub/about-ama/ama-insurance.page" title="AMA Insurance" alt="AMA Insurance">AMA Insurance</a></li>
</ul>
</div>
</div>

CSS

#footer-rich { 
   background-color: #426; 
   color: #fff; 
   overflow: hidden; 
   margin: 13px 0 0px 0px; 
   padding: 15px; 
   text-align:left; 
   width: 980px; }
#footer-rich .col-footer { 
   width: 225px; 
   float: left; 
   margin-right: 10px;}
#footer-rich .col2-footer { padding-top: 25px;}
#footer-rich .col2-footer ul { border-top: 1px solid #A291B3;}
#footer-rich .col4-footer { margin-right: 0;}
#footer-rich ul {margin: 0; padding: 0;}
#footer-rich li {
   margin: 0; 
   padding: 0; 
   list-style:none;
   text-align:left;
   display:inline;}
#footer-rich h4 { 
   font-size: 15px; 
   margin: 0; 
   padding: 0 0 5px 0; 
   border-bottom: 1px solid #857793; 
   color: #fff;}
#footer-rich a { 
   color: #fff; 
   font-size: 12px; 
   border-bottom: 1px solid #857793; 
   display: block; 
   padding: 5px 0 5px 0; 
   margin: 0; 
   text-decoration: none;} 
#footer-rich a:hover {
   color: #fc0; 
   text-decoration: none;}
            

 

Back to top

Bottom Footer

IMPORTANT: When using links in the footer, be sure to use the vanity urls.

 

HTML

<div id="footer">
<p class="footer-social">
<a target="_blank" href="http://www.facebook.com/AmericanMedicalAssociation"><img title="AMA on Facebook" alt="AMA on Facebook" src="http://www.ama-assn.org/resources/images/home-page/icon-facebook.png"></a>
<a target="_blank" href="http://twitter.com/AmerMedicalAssn"><img title="AMA on Twitter" alt="AMA on Twitter" src="http://www.ama-assn.org/resources/images/home-page/icon-twitter.png"></a>
<a target="_blank" href="http://www.linkedin.com/groups?mostPopular=&amp;gid=76194&amp;trk=myg_ugrp_ovr"><img title="AMA on LinkedIn" alt="AMA on LinkedIn" src="http://www.ama-assn.org/resources/images/home-page/icon-linkedin.png"></a>
<a target="_blank" href="https://plus.google.com/107410187242660838577/"><img title="AMA on Google+" alt="AMA on Google+" src="http://www.ama-assn.org/resources/images/home-page/icon-google.png"></a></p>

<p>Copyright 1995-2012
<a title="American Medical Association" href="http://www.ama-assn.org"><strong>American Medical Association</strong></a> All rights reserved.</p>
<p class="footer-links"><a alt="Contact Us" title="Contact Us" href="http://www.ama-assn.org/go/contact">Contact Us</a>
| <a alt="Advertise with Us" title="Advertise with Us" href="http://www.ama-assn.org/go/advertise">Advertise with Us</a>
| <a alt="Terms of Use" title="Terms of Use" href="http://www.ama-assn.org/go/terms-of-use">Terms of Use</a>
| <a alt="Privacy Policy" title="Privacy Policy" href="http://www.ama-assn.org/go/privacypolicy" >Privacy Policy</a>
| <a alt="Code of Conduct" title="Code of Conduct" href="http://www.ama-assn.org/go/code-conduct">Code of Conduct</a>
| <a alt="Sitemap" title="Sitemap" href="http://www.ama-assn.org/go/sitemap">Sitemap</a>
</p>
</div>

CSS

#footer {  
   background-color: #426; 
   color: #fff; 
   padding:20px 20px; 
   font-size: 11px; 
   margin: 0 0 20px 0; 
   position: relative; 
   border-top: 1px solid #857793; 
   width: 970px;}
#footer a { 
   color: #fff; 
   text-decoration: underline;}
#footer a:hover {
   color: #fc0; 
   text-decoration: none;}
#footer img {
   border: none; 
   margin-left: 5px;}
#footer .footer-social { 
   float: right; 
   width: 200px; 
   text-align: right;}
#footer p {
   font-size:11px;
   text-align:left; 
   margin: 0;}
            

Example form

 

(ex: 01/01/1980)
Preferred Primary Mailing Address (PPMA)

Your account has been temporarily locked due to excessive failed attempts to sign in. 

You are locked for 10 minutes. Please try again in 10 minutes.

You are currently logged in, but not authorized to view this information.

Become a JAMA Network Subscriber.

CSS

.sso div { margin-bottom: 10px; }

label { display: inline-block; position: relative; width: 100%; }
label strong { -moz-user-select: none; display: inline-block; width: 100%; 
margin-bottom: 5px; }

/* input box */
textarea, input[type="text"], input[type="password"], .uneditable-input {
	-moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
	background-color: #fff; border: 1px solid #999;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; margin-bottom: 5px; }

select, textarea, input[type="text"], input[type="password"], .uneditable-input {
	border-radius: 3px 3px 3px 3px; color: #555; display: inline-block;	font-size: 12px;
	height: 20px;	line-height: 20px; padding: 4px 6px; width: 260px; }

.half-width input { width: 110px; }

/* errors */ 
.error textarea, .error select, .error input, .error input[type="text"] {
	border-color: rgba(68, 34, 102, 0.8);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(223, 0, 0, 0.6);
	outline: 0 none; background-color:#FFFACB; }

.field-error, .field-info { display: inline-block; width: 100%; font-size: 11px; }
.field-error { color:#c00; font-weight: bold;margin-bottom: 5px; }
.error-image { background: url(img/exclamation.png) 1px 1px no-repeat; 
    padding: 2px 0 0 5px; display: inline-block; width: 16px; height:25px;}
.accept-image { background: url(img/accept.png) 1px 1px no-repeat; padding: 2px 0 0 5px;   
    display: inline-block; width: 16px; height:25px; }

/* focus */
textarea:focus, select:focus, input:focus, input[type="text"]:focus, 
.uneditable-input:focus { border-color: rgba(68, 34, 102, 0.8);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(68, 34, 102, 0.6);
	outline: 0 none; background-color: #fff; }

input:-moz-placeholder, textarea:-moz-placeholder { color: #aaa;}

/* checkbox */
.radio, .checkbox { min-height: 18px; padding-left: 18px; }

input[type="radio"], input[type="checkbox"] { cursor: pointer; line-height: normal;
	margin: 4px 0 0; }

input[type="radio"], input[type="checkbox"] { width: auto; }

.radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; 
margin-left: -18px; margin-bottom: 5px; }

/* select box */
select { background-color: #eee; border: 1px solid #999; height: 30px; width: 270px; 
   margin-bottom: 5px;}

/* error box */
.error-box { background: url(img/error-image.png) 15px 15px no-repeat #FFFACB; 
   border: 1px solid #FFCC00; width: 300px;  padding: 10px 15px 10px 90px; font-size: 14px; 
   color: #c30; font-weight: bold; margin-bottom: 20px; }

/* info-box */
.info-box { width: 300px; background: url(img/info-image.png) 15px 15px no-repeat #BFF0FF; 
   border: 1px solid #00B1FF;  padding: 10px 15px 10px 90px; font-size: 14px;  
   margin-bottom: 20px; }