/* ============================================================================= Primary styles Author: Chad Roberts Design ========================================================================== */ /* =================== B 00 Custom Page Styles =================== */ /*== Header Styles ==*/ /*== Content Styles ==*/ #main-content {width: 100%; overflow:hidden; display: block; position: relative; margin-top: 0; padding-top: 0; } #main-content #page p img.size-full, #main-content #page img{min-width: 100%!important; margin:0!important; padding:0!important;} #main-content #page { float: left; display:block; width: 100%; margin: 6.2em 0 1em 0; padding: 0;} #main-content #page h3 { padding: 0 1%; margin: 0 0 0.83333333em 0;} /*== Footer Styles ==*/ #main-footer { margin: 1.5em 0 1em 0; padding: 0;} /* =================== B 01 Home Page =================== */ #home #main-content #page {margin-top: 4.65em;} #home #main-content #post-grid { display: block; float: left; width: 100%; margin: 1.5em auto 1em auto; text-align: center!important; zoom:1;} #home #main-content #post-grid .inner-grid { padding: 0 0.5% 0 1.1%; display: block; width: 100%; margin: 0 auto; text-align: center; overflow:visible;} #home .gallery-grid { display: block; float: left; width: 100%; margin: 0.5em 0 1em 0; padding: 0; text-align: center; zoom:1;} #home .gallery-grid header, #post-grid header {margin:1em 0 1.25em 0; display:block; width: 100%; } #home .gallery-grid .inner-grid { margin: 0; padding: 0; display: block; width: 100%; text-align: center; } #home .gallery-grid .gallery-thumb , #post-grid .post-thumb { margin: 0; padding: 0; overflow: hidden; display: block; float: left; position: relative; } #home .gallery-grid .gallery-thumb a, #post-grid .post-thumb a, #post-grid .last a { width: 100%; display: block; background-color: #FFFFFF; border: 0 none!important;} #home .gallery-grid .gallery-thumb a img, #post-grid .post-thumb a img, #post-grid .last img{ max-width: 100%; height: auto !important; } #home .gallery-grid .gallery-thumb .caption { opacity: 0.5; display: block; float: left; position: relative; text-align: center; width: 80%; padding: 2% 10% 0 10%; margin: 0; -ms-filter: "progid:DXImageTransform.Microsoft. � Alpha(Opacity=100)"; /* IE 8 hack */ filter: alpha(opacity = 100); /* IE 5-7 hack */ -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } #home .gallery-grid .gallery-thumb .caption em {font-family: MrsEavesItalic, Georgia, "Times New Roman", Times, serif; font-size: 1.25em; line-height: 1em; font-style: normal!important;} #home .gallery-grid .gallery-thumb .caption strong{ margin-left: 0.25em; font-family: Geometric415BT-BlackA, Geneva, Arial, Helvetica, sans-serif!important; font-weight: lighter; text-transform: uppercase; letter-spacing: 0.2em; } /* == Hover Effects == */ #home .gallery-grid .gallery-thumb a:after { content: ""; position: absolute; left:0; top:0; right:0; bottom:0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft. � Alpha(Opacity=100)"; /* IE 8 hack */ filter: alpha(opacity = 100); /* IE 5-7 hack */ -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } #home .gallery-grid .gallery-thumb a:hover:after, #home .gallery-grid .gallery-thumb:hover .caption{ opacity: 1; } #home #post-grid article a:after {content: ""; position: absolute; left:0; top:0; right:0; bottom:0; background-color: #FFFFFF; height: 101%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft. � Alpha(Opacity=100)"; /* IE 8 hack */ filter: alpha(opacity = 100); /* IE 5-7 hack */ -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } #home #post-grid article a:hover:after { opacity: 0.5!important; } /* == Story Thumbnail Buttons == */ /* -- IMPORTANT: background bubble aligns from Left, Top. -- */ /* Weddings - Circles */ #home .gallery-grid .gallery-thumb #s1:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story1-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 40%; } #home .gallery-grid .gallery-thumb #s2:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story2-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 50%; } #home .gallery-grid .gallery-thumb #s3:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story3-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 50%; } #home .gallery-grid .gallery-thumb #s4:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story4-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 20%; } #home .gallery-grid .gallery-thumb #s5:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story5-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 30%; } #home .gallery-grid .gallery-thumb #s6:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story6-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 40%; } #home .gallery-grid .gallery-thumb #s7:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story7-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 100% 30%; } #home .gallery-grid .gallery-thumb #s8:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story8-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 100% 30%; } #home .gallery-grid .gallery-thumb #s9:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story9-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 60%; } #home .gallery-grid .gallery-thumb #s10:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story10-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 20%; } #home .gallery-grid .gallery-thumb #s11:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story11-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 60%; } #home .gallery-grid .gallery-thumb #s12:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story12-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 40%; } #home .gallery-grid .gallery-thumb #s13:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story13-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 99% 40%; } #home .gallery-grid .gallery-thumb #s14:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story14-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 30%; } #home .gallery-grid .gallery-thumb #s15:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story15-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 60%; } #home .gallery-grid .gallery-thumb #s16:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story16-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 100% 65%; } #home .gallery-grid .gallery-thumb #s17:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story17-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 99% 50%; } #home .gallery-grid .gallery-thumb #s18:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story18-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 99% 40%; } #home .gallery-grid .gallery-thumb #s19:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story19-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 60%; } #home .gallery-grid .gallery-thumb #s20:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story20-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 20%; } #home .gallery-grid .gallery-thumb #s21:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story21-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 40%; } #home .gallery-grid .gallery-thumb #s22:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story22-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 99% 60%; } #home .gallery-grid .gallery-thumb #s23:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story23-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 50%; } #home .gallery-grid .gallery-thumb #s24:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story24-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 99% 30%; } #home .gallery-grid .gallery-thumb #s25:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story25-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 99% 60%; } #home .gallery-grid .gallery-thumb #s26:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story26-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 65%; } #home .gallery-grid .gallery-thumb #s27:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story27-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 20%; } #home .gallery-grid .gallery-thumb #s28:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-story28-bg.png') no-repeat top left transparent; z-index:1000!important; background-position: 0 30%; } /* Associate Photographer - Barb - Circles */ #home .gallery-grid .gallery-thumb #b1:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-barbstory1-bg.png') no-repeat transparent; z-index:1000!important; background-position: 0 50%; } #home .gallery-grid .gallery-thumb #b2:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-barbstory2-bg.png') no-repeat transparent; z-index:1000!important; background-position: 0 30%; } #home .gallery-grid .gallery-thumb #b3:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-barbstory3-bg.png') no-repeat transparent; z-index:1000!important; background-position: 99% 80%; } #home .gallery-grid .gallery-thumb #b4:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-barbstory4-bg.png') no-repeat transparent; z-index:1000!important; background-position: 0 20%; } /* Life & Loves - Circles */ #home .gallery-grid .gallery-thumb #l1:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-lifestory1-bg.png') no-repeat transparent; z-index:1000!important; background-position: 0 50%; } #home .gallery-grid .gallery-thumb #l2:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-lifestory2-bg.png') no-repeat transparent; z-index:1000!important; background-position: 0 30%; } #home .gallery-grid .gallery-thumb #l3:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-lifestory3-bg.png') no-repeat transparent; z-index:1000!important; background-position: 0 80%; } #home .gallery-grid .gallery-thumb #l4:after { background: url('http://www.taramcmullen.com/stories/thumbs/thumb-lifestory4-bg.png') no-repeat transparent; z-index:1000!important; background-position: 0 50%; } /* =================== B 02 prices Page =================== */ #prices #main-content #page .entry {margin:0; display: block; float: left; position: relative; } #prices #main-content #page .entry h2 { margin: 0 0 0.5em 0; padding:0; } #prices #main-content #page .entry h2 a { display: inline-block; padding: 0; margin: 0;} #prices #main-content #page .entry h1 { margin: 0; padding: 0; line-height: 1.35em;} #prices #main-content #page .entry p { text-align: center!important; line-height: 1.25em; width: 100%; display: block; float: left; margin-left: 0; padding-left:0; padding-right:0; margin-right: 0;} #prices #main-content #page .entry p em { font-style: normal; font-family: MrsEavesItalic, Georgia, "Times New Roman", Times, serif; font-size: 1.065em;} #prices #main-content #page .divider-sm {margin-bottom: 1em;} #prices #main-content #page .entry p.byline { font-size: 1.4em; padding:0; margin:0; font-family: MrsEavesItalic, Georgia, "Times New Roman", Times, serif;} #prices .download {width: 100%; float: left; text-align: centre!important; padding: 0; margin: 0 0 1em 0;} /* =================== B 03 All Pages =================== */ #main-content #page .col-left { width: 277px; position: relative; float: left; display: block; margin: 0; padding:0 0 0 1%; } #main-content #page .col-right { position: relative; float: left; display: block; padding:0; padding: 0;} /* =================== B 04 Viewport Styles =================== */ /*== DESKTOP - STANDARD ==*/ @media screen { /* Home Page */ #home #post-grid {padding-bottom:0px;} #home #post-grid .post-thumb { width:15.333333%; padding:0 1.2% 0 0; margin:0; } #home #post-grid .last { width:15.333333%; padding:0!important; margin:0 2% 0 0; } #home .gallery-grid .gallery-thumb { width:25%;} #home .gallery-grid .gallery-thumb .caption {font-size: 1.25em;} #home .gallery-grid .gallery-thumb .caption strong {font-size: 0.9em;line-height: 1.25em;} #prices #main-content #page .entry { padding: 0; } #main-content #page .col-left {margin: 0 26px 0 0;} #main-content #page .col-right {width: 540px; margin:0; padding:0;} #main-content #page .col-right img {width: 540px;} #about #page .col-about { width: 570px; margin: 0 auto; padding:0; text-align: center; display: block;} #about #page .col-about img {max-width: 570px;} #home #main-content .divider-lg {background: url('../img/divider-lg-home-sm.jpg') no-repeat center transparent !important; padding: 0.25em 0; background-size:100% 100%!important;} } /*== DESKTOP - WIDE ==*/ @media screen and (min-width: 1240px) { /* Applies to all pages */ #main-content #page .col-left {margin: 0 38px 0 0;} #main-content #page .col-right {width: 516px; margin:0; padding:0;} #main-content #page .col-right img {width: 552px;} #home .gallery-grid .gallery-thumb .caption {font-size: 1.25em;} #home .gallery-grid .gallery-thumb .caption strong {font-size: 1em;line-height: 1.25em;} #prices #main-content #page .entry {padding: 0 2em;} #home #main-content .divider-lg {background: url('../img/divider-lg-home.jpg') no-repeat center transparent !important; padding: 0.5em 0; background-size:100% 100%!important;} }