BMC Interactive Stylesheet
Buttons
Example:
Button text
span.btn {
background-color: #1BB0D7;
background-image: url("http://media.cms.bmc.com/designimages/home-slide-cta-arrow.png";
background-position: 100% 12px;
background-repeat: no-repeat;
border-radius: 6px 6px 6px 6px;
display: inline-block;
font-size: 18px;
height: 25px;
padding: 2px 24px 4px 10px;
transition: all 0.2s ease 0s;;
font-family: 'Open Sans', 'Helvetica Neue', arial, serif;;
color: #ffffff;
}
a:hover span.btn {
background-color: #ffffff;
background-image: url("http://media.cms.bmc.com/designimages/home-slide-cta-arrow-hover.png";
color: #ffffff;
cursor: pointer;
}
div.greenbtn {
background-color: #80BE2A;
border-radius: 14px 14px 14px 14px;
float: left;
height: 64px;
margin-right: 15px;
margin-top: 25px;
transition: all 0.2s ease 0s;
width: 270px;
cursor:pointer;
}
div.greenbtn a {
color: white;
display: block;
height: 90px;
text-align: left;
text-decoration: none;
}
div.greenbtn a span.boxleft {
display: block;
float: left;
width: 210px;
}
div.greenbtn a span.boxright {
display: block;
float: left;
height: 54px;
opacity: 0.9;
padding: 5px 0 0;
width: 54px;
}
div.greenbtn a span.boxright img {
}
div.greenbtn a:hover span.boxright {
opacity: 1;
}
div.greenbtn a .greenbtntitle {
background-image: url("http://media.cms.bmc.com/designimages/greenbtn_whitearrow.png");
background-position: 150px 6px;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
font-family: 'Open Sans',arial,serif;
font-size: 18px;
font-weight: 400;
margin: 22px 15px 0 25px;
transition: color 0.2s ease 0s;
cursor:pointer;
}
div.greenbtn a .greenbtnsubtitle {
color: #FFFFFF;
display: block;
font-family: 'Open Sans',arial,serif;
font-size: 12px;
line-height: 17px;
margin: 0 15px;
transition: color 0.2s ease 0s;
cursor:pointer;
}
div.greenbtn:hover {
background-color: #15ADD4;
opacity: 1;
}
Links
Example:
Link
Link with blue arrow
a:link {
color: #006BB6;
text-decoration: none;
}
a:hover {
color: #0D97F2;
text-decoration: underline;
}
a:visited {
color: #006BB6;
text-decoration: none;
}
a:active {
color: #0D97F2;
text-decoration: none;
}
.bluearrow {
background: url("http://media.cms.bmc.com/designimages/icon_arrow.png") no-repeat scroll right center transparent;
font-family: Arial,Helvetica,sans-serif;
font-style: normal;
font-size: 12px;
margin: 6px 0 16px;
text-align: left;
line-height: 18px;
height: 30px;
padding-right: 25px;
}
Paragraph
Example:
This is a paragraph.
p {
font-size: 12px;
color: #213443;
font-family: 'Open Sans',"Helvetica Neue",arial,serif;
font-style: normal;
margin: 6px 0 16px;
text-align: left;
line-height: 18px;
}
Headers
Example:
I am a primary header
I am a main title header
I am a secondary header
I am a sub header
I am a sub header with an arrow
I am a secondary sub header
h1, h2, h3, h4, {
color: #213443;
font-family: 'Open Sans',"Helvetica Neue",arial,serif;
font-style: normal;
margin: 0 0 10px;
padding: 15px 0 20px;
text-align: left;
}
.h1 {
font-size: 28px;
font-weight: 500;
line-height: 32px;
}
.h2 {
font-size: 17px;
font-weight: 500;
line-height:25px;
}
.h3 {
font-size: 16px;
font-weight: 600;
line-height: 20px;
}
.h4 {
font-size: 28px;
font-weight: 500;
line-height: 32px;
}
h1.maintitle, h2.maintitle {
color: #213443;
font-family: 'Open Sans',arial,serif;
font-size: 17px;
font-weight: 500;
letter-spacing: -1px;
line-height: 32px;
margin: 0;
padding: 0;
text-align:left;
}
Box Shadow
Used in casting shadows off block-level elements (like divs).
Example:
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
Inner Shadow
Example:
.shadow {
-moz-box-shadow: 0 0 1px 0px rgba(0,0,0,0.1) inset;
-webkit-box-shadow: 0 0 1px 0px rgba(0,0,0,0.1) inset;
box-shadow: 0 0 1px 0px rgba(0,0,0,0.1) inset;
}
Internet Explorer Box Shadow
You need extra elements...
<div class="shadow1">
<div class="content">
Box-shadowed element
</div>
</div>
.shadow1 {
margin: 40px;
background-color: rgb(68,68,68); /* Needed for IEs */
-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
}
.shadow1 .content {
position: relative; /* This protects the inner element from being blurred */
padding: 100px;
background-color: #DDD;
}
One-Side Only
Example:
.one-edge-shadow {
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
Bullets
Example:
.ul {
line-height: 20px;
padding: 0 0 20px;
}
.li {
color: #213443;
line-height: 20px;
list-style-image: url("http://media.cms.bmc.com/designimages/bullet_square_cloud.png");
}
li.interactivetour {
background: url("http://media.cms.bmc.com/designimages/icon_interactive.png") no-repeat scroll 0 4px transparent;
color: #221F1F;
font-family: 'Open Sans',arial,serif;
font-size: 14px;
line-height: 20px;
list-style-image: none;
list-style-type: none;
margin: 0;
padding: 2px 20px 10px 25px;
vertical-align: middle;
}
li.doc {
background: url("http://media.cms.bmc.com/designimages/icon_doc.png") no-repeat scroll 0 4px transparent;
color: #221F1F;
font-family: 'Open Sans',arial,serif;
font-size: 14px;
line-height: 20px;
list-style-image: none;
list-style-type: none;
margin: 0;
padding: 2px 20px 10px 25px;
vertical-align: middle;
}
li.playbutton {
background: url("http://media.cms.bmc.com/designimages/icon_playbutton.png") no-repeat scroll 0 4px transparent;
color: #221F1F;
font-family: 'Open Sans',arial,serif;
font-size: 14px;
line-height: 20px;
list-style-image: none;
list-style-type: none;
margin: 0;
padding: 2px 20px 10px 25px;
vertical-align: middle;
}
Tables
Example:
| Table Title |
Blue Option |
|
| Table Cell Text |
Light Grey |
|
| Table Title |
Teal Option |
|
| Table Cell Text |
Light Grey |
|
| Table Title |
Blue Option |
|
| Table Subtitle |
Medium Grey |
|
| Table Cell Text |
Light Grey |
|
| Table Title |
Teal Option |
|
| Table Subtitle |
Medium Grey |
|
| Table Cell Text |
Light Grey |
|
table.table_shade th {
border-color: #FFFFFF;
border-style: solid;
border-width: 2px;
padding: 4px 4px 4px 8px;
text-align: left;
}
table.table_shade tr {
background: none repeat scroll 0 0 #E9ECEF;
}
table.table_shade td {
padding: 8px;
}
.table_hdr {
background-image: url("http://media.cms.bmc.com/designimages/table_hdr_cloud.png");
background-position: left top;
background-repeat: repeat-x;
border-radius: 7px 7px 0 0;
color: #213443;
font-family: "Helvetica Neue","Arial",sans-serif;
font-size: 11px;
font-weight: 700;
margin: 0;
padding: 4px 4px 5px 8px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.table_hdr_blue {
background-image: url("http://media.cms.bmc.com/designimages/table_hdr_teal_cloud.png");
background-position: left top;
background-repeat: repeat-x;
border-radius: 7px 7px 0 0;
color: #213443;
font-family: "Helvetica Neue","Arial",sans-serif;
font-size: 11px;
font-weight: 700;
margin: 0;
padding: 4px 4px 5px 8px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
table.event_table th {
border: 2px solid #FFFFFF;
border-radius: 7px 7px 0 0;
padding: 4px 4px 4px 8px;
text-align: left;
}
table.event_table td {
border-bottom: 1px solid #E1E1E1;
padding: 4px 4px 4px 10px;
vertical-align: top;
}
td {
color: #213443;
font-family: "Helvetica Neue","Arial",sans-serif;
font-size: 12px;
line-height: 18px;
}
table.table_line td {
border-bottom: 1px solid #E1E1E1;
padding: 4px;
vertical-align: top;
}
td.table_subtitle {
background: none repeat scroll 0 0 #DDE1E5;
padding: 5px;
}
Shaded Box
Example:
Text goes here.
.content_highlight_blue {
background-image: url("http://media.cms.bmc.com/designimages/solution_content_background_blue_cloud.png");
background-position: left top;
background-repeat: repeat-x;
line-height: normal;
padding: 20px;
}
.content_highlight {
background-color: #E7F3FB;
background-image: url("http://media.cms.bmc.com/designimages/content_callout_cloud.png");
background-position: left top;
background-repeat: repeat-x;
border-radius: 7px 7px 7px 7px;
line-height: 18px;
margin-bottom: 10px;
margin-top: 10px;
padding: 20px;
}
Graphic Separator
Example:
#graphic_separator {
background-image: url("http://media.cms.bmc.com/designimages/graphic_separator940x12.png");
background-repeat: no-repeat;
height: 12px;
padding: 0 0 20px;
width: 940px;
}
Social Media Icons
Example:
.socialmedia_container {
left: 0;
position: relative;
top: 11px;
width: 200px;
}
#social_media_icons {
height: 24px;
position: relative;
}
#social_media_icons li {
background: url("http://media.cms.bmc.com/designimages/sprite_social_media_white.png") no-repeat scroll 0 0 transparent;
display: block;
height: 24px;
list-style: none outside none;
position: absolute;
}
#social_media_icons a {
display: block;
height: 24px;
}
#social_media_icons #twitter {
left: 28px;
width: 24px;
}
#social_media_icons #linkedin {
background-position: -40px 0;
left: 58px;
width: 24px;
}
#social_media_icons #slideshare {
background-position: -80px 0;
left: 88px;
width: 24px;
}
#social_media_icons #youtube {
background-position: -120px 0;
left: 118px;
width: 24px;
}
#social_media_icons #facebook {
background-position: -160px 0;
left: 148px;
width: 24px;
}
#social_media_icons #googleplus {
background-position: -200px 0;
left: 178px;
width: 24px;
}
#social_media_icons a:hover {
background: url("http://media.cms.bmc.com/designimages/sprite_social_media_white.png") no-repeat scroll 0 -62px transparent;
}
#social_media_icons #twitter a:hover {
background-position: 0 -64px;
}
#social_media_icons #linkedin a:hover {
background-position: -40px -64px;
}
#social_media_icons #slideshare a:hover {
background-position: -80px -64px;
}
#social_media_icons #youtube a:hover {
background-position: -120px -64px;
}
#social_media_icons #facebook a:hover {
background-position: -160px -64px;
}
#social_media_icons #googleplus a:hover {
background-position: -200px -64px;
}
Search Box
Example:
div#search {
margin: 8px 10px 0 1px;
width: 164px;
}
div#search form {
margin: 0;
padding: 0;
}
div#search form input.submit_button {
float: right;
position: relative;
top: -25px;
}
input#search-btn {
background-color: #E0E0E0;
background-image: url("http://media.cms.bmc.com/designimages/search_magnify_grey.png");
background-position: 147px 6px;
background-repeat: no-repeat;
border: 1px solid #E0E0E0;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1) inset;
font-size: 12px;
height: 15px;
margin: 0;
padding: 6px 25px 6px 5px;
transition: all 0.2s ease 0s;
width: 134px;
}
input#search-btn:hover, input#search-btn:focus {
background-color: #DDF3F8;
background-image: url("http://media.cms.bmc.com/designimages/search_magnify_grey_hover.png");
background-position: 147px 6px;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1) inset;
}
