@charset "utf-8"; /* CSS Document # # # ################################################# # # Eric Carr Design (c)2012 # www.ericcarr.net # # website: www.ericcarr.net # # original css and responsive design concept by Dave Gamache www.getskeleton.com # # ############################################### # # Table of Content # #Site Styles # #Navigation Bar # #Footer # #Images # #Links # #Liquid Display: Show/Hide # #Topography # #Forms # #Page Styles # #Home Page Carousel # #Quotes Page # #Latest Works Page # #404 Page # #Contact Us Page # #Media Queries # @media only screen and (max-width: 959px) # @media only screen and (min-width: 768px) and (max-width: 959px) # @media only screen and (max-width: 767px) # @media only screen and (min-width: 480px) and (max-width: 767px) # @media only screen and (max-width: 479px) # #Font-Face # #Overrides and Addendum # #Print # # ################################################# # # Site Styles # # ################################################# */ .container { background-color:#FFF; } .container .eight.columns { width:100%; max-width:400px; min-height:400px; margin:10px 40px 20px 40px; padding:0; } .sixteen.columns.title { width:100%; max-width:920px; margin:0; padding:40px 0 0 40px; } iframe { width:100%; min-height:300px; margin:0; } /* #Images ================================================== */ .img1 { width:319; height:319; display:block; margin:0 auto; } .imgVert { margin:5px 20px 10px 0px;} .imgHorz { margin:5px 20px 30px 0px;} .imgTravel { margin:5px 20px 20px 0px; } .imgTravel2 { margin:5px 20px 5px 0px; } /* #Links ================================================== */ a, a:visited { color:#2274a0; text-decoration:none; outline:0; } a:hover, a:focus { color: #7d1ed6; text-decoration:underline; } p a, p a:visited { line-height: inherit; } p.link1 { margin:10px 0 10px 10px; } .link1 { background:url(../images/iconMarker_03.gif) 0px 6px no-repeat; padding:0px 0 0 15px; } .linkBlue { background:url(../images/iconMarker_01.gif) 0px 6px no-repeat; padding:2px 0 0 15px; } /* #Typography ================================================== */ h2 { margin:0 0 3px 0; font-size:22px; } h3 { margin:8px 0 3px 0; padding:0; } p {margin:0 0 10px; } ul, ol { margin-bottom: 0px; } li { line-height: 18px; margin-bottom: 0px; } blockquote { border:1px solid #DDD; padding:9px 20px; margin:15px 0; } .heading2 { font-size: 18px; } .heading3 { font-size: 15px; } .heading4 { font-size: 12px; line-height:16px; margin:0 0 10px; } blockquote h2 p:first-child { margin:0 0 0 15px; font-style:oblique; } p.bold {margin:0 0 0 15px; } .drive {margin:0 0 15px 15px; } .tab { margin:0 0 0 15px; } .tab2 { margin:0 0 10px 30px; } .bold { font-weight:700; } .red { color:#F00; font-weight:bold; font-style:italic; } .spacer { margin-bottom:10px; } /* --- 404 --- */ #not-found-content { position: relative; text-align:center; } #not-found-content h1 { text-transform:uppercase; color:#464f5c; background:none; padding-top:0; line-height:36px;margin-right: 47px; } #not-found-content p { padding: 10px 20%; } #not-found-content a { margin:20px 0; } /*================================================ #Page Styles ================================================== */ /* #Navigation Bar / Mini Navigation Bar ================================================== * To make each button highlight when page * is active make the following changes... * * header.inc.php * add to php includes: * * index.php * add to "body" tag: * * 2OCT2010.css * tab changeover is controlled by: #index .home a { background-position:-0px -58px; } * "#index" is populated by by the php include. Firebug the button to discover what * php converted the file name to. * */ #mini, #mainMenu { background-image:url(../images/navHeader_bkgd.jpg); background-repeat:no-repeat; } #mini { display:none; } #mainMenu { padding-left:160px; padding-top:170px; } .home a, .wedding a, .reception a, .travel a, .rsvp a { height:54px; float:left; display:block; text-indent:-99999px; } .home a {width:123px; background:url(../images/navButtons.png) 0px 0px; } .home a:hover, #index .home a { background-position:-0px -58px; } .wedding a { width:123px; background:url(../images/navButtons.png) -123px 0px; } .wedding a:hover, #wedding .wedding a { background-position:-123px -58px; } .reception a {width:127px; background:url(../images/navButtons.png) -245px 0px; } .reception a:hover, #reception .reception a { background-position:-245px -58px; } .rsvp a {width:127px; background:url(../images/navButtons.png) -475px 0px; } .rsvp a:hover, #rsvp .rsvp a { background-position:-475px -58px; } .travel a {width:105px; background:url(../images/navButtons.png) -371px 0px; } .travel a:hover, #travel .travel a { background-position:-371px -58px; } /* #Index Page ================================================== */ .boxed { margin:5px; padding;5px; border:1px solid #666666; } /* #Footer ================================================== */ .footer { padding:5px 0;} .sixteen.columns.footer ul {text-align:center;} .ftText, .ftCopyright {font-size:13px; color:#2274a0; text-align:center; display:inline; color:#2274a0; padding:10px; } .ftText {width:85px;} .ftCopyright {width:200px;} /*================================================ #Media Queries ================================================== */ @media only screen and (max-width: 959px) { /*** Smaller than standard 960 (devices and browsers) ***/ .container .eight.columns.hideColumn { display:none; } } @media only screen and (min-width: 768px) and (max-width: 959px) { /*** Tablet Portrait size to standard 960 (devices and browsers) ***/ .container .eight.columns.hideColumn { display:none; } .container .eight.columns { width:100%; max-width:600px; min-height:50px; } } @media only screen and (max-width: 767px) { /*** All Mobile Sizes (devices and browser) ***/ .container .eight.columns.hideColumn { display:none; } .container .eight.columns { margin:30px 20px 0px 20px; padding:0; width:100%; max-width:350px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { /*** Mobile Landscape Size to Tablet Portrait (devices and browsers) ***/ .container .eight.columns { margin:0 0 0 20px; padding:0; width:100%; } .container .eight.columns.hideColumn { display:none; } .container .sixteen.columns.title { width:100%; margin:0 auto; padding:10px; } /* typography */ h2 { padding:10px 0 0; } /* mini navigation menu */ #mainMenu { display:none; } #mini { width:100%; padding-top:190px; display:block; } #mini select { display:block; width:100%; max-width:497px; } /* Images */ .img1 { display:none; } .imgVert { margin:15px 10px 15px 0; padding:0; } .imgHorz { margin:10px 10px 10px 0; padding:0; } } @media only screen and (max-width: 479px) { /*** Mobile Portrait Size to Mobile Landscape Size (devices and browsers) ***/ .container .eight.columns { width:100%; max-width: 290px; min-height:350px; margin:10px 5px; padding:0; } .container .sixteen.columns { margin:0 20px 0; width:100%; max-width:260px; min-height:0px; padding:0 } .container .sixteen.columns ul { width:100%; margin:0 auto; padding:0; } .container .sixteen.columns.title { width:100%; margin:0 auto; padding:10px; } /* typography */ h1 { margin:0; padding:0; } h2 { padding:0; } h3 { padding:0; } p { margin:10px; padding:0; } /* mini navigation menu */ #mainMenu { display:none; } #mini { display:block; width:100%; background-position:-50px -50px; padding-top:150px; } #mini select { display:block; width:100%; max-width:497px; } /* images */ .img1 { display:none; } .imgVert { margin:5px 10px 10px 0; padding:0; } .imgHorz { margin:5px 10px 10px 0; padding:0; } .imgTravel { margin:10px 10px 10px 10px; } .imgTravel2 { margin:5px 10px 10px 10px; } /* other */ .eight.columns iframe { width:100%; min-width:100px; max-width:250px; min-height:100px; max-height:150px; margin:20px; padding:0; } } /*================================================ #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } */ /*================================================ #Overrides ================================================== */ /*================================================ #Print Styles Inlined to avoid required HTTP connection: h5bp.com/r ================================================== */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { text-decoration: none; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }