/*
Document : elements.css
Created on : Aug 25, 2009, 10:33:30 AM
Author : sodaniels
Description:
Common elements used across entire site.
*/
/*
TODO: Bring in other elements besides Datagrids.
*/
/*
Datagrids
An image presented aligned left of an associated header, text, and other information.
Requirements state that the text cannot wrap under the image. Specific widths have to
be calculated for all elements. Example, with the OOOO being a representation of an image:
OOOOOOOOOOO HEADER
OOOOOOOOOOO
OOOOOOOOOOO Lorem ipsum dolor sit amet, consectetur adipiscing elit.
OOOOOOOOOOO Mauris convallis lectus at velit venenatis aliquam.
OOOOOOOOOOO Vestibulum ante ipsum primis in faucibus orci luctus
OOOOOOOOOOO et ultrices posuere cubilia Curae; Nullam vitae odio
OOOOOOOOOOO nisl, in auctor ipsum. Nulla tortor dui, dictum sed.
*/
.datagrid {
line-height: 15px;
}
.datagrid .no-image {
margin-left: 0 !important;
}
ul.datagrid {
list-style-type: none;
margin: 0;
padding: 0;
}
/* Horizontal Style Datagrid */
ul.datagrid-horizontal {
width: auto;
}
ul.datagrid-horizontal li {
float: left;
margin-left: 20px;
width: 225px;
}
ul.datagrid-horizontal li.first {
margin: 0;
}
/* Promo Style Datagrid */
/* Implicitly, this style is under div.column-01 */
ul.datagrid-promo {
width: 225px;
}
ul.datagrid-promo li h4 {
background: url(../images/background-promo-header.gif) no-repeat;
border-bottom: 1px solid #fff;
color: #828282;
font-size: 1rem;
font-weight: bold;
line-height: 24px;
margin: 0;
padding-left: 10px;
text-align: left;
text-decoration: none;
}
ul.datagrid-promo li p {
background: url(../images/background-promo-content.gif) no-repeat;
color: #828282;
font-size: 1rem;
font-weight: bold;
margin: 0;
padding: 5px 10px 3px 10px;
text-align: left;
}
ul.datagrid-promo li a {
font-size: 1rem;
}
ul.datagrid-promo li a.more {
font-size: 1rem;
font-weight: bold;
padding: 0 10px;
}
/* smaller promo for legacy 86x86 image */
ul.datagrid-promo-small {
width: 190px;
}
ul.datagrid-promo-small img {
float: left;
padding-right: 10px;
width: 86px;
}
ul.datagrid-promo-small li h4 {
background: url(../images/background-promo-header.gif) no-repeat;
border-bottom: 1px solid #fff;
color: #828282;
display: inline;
font-size: 1rem;
font-weight: bold;
line-height: 14px;
margin: 0;
padding-left: 0;
text-decoration: none;
}
ul.datagrid-promo-small li h4 a:link {
color: #257fba;
font-size: 1rem;
font-weight: bold;
line-height: 14px;
}
ul.datagrid-promo-small li h4 a:visited {
color: #257fba;
font-size: 1rem;
font-weight: bold;
line-height: 14px;
}
ul.datagrid-promo-small li h4 a:hover {
color: #257fba;
font-size: 1rem;
font-weight: bold;
line-height: 14px;
}
ul.datagrid-promo-small li h4 a:active {
color: #257fba;
font-size: 1rem;
font-weight: bold;
line-height: 14px;
}
ul.datagrid-promo-small li p {
background: none;
color: #828282;
font-size: 1rem;
font-weight: bold;
margin: 0;
padding: 0;
}
ul.datagrid-promo-small li a {
font-size: 1rem;
}
ul.datagrid-promo-small li a.more {
font-size: 1rem;
font-weight: bold;
padding: 0 10px;
}
/* Promo-02 Style Datagrid */
ul.datagrid-promo-02 {
width: 745px;
}
ul.datagrid-promo-02 li h4 {
background: url(../images/background-promo-header.gif) no-repeat;
border-bottom: 1px solid #fff;
color: #828282;
font-size: 1rem;
font-weight: bold;
margin: 0;
padding: 4px 0 5px 10px;
text-decoration: none;
}
ul.datagrid-promo-02 li h4 a {
color: #828282;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
}
ul.datagrid-promo-02 li p {
background: url(../images/background-promo-content.gif) no-repeat;
color: #828282;
font-size: 1rem;
font-weight: normal;
margin: 0;
padding: 5px 10px 3px 10px;
}
ul.datagrid-promo-02 li div.description {
background: url(../images/background-promo-content.gif) no-repeat;
color: #828282;
font-size: 1rem;
font-weight: normal;
margin: 0;
padding: 5px 10px 3px 10px;
}
ul.datagrid-promo-02 li div.description p {
background: none;
color: #828282;
font-size: 1rem;
font-weight: normal;
margin: 0;
padding: 0;
}
ul.datagrid-promo-02 li a {
font-size: 1rem;
}
ul.datagrid-promo-02 li a.more {
font-size: 1rem;
font-weight: bold;
padding: 0 10px;
}
/* Promo-small Style Datagrid */
ul.datagrid-promo-small {
width: 190px;
}
ul.datagrid-promo-small img {
float: left;
padding: 0 10px 10px 0;
}
ul.datagrid-promo-small li h4 {
background: url(../images/background-promo-header.gif) no-repeat;
border-bottom: 1px solid #fff;
color: #828282;
font-size: 1rem;
font-weight: bold;
margin: 0;
padding: 0 0 5px 0;
text-decoration: none;
}
ul.datagrid-promo-small li h4 a {
color: #828282;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
}
ul.datagrid-promo-small li p {
background: none;
color: #828282;
font-size: 1rem;
font-weight: normal;
margin: 0;
padding: 0;
}
ul.datagrid-promo-small li a {
font-size: 1rem;
}
ul.datagrid-promo-small li a.more {
font-size: 1rem;
font-weight: bold;
padding: 0 10px;
}
/* Promo-small Style Datagrid spanning 790px full page */
ul.datagrid-promo-fullpage-small {
width: 790px;
}
ul.datagrid-promo-fullpage-small li {
margin-left: 96px;
padding: 0 0 20px 0;
width: 694px;
}
ul.datagrid-promo-fullpage-small img {
float: left;
margin-left: -96px;
width: 86px;
}
ul.datagrid-promo-fullpage-small li h4 {
background: url(../images/background-promo-header.gif) no-repeat;
border-bottom: 1px solid #fff;
color: #828282;
font-size: 1rem;
font-weight: bold;
margin: 0;
padding: 0 0 5px 0;
text-decoration: none;
width: 694px;
}
ul.datagrid-promo-fullpage-small li h4 a {
font-size: 1rem;
font-weight: bold;
text-decoration: none;
}
ul.datagrid-promo-fullpage-small li p {
background: none;
font-size: 1rem;
font-weight: normal;
margin: 0;
padding: 0;
width: 694px;
}
ul.datagrid-promo-fullpage-small li a {
font-size: 1rem;
}
ul.datagrid-promo-fullpage-small li a.more {
font-size: 1rem;
font-weight: bold;
padding: 0 0 0 5px;
}
/* Featured Item Style Datagrid */
ul.datagrid-featured {
margin: 0;
width: 570px;
}
ul.datagrid-featured li {
clear: both;
margin: 0 0 20px 0;
padding: 0 0 20px 245px;
width: 325px;
} * html ul.datagrid-featured li { w\idth: 570px; width: 325px; }
ul.datagrid-featured img {
float: left;
margin-left: -245px;
}
ul.datagrid-featured h4 {
color: #555;
float: left;
font-size: 1.25rem;
font-weight: normal;
line-height: 18px;
text-align: left;
margin: 0 0 2px 0;
width: 325px;
}
ul.datagrid-featured h4 a {
color: #555;
font-size: 1.25rem;
text-align: left;
}
ul.datagrid-featured h4.with-sibling { /* has a sibling header element right under it, so take away bottom margin */
margin-bottom: 0 !important;
}
ul.datagrid-featured h5 {
float: left;
font-size: 12px;
line-height: 16px;
margin: 3px 0 10px 0;
}
ul.datagrid-featured li div.description {
float: left;
font-size: 1rem;
font-weight: normal;
line-height: 18px;
margin: 0 0 5px 0;
padding: 0;
text-align: left;
width: 325px;
}
ul.datagrid-featured li p {
float: left;
font-size: 1rem;
font-weight: normal;
line-height: 18px;
margin: 0 0 5px 0;
padding: 0;
text-align: left;
width: 325px;
}
ul.datagrid-featured li div.description p {
float: none;
font-size: 1rem;
font-weight: normal;
line-height: 18px;
margin: 0 0 5px 0;
padding: 0;
text-align: left;
}
ul.datagrid-featured a.more {
float: left;
line-height: 18px;
margin: 0;
padding: 0;
text-align: left;
width: 325px;
}
ul.datagrid-featured a.submit {
clear: both;
margin: 10px 0 0 0;
}
ul.datagrid-featured div.guest-chef-image {
border:1px solid #DEDEE0;
padding:5px;
height:100px;
width:213px;
margin-left:-245px;
float:left;
}
ul.datagrid-featured div.guest-chef-image img{
float:left;
margin-left:0px;
}
ul.datagrid-promo-02 div.guest-chef-image {
border:1px solid #DEDEE0;
padding:5px;
height:100px;
width:213px;
float:left;
}
ul.datagrid-promo-02 div.guest-chef-image img{
float:left;
margin-left:0px;
}
/* Smaller Featured Item Style Datagrid */
/* Featured Item Style Datagrid */
ul.datagrid-featured-small {
margin: 0;
width: 570px;
}
ul.datagrid-featured-small li {
clear: both;
margin: 0 0 20px 0;
padding: 0 0 20px 120px;
width: 450px;
} * html ul.datagrid-featured-small li { w\idth: 570px; width: 450px; }
ul.datagrid-featured-small img {
float: left;
margin-left: -120px;
}
ul.datagrid-featured-small h4 {
color: #555;
float: left;
font-size: 1.25rem;
line-height: 18px;
text-align: left;
margin: 0 0 10px 0;
width: 450px;
}
ul.datagrid-featured-small h4 a {
color: #555;
font-size: 1.25rem;
text-align: left;
}
ul.datagrid-featured-small h4.with-sibling { /* has a sibling header element right under it, so take away bottom margin */
margin-bottom: 0 !important;
}
ul.datagrid-featured-small h5 {
font-size: 12px;
padding-bottom: 10px;
}
ul.datagrid-featured-small li p {
float: left;
font-size: 1rem;
font-weight: normal;
line-height: 18px;
margin: 0;
padding: 0;
text-align: left;
width: 450px;
}
ul.datagrid-featured-small a.more {
float: left;
line-height: 18px;
margin: 0;
padding: 0;
text-align: left;
width: 450px;
}
/* Bio Style Datagrid (see VCS Consumer class detail page) */
ul.datagrid-bio {
margin: 0;
width: 570px;
}
ul.datagrid-bio li {
clear: both;
margin: 0 0 20px 0;
padding: 0 0 20px 168px;
width: 402px;
} * html ul.datagrid-bio li { w\idth: 570px; width: 402px; }
ul.datagrid-bio img {
float: left;
margin-left: -168px;
}
ul.datagrid-bio h3 {
color: #555;
float: left;
font-size: 1.25rem;
line-height: 18px;
text-align: left;
margin: 0 0 10px 0;
width: 402px;
}
ul.datagrid-bio h3 a {
color: #555;
font-size: 1.25rem;
text-align: left;
}
ul.datagrid-bio li p {
float: left;
font-size: 1rem;
font-weight: normal;
line-height: 18px;
margin: 0;
padding: 0;
text-align: left;
width: 402px;
}
ul.datagrid-bio a.more {
float: left;
line-height: 18px;
margin: 0;
padding: 0;
text-align: left;
width: 402px;
}
/* Brochure Style Datagrid (see VCS Consumer Special Events page) */
ul.datagrid-brochure {
margin: 0;
width: 780px;
}
ul.datagrid-brochure li {
clear: both;
margin: 0 0 20px 0;
padding: 0 0 20px 193px;
width: 587px;
} * html ul.datagrid-bio li { w\idth: 570px; width: 402px; }
ul.datagrid-brochure img {
float: left;
margin-left: -193px;
border-style:solid;
border-width:1px;
border-color:#ebebeb;
}
ul.datagrid-brochure .pdf {
padding-bottom: 0;
}
ul.datagrid-brochure h3 {
color: #555;
float: left;
font-size: 1.25rem;
line-height: 18px;
text-align: left;
margin: 0 0 10px 0;
width: 587px;
}
ul.datagrid-brochure h3 a {
color: #555;
font-size: 1.25rem;
text-align: left;
}
ul.datagrid-brochure li p {
float: left;
font-size: 1rem;
font-weight: normal;
line-height: 18px;
margin: 0 0 10px 0;
padding: 0;
text-align: left;
width: 587px;
}
ul.datagrid-brochure a.more {
float: left;
line-height: 18px;
margin: 0;
padding: 0;
text-align: left;
width: 587px;
}
/* News Item page */
ul.datagrid-news img {
float: right;
margin-left: 10px;
}