/* Imports */ @import url("reset.css"); /***** Global *****/ /* Body */ body { background: #eaf2f2 url('/graphics/background.jpg') repeat center top fixed; position: relative; /* fixes size on iPad */ -webkit-background-size: 2000px 1920px; color: #000305; font-size: 87.5%; /* Base font size: 14px */ font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 1.429; margin: 0; padding: 0; text-align: left; } /* Headings */ h2 { font-size: 2.5em } /* 22px */ h3 { font-size: 1.429em } /* 20px */ h4 { font-size: 1.286em } /* 18px */ h5 { font-size: 1.143em } /* 16px */ h6 { font-size: 1em } /* 14px */ h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.1; margin-bottom: .8em; } /* Anchors */ a { color: #13462e; outline: 0;} a img { border: 0px; text-decoration: none;} a:link, a:visited { text-decoration: none; padding: 0 0px; } a:hover, a:active { color: #13462e; text-decoration: none; } /* Paragraphs */ p { margin-bottom: 1.143em;} * p:last-child {margin-bottom: 0;} ::-moz-selection { background: #F6CF74; color: #fff;} ::selection { background: #F6CF74; color: #fff;} /***** Layout *****/ .wbody { background: #fff; clear: both;} .body { clear: both; margin: 0 auto; width: 1024px; position: relative; } /* Header */ #main h1 {margin-left: 5px; height: 130px; width: 400px; padding:15px 0px 5px 0px; float: left;} #main .tools { height: 150px; width: 614px; float: right; margin-right: 5px; } #main .tools .login { height: 25px; width: 614px; float: left; margin: 15px 0px 0px 0px; text-align: right; } #main .tools .searchBox { height: 60px; width: 614px; float: left; text-align: right; } #main .tools .searchBox input { border: 1px solid #fff; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } #main .tools .searchBox .button { background: #13462e; color: #fff; height: 44px; width:100px; margin: 10px 0px 0px 10px; float: right; font-size: 24px; border: 1px solid #519278; } #main .tools .searchBox .button:hover { background: #519278; border: 1px solid #13462e; } #main .tools .searchBox .field { float: right; margin: 10px 0px 0px 0px; width: 300px; padding:7px 0px 7px 5px; font-size: 24px; color: #ccc; } /* Main Nav */ #main nav { font-size: 1em; height: 40px; line-height: 40px; margin: 0 5px 0 5px; padding: 0; text-align: left; width: 1014px; letter-spacing: -1px } #main nav ul { list-style: none; margin: 0; width: 1014px;} #main nav li { float: left; display: inline; margin: 0px 0px 0px 1px; width: 107px; background: #777; } #main nav a:link, #main nav a:visited { color: #fff; display: inline-block; height: 40px; width: 107px; text-decoration: none; text-shadow: #555 0px -1px 0px; } #main nav a:hover, #main nav a:active, #main nav .active a:link, #main nav .active a:visited { background: #b9cb71; color: #fff; text-shadow: #999 0px -1px 0px; } #main nav .home a:hover, #main nav .homeON a:active,#main nav .homeON a:link, #main nav .homeON a:visited { background: #555; color: #fff; } #main nav .project a:hover, #main nav .projectON a:active,#main nav .projectON a:link, #main nav .projectON a:visited { background: #fcbc06; color: #fff; text-shadow: #999 0px -1px 0px; } #main nav .decor a:hover, #main nav .decorON a:active,#main nav .decorON a:link, #main nav .decorON a:visited { background: #97d324; color: #fff; text-shadow: #999 0px -1px 0px; } #main nav .recipes a:hover, #main nav .recipesON a:active,#main nav .recipesON a:link, #main nav .recipesON a:visited { background: #e87331; color: #fff; text-shadow: #999 0px -1px 0px; } #main nav .health a:hover, #main nav .healthON a:active,#main nav .healthON a:link, #main nav .healthON a:visited { background: #a15ca4; color: #fff; text-shadow: #999 0px -1px 0px; } #main nav .style a:hover, #main nav .styleON a:active,#main nav .styleON a:link, #main nav .styleON a:visited { background: #93b372; color: #fff; text-shadow: #999 0px -1px 0px; } #main nav .rela a:hover, #main nav .relaON a:active,#main nav .relaON a:link, #main nav .relaON a:visited { background: #ad0c0c; color: #fff; text-shadow: #999 0px -1px 0px; } #main nav .trends a:hover, #main nav .trendsON a:active,#main nav .trendsON a:link, #main nav .trendsON a:visited { background: #0ba882; color: #fff; text-shadow: #999 0px -1px 0px; } #main nav .holidays a:hover, #main nav .holidaysON a:active,#main nav .holidaysON a:link, #main nav .holidaysON a:visited { background: #dd47d6; color: #fff; text-shadow: #999 0px -1px 0px; } #main nav .misc a:hover, #main nav .miscON a:active,#main nav .miscON a:link, #main nav .miscON a:visited { background: #0685c5; color: #fff; text-shadow: #999 0px -1px 0px; } #main nav li img { padding: 8px 0px 0px 10px; } #main nav li:first-child { margin-left: 0; width: 42px; height: 40px; } #main nav li:first-child a { width: 42px; } #main nav li:first-child, #main nav li:first-child a { border-top-left-radius: 2px; -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-bottom-left-radius: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; } #main nav a:last-child { width: 107px; } #main nav li:last-child, #main nav li:last-child a { border-top-right-radius: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-bottom-right-radius: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; } /* Bottom Nav */ #bottomNav nav, #recipeNav nav { font-size: 1.143em; height: 40px; line-height: 40px; margin: 0 0 0 0; padding: 0; text-align: left; width: 704px; } #bottomNav nav ul { list-style: none; margin: 0; width: 704px;} #bottomNav nav li { background: #777; float: left; display: inline; margin: 0; width: 347px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; text-align: center; } #bottomNav nav a:link, #bottomNav nav a:visited { color: #fff; display: inline-block; height: 40px; width: 347px; text-decoration: none; } #bottomNav nav a:hover, #bottomNav nav a:active, #bottomNav nav .active a:link, #bottomNav nav .active a:visited { background: #b9cb71; color: #777; text-shadow: none !important; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; width: 347px; } #bottomNav nav li:first-child { margin: 0px 10px 0px 0px; } #recipeNav nav { font-size: 1.143em; height: 40px; line-height: 40px; margin: 0 0 0 0; padding: 0; text-align: center; width: 704px; } #recipeNav nav a { padding: 0px 5px 0px 0px; } /* Main content */ #ribbon {margin: 10px 5px 0px 5px; overflow: hidden; height: 30px; width: 100%; float: left;} .main_content { width: 704px; float: left; } .content { margin-bottom: 10px; margin-left: 5px; overflow: hidden; width: 704px; float: left; } .content .wrapper { height: 100%; padding: 20px; /* Fallback for web browsers that doesn't support RGBa */ background: rgb(255, 255, 255) transparent; /* RGBa with 0.6 opacity */ background: rgba(255, 255, 255, 0.5); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#e5ffffff); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#7fffffff)"; } #topStory { background: #ccc; width:704px; height: 396px; margin-top: 10px; } #storyQ { margin: 0 auto 0 5px; overflow: hidden; height: auto; } #storyQ ul { list-style: none; margin: 0;} #storyQ li { background: #ccc; float: left; margin:0px 0px 10px 0px; width: 347px; height: 195px; } #storyQ li[rel='row0'] { margin:0px 10px 10px 0px; } #storyQ h2, #topStory h2 { color: #333; font-size: 1.429em; letter-spacing: -1px; margin-bottom: .25em; padding: 0 3px; } #storyQ a:link, #storyQ a:visited, #topStory a:link, #topStory a:visited { display: block; text-decoration: none; color: #555; } #storyQ h2:hover, #topStory h2:hover { color: #0b3d2d; } /* tease elements */ #storyQ .singlestory img, #topStory .singlestory img { float: left; border: 0px; width: 100%; height: auto; } #storyQ .singlestory img:hover , #topStory .singlestory img:hover { opacity:.70; filter:alpha(opacity=70); filter: “alpha(opacity=70)”; } #storyQ .singlestory { float: left; position: relative; height: auto; cursor: pointer;} #topStory .singlestory { float: left; position: relative; height: 396px; cursor: pointer; } #storyQ .teaseDesc, #topStory .teaseDesc { /* Fallback for web browsers that doesn't support RGBa */ background: rgb(255, 255, 255) transparent; /* RGBa with 0.6 opacity */ background: rgba(255, 255, 255, 0.9); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#e5ffffff, endColorstr=#e5ffffff); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#e5ffffff, endColorstr=#e5ffffff)"; } #topStory .teaseDesc { position: absolute; bottom: 0px; left: 0px; width: 694px; height: 80px; padding: 5px;} #storyQ .teaseDesc { position: absolute; bottom: 0px; left: 0px; width: 337px; height: 52px; padding: 5px; overflow: hidden; } #topStory .teaseDesc p { font-size: 12px; color: #444; padding: 3px; overflow: hidden; } .sponsored { margin-bottom: 0; padding: 0 3px; font-size: 0.75em; color: #7AA4A6;} /* Story elements */ #Story, #Search { width:704px; margin-top: 10px; } #Story h2 {margin-bottom: .2em; } #Story time { font-size: 10px; } #Story .anchor { height: 396px; margin-bottom: 10px; } #Story .anchor img { height: 396px; width:704px; } #Story .wrapper, #Search .wrapper { height: 100%; margin-bottom: 10px; padding: 20px; /* Fallback for web browsers that doesn't support RGBa */ background: rgb(255, 255, 255) transparent; /* RGBa with 0.6 opacity */ background: rgba(255, 255, 255, 0.5); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#e5ffffff); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#7fffffff)"; } #Story .socialTools { float: right; width: 300px; margin:0px 0px 10px 20px; padding: 10px 5px; background: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #Story p { } #Story ul { list-style: diamond; margin: 0px 0px 20px 40px;} #Story li { margin: 0; } #Story .inArticle { margin: 30px; max-width: 604px; background: url('/graphics/magnifying_glass.png') no-repeat center; } /* IE 7and8 fix for opacity on img hover */ #Story .inArticle a:hover img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); } #Story .inArticle img { display: block; max-width: 604px; text-align: center; margin: 0 auto 0 auto; } #Story .caption { text-align: center; font-size: 10px; } #Story .caption h5 { margin: 5px 0px 0px 0px; font-size: 12px;} #Story .caption p { color: #777; margin: 2px 0px 0px 0px; font-size: 12px;} #Story .inArticle img:hover { opacity:.80; filter: alpha(opacity=80); filter: “alpha(opacity=80)”; } #recipe h3 { color: #aa0000; border-bottom: #aa0000 1px solid; padding: 0px 0px 10px 0px; min-width: 320px; width: 100%; display: inline-block;} #recipe .desc { min-height: 100px; text-align: center; font-style:italic; font-size: 18px; padding: 5px 0px 20px 0px;} #recipe_title time {float: right; font-size: 14px;} #recipe p { padding: 0px 0px 20px 20px; } /* Social Tools */ #Story .print { float: right; padding: 17px 4px 0px 2px; } #Story .print_text { float: right; font-size: 11px; padding: 17px 8px 0px 0px; } #Story .print img { cursor: pointer; } #Story .print_text a:link, #Story .print_text a:visited { color:#333; text-decoration:none; } #componentDiv2 { float: left; margin: 15px 0px 0px 11px; border: #ccc 1px solid; border-radius: 2px; padding: 0 3px; } /* Search */ #Search img { float: left; } #Search ul { list-style: none; margin: 0;} #Search li { min-height: 150px; } #Search li img { margin-right: 10px; } #Search h3 { margin-bottom: 0px; } #Search .desc { width: 562px; } #Search h6 { margin-bottom: 10px; } /* Side elements */ .theSide { overflow: hidden; margin: 10px 5px 10px 10px; width: 300px; float: right; } #rightCol .wrapper, #comingUp { width: 100%; height: auto; margin-bottom: 10px; /* Fallback for web browsers that doesn't support RGBa */ background: rgb(255, 255, 255) transparent; /* RGBa with 0.6 opacity */ background: rgba(255, 255, 255, 0.5); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#e5ffffff); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#7fffffff)"; } #rightCol h3, #comingUp h3 { margin: 0px; padding: 5px 0px 10px 5px; } #rightCol .sponsor ul { list-style: none; margin: 0px 5px 0px 5px; height: 150px; } #rightCol .sponsor li { height: 120px; float: left; width: 140px; } #rightCol .sponsor li img { width: 140px; height: 78px; } #rightCol .sponsor li:first-child { margin-right: 10px; } #rightCol .sponsor li h6 {line-height: 15px; margin: 5px 0px 0px 0px; } #rightCol .blogroll { height: 152px; overflow: hidden; } #rightCol .blogroll ul { list-style: none; margin: 0px 5px 0px 5px; padding: 5px 5px 0px 5px; height: 105px; /* Fallback for web browsers that doesn't support RGBa */ background: rgb(255, 255, 255) transparent; /* RGBa with 0.6 opacity */ background: rgba(255, 255, 255, 0.7); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#e5ffffff); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#7fffffff)"; } #rightCol .related, #rightCol .menu { overflow: hidden; padding: 0px 0px 5px 0px; } #rightCol .related ul, #rightCol .menu ul{ margin: 0px 5px 0px 5px; padding: 5px 5px 5px 5px; /* Fallback for web browsers that doesn't support RGBa */ background: rgb(255, 255, 255) transparent; /* RGBa with 0.6 opacity */ background: rgba(255, 255, 255, 0.7); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#e5ffffff); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#7fffffff)"; } #rightCol .related ul { list-style: none; padding: 5px 5px 5px 5px; } #rightCol .menu ul { list-style: diamond; padding: 5px 5px 5px 30px; } .monsterAd { height: 600px; background: #333; margin-bottom: 20px; } #FBwall, #relatedStories { height: 200px; background: #ccc; margin-bottom: 20px; } /* Bottom elements */ #comingUp { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; height: 100px; margin: 0px 5px 10px 5px; color: #e87331; } #comingUp h4 { padding: 0px 10px 0px 10px; text-align: center; margin-bottom: .4em; color: #555; } #comingUp .wrapper { margin: 0px 5px 0px 5px; padding: 5px 5px 0px 5px; height: 53px; /* Fallback for web browsers that doesn't support RGBa */ background: rgb(255, 255, 255) transparent; /* RGBa with 0.6 opacity */ background: rgba(255, 255, 255, 0.7); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#e5ffffff); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#7fffffff)"; } #social {margin: 0 auto 0 auto; overflow: hidden; height: 100px; margin-bottom: 10px; } #social .FBTease, #social .PinTease, #social .SponTease { float: left; width: 328px; height: 100px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; /* Fallback for web browsers that doesn't support RGBa */ background: rgb(255, 255, 255) transparent; /* RGBa with 0.6 opacity */ background: rgba(255, 255, 255, 0.5); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#e5ffffff); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#7fffffff)"; } #social .FBTease { margin:0px 0px 10px 5px; } #social .PinTease, #social .SponTease { margin:0px 0px 10px 15px; } #social h4 { margin: 0px; padding: 5px 0px 5px 5px; } #social .wrapper { margin: 0px 5px 0px 5px; padding: 5px 5px 0px 5px; height: 61px; text-align: center; /* Fallback for web browsers that doesn't support RGBa */ background: rgb(255, 255, 255) transparent; /* RGBa with 0.6 opacity */ background: rgba(255, 255, 255, 0.7); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#e5ffffff); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#7fffffff)"; } /* Side tabs */ .main_page_tabs .contesttab { margin: 0px 0px 10px 0px; height:132px; position:absolute; right:0; top:240px; z-index:100; } /* ================= for textadlinks ========== */ #social .SponTease ul { margin: 0px 0px 0px 25px; padding: 0px 0px 0px 0px; } #social .SponTease li { margin: 0px 0px 5px 0px; padding: 0px; text-decoration: none; list-style-type: disc; color: #555; font-size: 11px; } #social .SponTease li h4 { margin: 0px; padding: 0px; } #social .SponTease a { color: #333; } #social .SponTease a:link { color:#333; text-decoration:none; } #social .SponTease a:visited { color:#333; text-decoration:none; } #social .SponTease a:visited:hover { color:#2354ac; text-decoration:underline; } #social .SponTease a:link:hover { color:#2354ac; text-decoration:underline; }