/* Theme Name: CHNM Theme4 (3v2) Theme URI: http://chnm.gmu.edu Description: CHNM with an expanded palette Author: Jeremy Boggs and Chris Raymond Author URI: http://clioweb.org/ Modifications 05.01.2008 connie added an #about h3 color thing added screenshot margin, but there's an issue 07.21.2008 chris added styles for digital history div, modified link colors for sections, tweaked spacing before and after heads to eliminate "floating heads" problem 08.11.2008 chris applied new color palette (#940 CE ID 16 orange; #046 TL ID 15 blue; #562 RT ID 12 green) to primary nav links on home page and category pages 08.11.2008 this version has a background gradient for digital history and some tweaks to the li selector for digital history div learn-more div 02.25.2009 Chris changed bright red #900 to the new red of logo, #8a2e2e 05.07.2009 Ammon added a div style for #worldmap, on the history departments of the world page 05.15.2009 chris added a donate icon to header nav and reordered to place Donate link first 01.28.2010 Ammon - added style for images to float left and right, while working on 'episodes' section 08.15.2010 Ammon - added styles for the cirle of friends page 10.13.2010 Chris - altered properties for #primary-nav ul and circle pages styles (don't center align text, drop variances to h1 properties) 2.3.2011 Chris - added properties for alignleft and alignright so images displayed nicely in posts; added properties for ul.metadata li to make it look same as dtpublished on home page 5.24.2011 Chris - revised Donation div; changed properties of footer description; changed to 4 from 6 number of previous news items to eliminate trapped white space with smaller donation div 6.28.2013 Chris - revised typography for parts of posts 11.13.2014 J - Added styling for the single-case-study.php 11.17.2014 CR - Changed "sc" to "cs" for Case Study for clarity */ /* /* Grid: 846px wide, 12 columns at 54px each, 11 gutters at 18px each. 1 = 54px 2 = 126px (6 columns) 3 = 198px (4 columns) 4 = 270px (3 columns) 5 = 342px 6 = 414px (2 columns) 7 = 486px 8 = 558px 9 = 630px 10 = 702px 11 = 774px 12 = 846px */ /* == Reset styles == */ @import url("reset.css"); /* == Global Styles == */ body {font:62.5% Helvetica, Arial, sans-serif; background:#222 url("../i/body-bg.png");width:918px; margin:0 auto; color: #333;padding:36px 0;} /* Headings */ h1 {font-weight:normal; font-size:2.4em; margin-bottom:.5em; line-height:1em;} h2 {font-size:2em; font-weight:normal; color:#333; line-height:1.2em; margin-bottom:.25em;} h3 {font-size:1.5em; line-height:1.2em; margin-bottom:.25em; color:#8a2e2e;} h4 {font-size:1.2em; line-height:1.5em; font-weight:bold;} h5 {font-size:1.2em; line-height:1.5em; font-style:italic;} h1,h2,h3 {font-family:"Gill Sans MT", "Gill Sans", Helvetica, Arial, sans-serif;} /* Links */ a:link {color:#369;} a:visited {color:#777;} .post h3 a:visited {color: #369;} a:hover {color:#38c;} a:active {color:#38c;} h1 a, h2 a, h3 a {text-decoration:none;} a img {border:none;} /* Misc elements */ p,ul,ol,dl,address {font-size:1.5em; line-height:1.75; margin-bottom:1.75em;} p.wp-caption-text { font-size: small; font-style: italic; padding: 5px 15px 5px 10px; background: #eee; width: 90%; } #primary .entry p, #primary .entry ul, #primary .entry ol, #primary .entry dl { font-size:1.65em; line-height:150%; margin-bottom:1.65em; } #primary.full p, #primary.full li {font-size:14px;} /* wider measure needs larger font size and line-height*/ #primary.full li {margin-bottom:.5em} ul ul {font-size:1em; margin-left:.75em; margin-bottom:0;} ul {list-style:square; margin-left:.75em;} li p {/*font-size:1em;*/} object {width:0;height:0;} em,i {font-style:italic;} strong,b {font-weight:bold;} hr { border: solid #dddddd; border-width: 1px 0 0; box-sizing: content-box; clear: both; margin: 1.25em 0 1.1875em; height: 0; } blockquote {margin:0.25em 1.5em;} .footnote {font-size: 1.2em; margin-bottom: 5px;} sup {line-height: 1.2em; margin-bottom: 2px;} sup a {text-decoration: none;} /* Misc Classes */ .navigation {margin-bottom:20px;overflow:hidden;} .navigation li {display:inline;} .navigation a {text-decoration:none;} .navigation .previous, .navigation .next {display:block; float:left; width: 48%;} .navigation .next {float:right; text-align:right;} #top-navigation {border-bottom:1px solid #333; font-size:1.2em; line-height:1.5em; margin-bottom:1.5em;} .alignleft {float:left; display:block;margin-right:20px;} .alignright {float:right; margin-left:20px;} /* == Wrap == */ #wrap {background:#dae9f6 url("../i/wrap-bg.png") 50% 0 repeat-y;;overflow:hidden; zoom:1;} /* == Header == */ #header {overflow:hidden;zoom:1; background:#fff url("../i/ends-bg.png") top left no-repeat; padding:18px;} #logo {float:left; display:block; width: 550px;} #logo img {width: 65%; height: auto;} #site-meta {float:right; width: 330px;text-align:right;} #site-meta #s {text-align:left;} #site-meta li {margin-left:6px; font-weight:bold;} #site-meta li#nav-donate a {padding-top: 4px;} */ /*#site-meta ul.navigation #nav-donate a:hover {color:#38c;}*/ /* == Primary Nav == */ #primary-nav {margin-bottom:0; margin-top:18px;margin-left:18px;font-size:2em;font-family:"Gill Sans MT", "Gill Sans", sans-serif;overflow:hidden; zoom:1;} ul#primary-nav {width: 909px; padding-left: 9px;} #primary-nav li {display:block; float:left; width: 293px;text-indent:18px;padding:0;margin-right:1px;font-family:"Gill Sans MT", "Gill Sans", Helvetica, Arial, sans-serif;} #primary-nav a {color:#fff; border-bottom:1px solid #dae9f6;text-decoration:none;display:block; float:left; width: 293px; padding:10px 0 6px;margin-right: 1px;} #primary-nav #id-16 a {background:#940;} #primary-nav #id-16 a:hover {background:#c51;} #primary-nav #id-15 a {background:#046} #primary-nav #id-15 a:hover {background:#268;} #primary-nav #id-12 a {background:#562;} #primary-nav #id-12 a:hover {background:#784;} #collections-and-exhibitions #primary-nav #id-16 a {background:#940;border-bottom:1px solid #940;} #research-and-tools #primary-nav #id-12 a {background:#562;border-bottom:1px solid #562;} #teaching-and-learning #primary-nav #id-15 a {background:#046; border-bottom:1px solid #046;} /* == Content == */ #content { background:#fff;border:1px solid #cddae9; margin-left:18px; margin-right:18px; padding:17px;overflow:hidden; zoom:1;clear:both;} #collections-and-exhibitions #content {border-top:4px solid #940;} #research-and-tools #content {border-top:4px solid #562;} #teaching-and-learning #content {border-top:4px solid #046;} /* Home */ #home #content {border:none; background:transparent; margin:0; padding:0;} #home #featured-project {background-repeat:no-repeat !important;background-position:top right;} #home #secondary { background:#fff;border:1px solid #cddae9; margin-left:18px; margin-right:18px; padding:0 17px 17px 17px;overflow:hidden; zoom:1;} /* Main Category Nav == Collecting and Exhibiting, Research and Tools, Teaching and Learning */ #categories {overflow:hidden; padding-left:0;margin-left:18px;} #categories .category-description p {font-size:1.3em;line-height:1.5;} #primary .category {display:block; float:left; width:293px; margin-right:1px;height:15em;} #primary .category h1 {font-size:2em; margin-bottom:18px; background: #000;} #primary .category h1 a {display:block; padding:12px 18px 9px;border-bottom:1px solid #fff; background-position:100% 50%; color:#fff;background-repeat:no-repeat;} #primary .category h1 a:hover {} .category .icon {float:left; margin-right:12px;} #primary .category .category-description {margin-left:18px; margin-right:18px; color:#333;} #primary #collecting-and-exhibiting {border-bottom:4px solid #940;} #primary #collecting-and-exhibiting h1 a {background:#940 url(../i/icon_small_CEmuseum.gif) no-repeat 95% 60%;} #primary #collecting-and-exhibiting h1 a:hover {background: #c51 url(../i/icon_small_CEmuseum.gif) no-repeat 95% 60%;} #primary #teaching-and-learning {border-bottom:4px solid #046;} #primary #teaching-and-learning h1 a {background:#046; }/*url(../i/icon_small_TLlightbulb.gif) no-repeat 95% 60%;*/ #primary #teaching-and-learning h1 a:hover{background:#268;} /*url(../i/icon_small_TLlightbulb.gif) no-repeat 95% 60%*/ #primary #research-and-tools {border-bottom:4px solid #562;} #primary #research-and-tools h1 a {background:#562 url(../i/icon_small_RTgear.gif) no-repeat 95% 60%;} #primary #research-and-tools h1 a:hover{background:#784 url(../i/icon_small_RTgear.gif) no-repeat 95% 60%;} #research-and-tools #id-12, #collections-and-exhibitions #id-16, #teaching-and-learning #id-15 {} #research-and-tools #id-12 a, #collections-and-exhibitions #id-16 a, #teaching-and-learning #id-15 a {color:#fff;} #research-and-tools #id-12 a {background: #562;} #collections-and-exhibitions #id-16 a {background: #940;} #teaching-and-learning #id-15 a {background: #046;} #worldmap {float:right; margin-left:10px;} #departmentform {width:450px; background:#eee;} #departmentsuggest {width:450px; background:#eed;} #departmentform form div.row, #departmentsuggest form div.row {padding:8px;} #departmentform form div.row label, #departmentsuggest form div.row label {float:left; width:30px; font-weight:bold;} #departmentform .row input, #departmentsuggest .row input {margin-left: 35px;} #departmentnav {margin-bottom:20px;} #departmentnav div.row form {display:inline;} #departmenterror {margin:20px; color:#900; padding:8px; font-weight:bolder;} /* Featured Project == Rotates and determines background image based on the class attribute of the featured-project div. */ #secondary #featured-project {float:right; padding:0px 0 0;overflow:hidden; background-position:bottom right; background-repeat:no-repeat; padding-right: 414px;float:none; width: auto; border:1px solid #ddd; border-width: 0 0 1px;} #secondary .french-revolution {background-image:url("/wordpress/ui/i/featured-project-bg/frenchrev-bg.jpg");} #secondary .scholarpress {background-image:url("/wordpress/ui/i/featured-project-bg/scholarpress-bg.jpg");} #secondary .clearinghouse {background-image:url("/wordpress/ui/i/featured-project-bg/clearinghouse-bg.jpg");} #featured-project h1, #featured-project h2, #featured-project p {} #featured-project h1 {font-size:1.1em; color:#444; line-height:1.5em; margin:18px 0 .5em; font-weight:bold; text-transform:uppercase; letter-spacing:2px;} #featured-project h2 {font-size:2.4em; margin:0 0 .25em; line-height:1.1em;} #featured-project p {padding-right: 9px;} #home #featured-project p, #home #featured-news .excerpt p {font-size:14px;} /* News */ #home .news {overflow:hidden;zoom:1; width:414px; padding-top:18px; padding-bottom:0;float:left;} #home #featured-news {float:left;} #home #recent-post {float:left; width: 414px;} #home #recent-post h1 {margin: 0 0 .25em;} #home #recent-post h2 {font-size:2em; margin-bottom:.25em; line-height:1.1em;} #home #recent-post img {float:left; padding-right:10px;} #recent-post .dtpublished, #recent-post .excerpt p, #recent-post .excerpt, #recent-post .continue-reading {display:inline;} #recent-post .dtpublished {border-right: 1px solid #333; padding-right: 6px; margin-right:6px; font-weight:bold;} #recent-post .entry-content {margin-bottom:1.8em;padding-right: 9px;} #home a:visited {color:#369;} #home a:hover, #home a:active {color:#38c;} #home #previous-posts{margin-bottom:0;/*float:right; */width: 396px;margin-left: 18px;} #home #previous-posts ul {margin-bottom:0;margin-left:0; list-style:none;} #home #previous-posts li {border-bottom:1px solid #ddd; color:#777;overflow:hidden; padding:0.5em 0;text-align:left;} #home #previous-posts li a { text-align:left; text-decoration:none; font-weight:bold; display:block;} #home #previous-posts li a:visited {color: #369;} .news-meta a {text-decoration:none; color:#8a2e2e; font-weight:bold;padding:4px 0;} .news-meta a.rss {background:url("/wordpress/ui/i/feed-icon-14x14.png") 0 50% no-repeat; padding-left: 18px;} /* Grants and Awards */ #home #grants-and-awards {overflow:hidden;zoom:1; clear:both; padding:42px 0; background: #f5ebba;margin:18px 0;border:1px solid #ccbe8e;border-width: 1px 0 1px;} #grants-and-awards .about {} #grants-and-awards .about h1 {margin:0 0pt 0.5em 18px;} #grants-and-awards .about p {margin: 0 0 1.2em 18px;padding-right: 18px;font-size:13px; line-height:20px;font-style:italic;} #grants-and-awards .about .callout {font-weight:bold;} #grants-and-awards .about .callout a {color:#8a2e2e; text-decoration:none;} #grants-and-awards .about h2 {font-size:2.4em; margin-bottom:.25em; line-height:1.1em;margin-top: 12px;} #grants-and-awards .learn-more {margin-bottom:0;float:right; width: 414px;margin-top: 12px;} #grants-and-awards .learn-more h1 {margin:0px 0pt .5em;color:#555;font-size:1.1em;font-weight:bold;letter-spacing:2px;margin:0pt;text-transform:uppercase;} #grants-and-awards .learn-more ul {margin-bottom:0;margin-left:0; list-style:none;margin-right: 12px;} #grants-and-awards .learn-more li {text-align:left;overflow:hidden; padding:0.5em 18px .5em 0;} #grants-and-awards .learn-more li a {display:block;font-weight:bold;text-align:left;text-decoration:none;color: #900;} #grants-and-awards .learn-more li a:hover {color: #333;} #donate-button {overflow:hidden; width:414px;margin:0 auto 10px;} #donate-button a {display:block;height:65px;width:202px;float:left;} #donate-button a.donate-right {margin-left:10px;} .donatelist {list-style-type:none;} /*What is Digital History*/ #essay-search {width:500px;} #home #digital-history {overflow:hidden;zoom:1; border-bottom:0px solid #ddd;float:left; padding-top:18px; padding-bottom:18px;width:100%;background: #afc459;border:3px solid #4c5b2c; border-width: 1px 0 0;margin-top:18px;} #digital-history #about {float:left; width: 414px;} #digital-history #about h1 {margin:12px 0pt 0.5em 18px;color:#333;} #digital-history #about p {margin-left: 18px;padding-right: 9px; color:#333;} #digital-history #about h2 {font-size:2.4em; color:#333;margin-bottom:.25em; line-height:1.1em;margin-top: 12px;} #home #learn-more {margin-bottom:0;float:right; width: 414px;margin-top: 12px;} #home #learn-more h1 {margin:0px 0pt 2em;color:#333;font-size:1.1em;font-weight:bold;letter-spacing:2px;margin:0pt;text-transform:uppercase;} #home #learn-more ul {color:#333; margin-bottom:0;margin-left:0; list-style:none;margin-right: 12px;} #home #learn-more li {text-align:left;overflow:hidden; padding:0.5em 18px .5em 0;} #home #learn-more li a {display:block;font-weight:bold;text-align:left;text-decoration:none;color: #4c5b2c;} #home #learn-more li a:hover {color: #333;} /* Category page styles */ #categorypages {margin-right:-18px; display:block; overflow:hidden;padding:0;} /* Changes icon background depending on specific category page */ .research-and-tools {overflow:hidden;background:#fff url("/wordpress/ui/i/research-and-tools-big.gif") top left no-repeat;} .collecting-and-exhibiting {overflow:hidden;background:#fff url("/wordpress/ui/i/collecting-and-exhibiting-big.gif") top left no-repeat;} .teaching-and-learning {overflow:hidden;background:#fff;} /*url("/wordpress/ui/i/teaching-and-learning-big.gif") top left no-repeat*/ #category-meta { border-bottom:1px solid #ccc; padding:18px 0; overflow:hidden; margin-bottom:1.8em;} #category-meta h1 {width: 342px; float:left; display:block;font-size: 3.4em; margin:0; } /* changes color of h1 depending on specific category page */ #teaching-and-learning h1 {color: #046;} #collections-and-exhibitions h1 {color: #940;} #research-and-tools h1 {color: #562;} #category-meta p {float:right; width: 486px; margin:0; padding:0; font-size:1.5em; font-weight:bold;} .cw-categorypage {float:left; display:block; width: 270px;padding:0 0; margin-right:18px;background:transparent/* url('/wordpress/ui/i/chnm-project-bg.png')*/; border:3px solid #999; border-width: 0; margin-bottom: 18px;height: 28em; } .cw-categorypage .image {width: 260px; height:80px; /*padding:4px;*/ background:transparent;display:block; margin-bottom:9px; border:1px solid #ccc; border-width: 1px;} .cw-categorypage h2 {font:1.5em "Helvetica Neue",Helvetica, Arial, sans-serif; font-weight:bold; margin-bottom:0.6em;} .cw-categorypage p.more {margin-top: -1em;} #research-and-tools .cw-categorypage a {color: #562;} #research-and-tools .cw-categorypage a:hover {color: #784;} #collections-and-exhibitions .cw-categorypage a {color: #940;} #collections-and-exhibitions .cw-categorypage a:hover {color: #c51;} #teaching-and-learning .cw-categorypage a {color: #046;} #teaching-and-learning .cw-categorypage a:hover {color: #268;} .footnotes { font-size: 85%; line-height: 1.5em; padding: 10px 0 10px 0; } .footnotes .footnotedivider { width: 120px; border-bottom: 1px solid #ccc; } .footnotes li { margin: 0 0 5px 0; } footnotes ul {list-style:none; margin-left:.75em;} sup.footnote a { text-decoration: none; font-size: 60%; } sup.footnote { line-height: 0em; margin-bottom: 5px; } .footnotereverse a { padding: 0 0 0 5px; text-decoration: none; } /* Post styles */ .post {clear:left; margin-bottom:1.8em;overflow:hidden;} .post small {display:block;font-size:10px;margin-bottom:10px;text-transform:uppercase;} .post small, p.postmetadata {color:#777;} .post h3 {font-size:20px;} .post .postmetadata {border-bottom:1px dotted #777;font-style:italic;padding-bottom:10px;} #home .post .postmetadata {float:right; width:180px;} #home .post .entry {float:left; width:312px} #post-493 .entry {width:auto; float:none;} #post-493 #donate {float:left; width: 404px;} #post-493 #challenge-grant {float:right;width:368px;margin-top:-22px;padding: 18px 18px 0;background:#fff09e;border:3px solid #e7d147; border-width: 2px 0 0;} #post-493 .callout {font-size:1.35em; margin-bottom:1.2em; font-weight:bold;} #post-493 .callout a {color:#900;} /*.post .screenshot {float:right; width:404px; height:240px; padding:4px; background:transparent; display:block; border:1px solid #ccc;}*/ #page .post .screenshot {float:right;display:block;border:1px solid #ccc;padding:2px; /*CR removed height and width definition on div because it leads to distorted images as staff is not given the size parameters and it's unncessary 12.17.2012*/} #page .entry {float:left; width: 404px;} #page .full, #page .full .entry {width:560px;} /* Comments */ .commentlist {margin-top:1.5em;} .commentlist li {border-bottom:1px dotted #ccc; padding-top:18px;} .commentlist .commentmetadata {margin-bottom:0; font-style:italic;} /* Comment Form */ #commentform textarea {width: 550px; padding:4px;} .single .post .postmetadata {float:left; width: 198px;} .single .post .entry {float:right; width: 404px;} ul.postmetadata li {font-size:12px;font-weight:bold; color:#333;} .entry ul li {list-style:outside disc;margin-left:20px;} #post-nav {font-size:1.2em; line-height:1.5em; margin-bottom:1.5em;} span.pullquote {float:left; display:block; width: 378px; padding:18px; font-size:1.8em; color: #900;} /* Staff Pages */ #staff #primary {overflow:hidden; zoom:1;} .staff #info {float:left; width: 196px; list-style:none;margin-left:0;padding-left:0;} .staff #info .photo {width: 186px; height:186px; border:1px solid #ccc; padding: 4px;} .staff #info .title {font-weight:bold;} .staff #bio {float:right; width: 630px;} #staff .staff-list {margin-right: -18px; border:0;} #staff .staff-member {float:left; width: 270px; margin-right: 18px; height:100px; margin-bottom:1.8em;} #staff .staff-member h2 {font:1.5em "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:bold;} #staff .staff-member p {font-weight:normal;} .staff-list h1 {clear: both;} .staff-member .photo img{display:block; float:left; width: 84px; height:84px; padding:4px; border:1px solid #ccc; margin-right: 18px;} #secondary.staff-list {padding-top:18px;} /* About Page */ #about h3 {color: #8a2e2e;} #about #primary {float:left; width: 558px;} #about #secondary {float:right; width: 270px;} #about #primary .post {width: 558px;} /* News Page */ #news #primary {float:left; width: 558px;} #news #secondary {float:right; width: 270px;} #news #primary .post {width: 558px;} /* Labs Page */ #labs #primary {float:left; width: 558px;} #labs #secondary {float:right; width: 270px;} /* Donate Page */ /*added by Roberto April 29th 2009*/ #pledge {border:1px solid #eee; padding:8px;} #pledge table {width:100%;} #recurrence {padding-left:10px;} #donate {float: left; width: 404px;} #challenge-grant {float:right; width:368px; margin-top:0px; padding: 18px 18px 0; background:#f5ebba; border:3px solid #ccbe8e; border-width: 2px 0 0;} #challenge-grant .callout {font-size:1.35em; margin-bottom:1.2em; font-weight:bold; color #8a2e2e;} #challenge-grant .callout a {color:#8a2e2e;} #challenge-grant blockquote {margin: -1em 0 1em 20px; font-weight:bold; color:#8a2e2e;} /* Circle of Friends page*/ #circle {float: left; width: 570px;} #circle-border {border:10px solid #333; padding:1px; width:290px; margin:auto;} #circle-submit {border:none; padding:12px; background:#822; color:#fff; font-size:2em; font-weight:bold; width:100%; cursor:pointer;} #press-submit {margin:10px;} #circle-table {width:100%; margin:auto;} #circle-table td {padding:8px;} #otherdonate {margin-top:20px; text-align:center;font-weight:bold;} /* Episode Pages */ #episode {width:846px;} #episode-sidebar {width:260px; float:right; border:1px solid #333; padding:8px; background:#ddd; margin-left:10px;} #episode img {border:none; padding:4px;} #episode .alignleft {float:left; padding-right:8px;} #episode .alignright {float:right; padding-left:8px;} #episode-menu {margin:20px;} /* Sidelight Pages */ #sidelight {width:846px;} #sidelight img {border:none; padding:4px;} #sidelight .alignleft {float:left; padding-right:8px;} #sidelight .alignright {float:right; padding-left:8px;} #sidelight-menu {margin:20px;} /* Permission Requests page */ #permission_requests li {list-style-type:none;} #permission_requests #form_submit {margin:20px;} #permission_requests .description {font-size:1.2em; font-weight:bold;} /* Essay Pages */ .floatleft {float:left; padding:8px;} .floatright {float:right; padding:8px;} #babeltable {width:50%; margin:2em auto;} #babeltable th {padding:10px;font-weight:bold;} #babeltable td {padding:4px; border-bottom:1px solid #eee;} /* == Footer == */ #footer {padding:18px 18px 0; overflow:hidden; zoom:1; background:#fff url("../i/ends-bg.png") bottom left no-repeat;font-size:smaller;} #footer a {text-decoration:none;} #footer a:visited {color: #336699;} #footer a:hover {text-decoration:underline;} #footer #hcard-chnm {width: 378px; float:right; text-align:right;} #hcard-chnm .adr, #hcard-chnm .university, #hcard-chnm .street-address {display:block;} #footer #secondary-nav {width: 378px; float:left; text-align:left; font-weight:bold;} #footer #secondary-nav li {margin-right: 1em;} #footer #description {color: #8a2e2e;font:1.75em "Gill Sans MT", "Gill Sans", "Helvetica Neue",Helvetica, Arial, sans-serif;clear:both; margin:6px auto 18px;font-style:italic;text-align:center;} /*Tool Tips*/ a.normalTip[title]:hover:after { content: attr(title); padding: 8px; color: #333; position: absolute; right: 5%; top: 100%; white-space: nowrap; z-index: 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 4px #222; -webkit-box-shadow: 0px 0px 4px #222; box-shadow: 0px 0px 4px #222; background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc); }