/* @override http://www.rickmadsen.com/css/rick-madsen-styles.css */

/* @group global reset - clearfix */

/* First there's the global reset to make everything play nice */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
/* remember to define focus styles! */
:focus { outline: 0; }
body { color: #999; font: 12px Arial, Helvetica, sans-serif; background-color: #000; }
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
hr { height: 10px; background: transparent url(/images/img-hr.gif) no-repeat center; padding: 2px 0; margin: 0; border-style: none; border-width: 0; }
/* Then Clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
/* @end global reset - clearfix */

/* Then we start the site styles */

/* @group basic styles */

a { color: #999; text-decoration: none; }
a:hover { color: #fc0; text-decoration: none; }
strong { font-weight: bold; }
em { font-style: italic; }
h1, h2, h3, h4, h5, h6 { text-align: left; }

h1 { color: #fff; letter-spacing: .02em; line-height: 42px; font-size: 36px; }
h2 { padding-right: 7px; padding-top: 7px; font-size: 18px; color: #bbb; }
h3 { font-weight: bold; color: #260f04; padding-top: 7px; font-size: 14px; }

img.more { vertical-align: middle; }
img.image-left { padding-bottom: 5px; padding-top: 5px; padding-right: 25px; float: left; }

.small { font-size: 10px; padding: 0 10px; font-weight: normal; }

.three-quarters { font-size: 50%; padding: 0 10px; font-weight: normal; color: #ddd; }

.gray { color: #999; }

#container { width: 941px; margin: 0 auto; text-align: center; }

#branding { height: 108px; background: #561700 url(/images/Rick-Madsen-Photographer.jpg) no-repeat; margin-bottom: 7px; }

#main-content { padding-top: 7px; }
#main-gallery-content { padding-top: 7px; text-align: left; }
#main-gallery-content h2 { padding-top: 14px; padding-bottom: 7px; font-size: 24px; color: #fff; }

.intro { padding-top: 7px; font-size: 14px; line-height: 1.5em; width: 90%; }

#featured-photos, 
#flashcontent { float: left; width: 625px; height: 317px; }

#login { width: 500px; margin: 25px auto; padding: 15px; background-color: #fc0; border: 1px solid #999; }

#login h1,
#login h2 { font-weight: normal; }

.float-right { float: right; }
.rodeo-info { float: left; }
/* @end basic styles */

/* @group top-nav */
#top-nav { background: #232323 url(/images/img-top-nav-bg.jpg) no-repeat left top; height: 26px; padding-top: 9px; }

#top-nav ol li { display: inline; font-size: 14px; font-weight: bold; color: #616161; padding-left: 25px; padding-right: 25px; }

#top-nav li ol { left: -999em; display: none; }

#top-nav li:hover ol { left: auto; }

#top-nav ol a, 
#top-nav .on a { color: #616161; text-decoration: none; }

#top-nav li a:hover { color: #d1d1d1; text-decoration: none; }

#top-nav .on a, 
#top-nav .on a:hover,
#top-nav li a:hover { color: #d1d1d1; text-decoration: none; }

/* @end top-nav */

/* @group primary-content */
#primary-content { float: left; width: 597px; text-align: left; margin-right: 7px; font-size: 14px; line-height: 18px; padding: 7px 21px 21px 0; }
#primary-content h2 { padding-top: 12px; }
#primary-content h3 { font-weight: bold; color: #ddd; padding-top: 18px; font-size: 14px; }
#primary-content p { padding: 7px 0; color: #999; line-height: 20px; }
#primary-content ol, 
#primary-content ul { color: #999; }
#primary-content ol li { padding: 7px 0; }
#primary-content ul li { padding: 2px 14px; }
/* @end primary-content */

/* @group right-channel */

#right-channel-home, 
#right-channel { float: right; width: 309px; }

#right-channel h2, 
#right-channel-home h2 { text-align: right; padding-top: 40px; }

#right-channel p { text-align: left; font-size: 14px; line-height: 1.5em; padding-top: 7px; }

#right-channel-home a, 
#right-channel a { color: #fff; font-size: 30px; font-weight: bold; letter-spacing: .02em; text-align: right; }

#right-channel p a { font-size: 14px; }

#right-channel-home a:hover, 
#right-channel a:hover { color: #fc0; text-decoration: none; text-align: right; }

#right-channel p a:hover { text-align: left; }

/* @end right-channel */

/* @group gallery */
#rodeo-gallery, 
#fine-art-gallery, 
#editorial-gallery, 
#stock-gallery { height: 74px; text-align: right; margin-bottom: 7px; }

#rodeo-gallery { background: url(/images/img-rodeo-gallery-bg.jpg) no-repeat left top; }
#fine-art-gallery { background: url(/images/img-fine-art-gallery-bg.jpg) no-repeat left top; }
#editorial-gallery { background: url(/images/img-editorial-gallery-bg.jpg) no-repeat left top; }
#stock-gallery { background: url(/images/img-stock-gallery-bg.jpg) no-repeat left top; margin-bottom: 0; }
/* @end gallery */

/* @group gallery page layout */

.gallery-intro { clear: both; padding-top: 7px; }

.img-more { padding: 0; margin: 0; height: 175px; float: right; padding-top: 7px; }

/* @end gallery page layout */

/* @group header */

#header { text-align: left; margin-top: 7px; padding-left: 3px; padding-top: 7px; }

#header h1,
#header h2 { font-weight: normal; vertical-align: baseline; display: block; }

#header h1 { font-size: 14px; font-weight: bold; padding: 0; line-height: normal; }

#header ol, 
.proof-pages { margin: 0 auto; text-align: center; list-style-type: none; list-style-image: none; }

#header ol li, 
.proof-pages li { list-style-image: none; display: inline; }

#header ol .on, 
.proof-pages .on, 
#header ol li a, 
.proof-pages li a { padding: 1px 4px; font-weight: normal; }

#header ol li a:hover, 
.proof-pages li a:hover { padding: 1px 4px; color: #fc0; text-decoration: none; }

#header ol .on, 
.proof-pages .on { font-weight: bold; color: #d1d1d1; font-size: 14px; }

/* @end header */

/* @group store-content */

.store-content { text-align: left; margin-right: 7px; font-size: 14px; line-height: 18px; padding: 14px 21px 21px 0; border-top: 3px #333 double; margin-top: 14px; }

.store-content-top { text-align: left; margin-right: 7px; font-size: 14px; line-height: 18px; padding: 14px 21px 21px 0; border-top: 0; }

.store-content-top h2, .store-content h2, h4 { color: #fff; line-height: 28px; font-size: 22px; padding-top: 14px; }

.store-content-top h2 { padding-top: 0; }

.store-content h2 { padding-top: 7px; }

.store-content-top h3, .store-content h3, .store-content h4 { color: #fff; }

.store-content-top h3, .store-content h3 { padding-bottom: 7px; padding-top: 1em; }

.store-content p { padding: 7px 0; color: #999; line-height: 20px; }

.store-content ol { color: #999; }

.store-content ol li { padding: 7px 0; }

/* @end store-content */

/* @group homepage secondary content */

#secondary-content { padding-top: 7px; color: #555; }
#secondary-content a { color: #555; }
#secondary-content a:hover { color: #222; }

#secondary-content h3 a { color: #500; }
#secondary-content h3 a:hover { color: #444; }

#middle, 
#rodeo-proofs, 
#about-rick { width: 283px; padding: 0 13px; margin-right: 7px; float: left; height: 257px; }

#middle { width: 309px; padding: 0; }

#rodeo-proofs { float: left; background: url(/images/img-rodeo-proofs-home-bg.jpg) repeat-y left top; }

#about-rick { background: #000 url(/images/img-about-rick-home-bg.jpg) repeat-y left top; float: right; margin-right: 0; padding-top: 10px; height: 247px; }

#far-left, .far-left { width: 317px; float: left; }

#far-right, .far-right { width: 140px; float: right; }

#middle-left, .middle-left { width: 140px; float: left; }

#middle-left-wide, .middle-left-wide { width: 420px; float: left; padding-left: 10px; }

#middle-right, .middle-right { width: 316px; float: left; }

#store, 
#updates { height: 125px; padding: 0 13px; }

#updates { background: url(/images/img-updates-bg.jpg) repeat-y left top; }

#store { margin-bottom: 7px; background: url(/images/img-store-bg.jpg) repeat-y left top; }

#rodeo-proofs h3, 
#store h3, 
#updates h3 { text-align: center; }

#rodeo-proofs ol, 
#rodeo-proofs p, 
#store p, 
#updates p, 
#about-rick p { text-align: left; padding: 7px 5px; line-height: 15px; }

#rodeo-proofs ol { padding-top: 0; }

#rodeo-proofs li { text-align: left; padding: 2px 0; }

#store-buttons { padding: 7px 0 0 0; margin: 0 auto; }

/* @end homepage secondary content */

/* @group footer */

#footer { font-size: 10px; color: #444; margin: 0 7px; padding: 8px 0 15px; line-height: 13px; }
#footer p { padding-bottom: 4px; }
#footer a { color: #444; text-decoration: none; }
#footer a:hover { color: #999; text-decoration: none; }

.byline { font-family: Georgia, "Times New Roman", Times, serif; }

/* @end footer */

/* @group slimProof stuff */

#header .rodeo-info h1 { font-size: 36px; font-weight: normal; }

#header .rodeo-info h1 span { font-size: 16px; font-style: italic; color: #bbb; }

#header .rodeo-info h2 { font-size: 14px; padding-bottom: 10px; }

#header .rodeo-info h2 span { padding-left: 14px; }

/* @end slimProof stuff */

/* @group proofs container */

#proofs-container { margin: 10px auto; }

.proof-row { clear: both; padding: 7px 0; margin: 0 auto; text-align: center; }

.img { text-align: center; float: left; width: 25%; height: 215px; }
.img a img { padding: 5px; }
.img a:hover img { border: 0; text-decoration: none; padding: 5px; }
.img p { margin: 0px; padding: 5px; }

.img-gallery { text-align: center; float: left; width: 25%; }

.fixme, .elevenPix { font-size: 11px; }

/* @end proofs container */

/* @group buttons */

button { border: 0; color: #fff; background-color: transparent; }

button[type="submit"] { padding: 0; margin: 0; background: none; vertical-align: middle; background-color: transparent; }

.btn-add-to-cart { width: 96px; height: 30px; display: block; font-size: 10px; text-decoration: none; background-image: url(/images/btn-add-to-cart.png); background-repeat: no-repeat; background-position: top left; background-color: #000; }

.btn-more { width: 60px; height: 18px; display: block; font-size: 10px; text-decoration: none; background-image: url(/images/btn-more.gif); background-repeat: no-repeat; background-position: top left; }

.btn-view-more { width: 225px; height: 175px; display: block; font-size: 10px; text-decoration: none; background-image: url(/images/btn-view-more.jpg); background-repeat: no-repeat; background-position: top left; }

.btn-email { width: 16px; height: 16px; display: block; text-decoration: none; background-image: url(/images/email.gif); background-repeat: no-repeat; background-position: top left; }

.btn-store-prints { width: 93px; height: 66px; display: block; font-size: 9px; text-decoration: none; background-image: url(/images/btn-store-prints.jpg); background-repeat: no-repeat; background-position: top left; float: left; }

.btn-store-notecards { width: 94px; height: 66px; display: block; font-size: 9px; text-decoration: none; background-image: url(/images/btn-store-notecards.jpg); background-repeat: no-repeat; background-position: top left; float: left; }

.btn-store-calendars { width: 95px; height: 66px; display: block; font-size: 9px; text-decoration: none; background-image: url(/images/btn-store-calendars-updated.jpg); background-repeat: no-repeat; background-position: top left; float: left; }

.btn-email:hover, 
.btn-add-to-cart:hover, 
.btn-view-more:hover, 
.btn-more:hover, 
.btn-store-prints:hover, 
.btn-store-notecards:hover, 
.btn-store-calendars:hover { background-position: bottom left; }

/* @end buttons */

.gallery-intro h2 a { color: #fff; }
.gallery-intro h2 a:hover { color: #fc0; }

.alert { padding: 10px; background: #ffd; border: 1px solid ffa; color: #333; margin: 10px; }

.just-in { font-size: .8em; color: #fc0; }
.caps { text-transform: uppercase; font-size: .7em; }
