/* -------------------------------------------------------------- ----------------------------------------------------------------- DEFINITIONS: Global styles AUTHOR: Sugarland Inc. VERSION: 10.09.2009 CONTENTS: 0 General 1 Typography 2 Colors 3 Alignments 4 Links 5 Form Elements 6 Header 7 Footer 8 Navigation 9 Page HOME ----------------------------------------------------------------- -------------------------------------------------------------- */ /* 0 General =============================================================== */ .ui-tabs-panel ul, ul.pink {padding:5px;} .ui-tabs-panel ul li, ul.pink li {background:url(../images/bullet_pink.gif) no-repeat 0 8px; padding:3px 0 6px 14px; line-height: 1.1em; } /* 1 Typography =============================================================== */ #content h1 {font:normal 25px Georgia; color:#1E3037; padding:0 0 15px 0;} body#landingpage h1 {font:normal 18px Georgia; color:#fff; padding-bottom:15px;} h3 {font-weight: bold;} p {line-height: 1.45em; padding-bottom:1em;} .bold {font-weight: bold;} .uppercase {text-transform: uppercase;} strong {font-weight: bold;} em {font-style: italic;} p.error {color:#cc0001; font-size:11px; text-align: right;} p.success {color:#54B001; font-size:11px; text-align: right;} /* 2 Colors =============================================================== */ .orange {color:#ea1f05;} .green {color:#507400;} .red {color:#cc0001;} .brdr_gray {border:3px solid #ebebeb; padding:2px;} /* 3 Alignments =============================================================== */ .alignRight {text-align:right;} .alignCenter {text-align:center;} .clearBoth {clear:both; height:1px;} .clearRight {clear:right;} .clearLeft {clear:left;} .floatLeft {float:left;} .floatRight {float:right;} .imgLeft {float:left; margin:0 20px 10px 0;} .imgRight {float:right; margin:0 0 10px 20px;} .margin0 {margin:0;} .height10 {height:10px;} .height20 {height:20px;} .paddtop20 {padding-top: 20px;} #displaynone {display:none;} .bott20 {padding-bottom:20px;} .dot_line {clear:both; background:url(../images/dot_gray.gif) repeat-x bottom; height:5px;} .width50per {width:50%;} .width45per {width:45%;} .width70per {width:65%;} .mr5 {margin-right:5px;} .ml5 {margin-left:5px;} /* 4 Links =============================================================== */ a:link, a:visited, a:active {color:#4799ac; text-decoration: underline;} a:hover {color:#236c7d;} a.logo {float:left; width:300px; height:100px;} body#landingpage #wrap_content a {font:24px Georgia; float:left; color:#a2a2a2; text-decoration:none;margin-left:95px; padding:2px 0 0;} body#landingpage #wrap_content a.gelato {margin-left:80px;} body#landingpage #wrap_content a.cakes {margin-left:170px; margin-right:40px;} body#landingpage #wrap_content a:hover {color:#505050;} /* 5 Form Elements =============================================================== */ .frm_input {border:1px solid #d3d3d3; padding:7px; background:#fff url(../images/bg/input.gif) repeat-x;} .frm_submit {border:0; font:italic 12px Georgia; padding:5px 9px; background-color:#e8e8e8; font-weight: bold; text-decoration: underline;} body#contact .frm_input {width:170px;} .newsletter_input {border:1px solid #d3d3d3; padding:3px; background:#fff url(../images/bg/input.gif) repeat-x; width:114px; font-size:12px;} .newsletter_submit {border:0; font:italic 11px Georgia; padding:3px 5px; background-color:#BBD5DD; font-weight: bold; text-decoration: underline;} /* 6 Header =============================================================== */ #headerline #papercut {width:920px; height:45px; margin:0 auto; background: url(../images/bg/header_papercut.png) no-repeat center top; padding:7px 0 0 0; text-align: center; font:12px Tahoma; color:#7c80bd;} /* 7 Footer =============================================================== */ ul#f_nav {margin:20px auto; width:780px; display: block;} ul#f_nav a:hover {text-decoration: underline; color:#2f5e68;} ul#f_nav li {display:inline; float:left; width:130px; line-height:1.5em;} ul#f_nav li a {color:#5f8992; text-decoration:none; font-weight: bold; font-size:13px;} ul#f_nav li ul {padding-top:5px;} ul#f_nav li ul li {background: url(../images/bullet_darkblue.gif) no-repeat 0 8px; padding-left:10px;} ul#f_nav li ul li a {font-weight:normal; font-size:12px;} p.copyright {clear:both; font-size:12px; color:#82b0ba; text-align: center; padding:20px 0 0;} body#landingpage p.copyright, body#landingpage p.copyright a {color:#ccc; padding:5px 0 0;} /* 8 Navigation =============================================================== ul#nav {float:right; width:520px; height:40px; margin-top: 40px;} ul#nav li {display:inline;} ul#nav a {background: url(../images/nav.gif) no-repeat; height:40px; float:left;} ul#nav a.home {background-position: 0 0; width:70px;} ul#nav a.home:hover, ul#nav a.home_active {background-position: 0 -40px; width:70px;} ul#nav a.aboutus {background-position: -70px 0; width:85px;} ul#nav a.aboutus:hover, ul#nav a.aboutus_active {background-position: -70px -40px; width:85px;} ul#nav a.gelato {background-position: -155px 0; width:70px;} ul#nav a.gelato:hover, ul#nav a.gelato_active {background-position: -155px -40px; width:70px;} ul#nav a.cakes {background-position: -225px 0; width:70px;} ul#nav a.cakes:hover, ul#nav a.cakes_active {background-position: -225px -40px; width:70px;} ul#nav a.news {background-position: -300px 0; width:115px;} ul#nav a.news:hover, ul#nav a.news_active {background-position: -300px -40px; width:115px;} ul#nav a.contact {background-position: -415px 0; width:95px;} ul#nav a.contact:hover, ul#nav a.contact_active {background-position: -415px -40px; width:95px;} */ ul#nav { float:right; width:560px; height:40px; margin-top:40px; } ul#nav li { display:inline; margin-left: 5px; } ul#nav a { background:url(../images/nav.gif) no-repeat; height:40px; float:left; margin-left: 10px } ul#nav a.home { background-position:0 0; width:50px; } ul#nav a.home:hover,ul#nav a.home_active { background-position:0 -40px; width:50px; } ul#nav a.aboutus { background-position:-60px 0; width:75px; } ul#nav a.aboutus:hover,ul#nav a.aboutus_active { background-position:-60px -40px; width:75px; } ul#nav a.gelato { background-position:-145px 0; width:60px; } ul#nav a.gelato:hover,ul#nav a.gelato_active { background-position:-145px -40px; width:60px; } ul#nav a.cakes { background-position:-210px 0; width:50px; } ul#nav a.cakes:hover,ul#nav a.cakes_active { background-position:-210px -40px; width:50px; } ul#nav a.news { background-position:-260px 0; width:105px; } ul#nav a.news:hover,ul#nav a.news_active { background-position:-260px -40px; width:105px; } ul#nav a.blog { background-position:-375px 0; width:55px; } ul#nav a.blog:hover,ul#nav a.blog_active { background-position:-375px -40px; width:55px; } ul#nav a.contact { background-position:-435px 0; width:80px; } ul#nav a.contact:hover,ul#nav a.contact_active { background-position:-435px -40px; width:80px; } /* 9 Sidebar =============================================================== */ #sidenav {float:left; width:220px; margin-bottom:10px;} #sidenav h1 {background:url(../images/bg/side_header_tape.png) no-repeat; width:183px; height:33px; font:italic normal 22px Georgia; color:#fff; padding:12px 0 0 50px; margin-left:-20px;} #sidenav ol {padding:10px; list-style: decimal; margin-left:40px;} #sidenav ol li {padding:8px 5px; font-size: 16px; color:#7bc347; border-bottom: 1px dotted #63ae16; list-style: decimal; color:#9CC2A5;} #sidenav ol li a {color:#696969; font-size:14px; text-decoration: none;} #sidenav ol li a:hover {color:#111; text-decoration: underline;} .box_pink {float:left; width:164px; height:134px; margin:10px 0; background: url(../images/bg/box_pink.png) no-repeat; text-align: center; padding:20px;} .box_pink h1 {color:#a2627e; font-style: italic; padding:5px 0 15px 0;} .box_pink a.img {margin:0 auto;} .box_pink a.img:hover {border-color:#da7fa6;} .box_pink a.img img {border:5px solid #eaceda;} .box_pink a {color:#da7fa6; font-size:12px;} .box_pink a:hover {color:#985A6D;} .quote {float:left; width:184px; margin:10px 0; background: url(../images/bg/quote_top.gif) no-repeat; padding:20px 0; margin:15px 0 10px 25px;} .quote p {color:#877d57;} .quote p.author {text-align: right; padding:0 0 15px 0; background: url(../images/bg/quote_bott.gif) no-repeat right bottom;} .social_links {text-align: center;} .social_links a {margin:5px 15px;} #newsletter {float:left; width:164px; margin:10px 0; background: url(../images/bg/box_blue.png) no-repeat; text-align: center; padding:20px;} #newsletter h4 {color:#359eb3; font-style: italic; padding:5px 0 15px 0;} ul.frm_newsletter li {padding:2px 0;} ul.frm_newsletter li label {float:left; width:40px; padding-top:5px; font-size:12px;} /* 10 Content =============================================================== */ .img_cheader {margin-bottom:20px;} /* 11 Page NEWS =============================================================== */ .news_post {border-bottom:1px solid #d3d3d3; padding:10px 0; margin-bottom:10px;} .news_post h2 {padding-bottom:5px;} .news_post p.date {font-size:11px; color:#a9a9a9;} .news_post img {border:1px solid #b4ecfa; padding:4px;} /* 12 Page CONTACT =============================================================== */ ul.mailform {float:right; width:260px; height: 170px; background: url(../images/bg/mailform.gif) no-repeat; padding:30px;} ul.mailform li {padding:3px;} ul.mailform li label {float:left; width: 65px; padding:9px 0 0;} div.contact_info {width:250px; padding:30px 0;} /* 13 Page LOCATION & HOURS =============================================================== */ ul.hours {float:right; padding: 20px 20px 0 0;} ul.hours li {margin-bottom:2px; font-size: 13px;} ul.hours li label {float:left; background: url(../images/li_hours.gif) no-repeat right top; width: 150px; padding:8px 10px 8px 0; font-weight: bold; margin-right:10px;} ul.hours li span {float:left;padding: 8px 0;} /* 14 Page GELATO MENU =============================================================== */ ul.gelato_menu li {float:left; width:290px; padding:10px 0 10px 15px; background:url(../images/bullet_pink.gif) no-repeat 0 14px; border-bottom:1px dotted #f6afcc; margin:0 7px; font-size: 13px; } /* 15 Page CAKES FAQ =============================================================== */ ul.faq li h3 {padding: 15px 10px; background: url(../images/bg/faq_question.gif) repeat-y; margin-bottom:5px;} ul.faq li p {font-style: italic; color:#747474; background: url(../images/bullet_pink_arrow_up.gif) no-repeat 15px 5px; padding:0 5px 20px 35px;} /* 16 Page CAKES GALLERY =============================================================== */ body#cakes_gallery ul.ui-tabs-nav li a {font-size:11px;} #gallery_original_wrap {float:left; width:290px; padding:13px 0 0;} #gallery_original_wrap img {border:3px solid #ebebeb; padding:2px;} .gallery_thumb_wrap {float:right; width:330px; padding:10px 0 0;} .list_gallery_list .tab a {border:3px solid #ebebeb; float:left; margin:1px;} .list_gallery_list .tab a:hover {border-color:#DB95B2;} .list_gallery_display { margin: 10px; padding: 0; float: left; position: relative; width: 285px; } .list_gallery_display img { border: none; padding: 2px; width:257px; } .list_gallery_display em { width: 286px; display: block; position: absolute; top: 2px; left: 2px; background: url(/projects/sugarland_bakery/assets/frontend/images/gallery_original_mask.png) no-repeat; text-align: center; font: italic 100%/100% Georgia, "Times New Roman", Times, serif; padding-top: 140px; } /* 17 Page CAKES MENU =============================================================== */ ul.cakes_menu {float:left; width:480px;} ul.cakes_menu li {padding:10px 0 10px 20px; background:url(../images/bullet_pink.gif) no-repeat 0 14px; border-bottom:1px dotted #f6afcc; margin:0 5px; font-size: 13px; } ol.cakes_menu_photos {float:right; width:90px;list-style:none; } ol.cakes_menu_photos li {list-style: none; padding-bottom:20px; text-align: center;} ol.cakes_menu_photos li img {border:3px solid #ebebeb;} ol.cakes_menu_photos li h4 {padding:5px 0;} ul.col3 {float:left; width:170px; margin:3px 6px;} ul.col3 li.header {font-size:16px; list-style: none; background: none; background-color: #FFF1F8; padding:5px; margin-bottom:5px; text-align: center;} /* 18 Page ABOUT MENU =============================================================== */ .aboutmenu ul#rotate {background: none; background-color:#ccc;} body#aboutus_menu ul.ui-tabs-nav li a {font-size:11px;} body#aboutus_menu ul.ui-tabs-nav {background-color:#FCEFF7;}