/* Theme Name: Trista Lerit Description: Trista Lerit theme Author: Flosites Author URI: http://flosites.com Version: 1.0 */ @import 'css/reset.css'; @import 'css/scroll.css'; /* SITE CSS */ html { height: 100%; } body { font-family:Arial; background: url(i/bg_new.png) repeat; color:black; height:100%; ; } body .clear { clear:both; } body a { text-decoration:none; color:#5DB1D2; } body a:hover { } #bg { background:url(i/body-background.png) center top repeat-y; margin: 0 auto; position:relative; z-index:0; } /* HEADER *******************************************************/ #header-container { display:block; width:auto; background:url(i/header-background.png) 50% top repeat-y; } #header { display:block; width:943px; height:615px; margin:0px auto; position:relative; } .inside #header { height:346px; } /* logo */ #header .logo { display:block; width:250px; height:60px; position:absolute; left:346px; top:128px; } #header .logo a { display:block; width:250px; height:60px; } #header .logo span { display:none; } /* menu */ #menu { display:block; width:883px; height:42px; padding-left:60px; position:absolute; left:0px; top:304px; background:url(i/menu.png); z-index:10; } #menu>li { padding-left:20px; padding-right:20px; float:left; position:relative; } #menu>li>a { display:block; padding-left:10px; padding-right:10px; line-height:42px; color:#5db1d2; font-size:14px; text-transform:uppercase; letter-spacing:0.05em; } #menu>li>a:hover, #menu>li.hover>a { background:#ddf2fa; } /* submenu */ /*#menu li ul { visibility:hidden; display:block; width:131px; background:url(i/submenu-background.png) left top repeat-y; position:absolute; left:14px; top:40px; }*/ #menu li ul { display:none; width:131px; background:url(i/submenu-background.png) left top repeat-y; position:absolute; left:14px; top:40px; z-index: 999;} #menu li ul li { padding-left:12px; line-height:22px; position: relative; z-index:999; } #menu li ul li.header { display:block; width:131px; height:9px; background:url(i/submenu-footer.png); position:absolute; left:0px; bottom:-9px; padding:0px; overflow:hidden; font-size:1px; z-index: 999; } #menu li ul li.footer { display:block; width:131px; height:9px; background:url(i/submenu-header.png); position:absolute; left:0px; top:-7px; padding:0px; overflow:hidden; font-size:1px; z-index: 999; } #menu li ul li a { color:#949494; font-size:10px; text-transform:uppercase; } #menu li ul li a:hover { color:#5db1d2; } /* text */ #header .text { display:block; width:800px; position:absolute; left:71px; top:365px; text-align:center; } #header .text p { display:block; width:780px; margin:0px auto; color:#707070; font-size:12.5px; line-height:16.7px; } /* twitter */ #header .twitter { display:block; width:416px; height:91px; background:url(i/twitter-icon.png) left center no-repeat; position:absolute; left:59px; top:515px; } #header .twitter p { padding-left:95px; padding-top:28px; color:#707070; font-size:12px; line-height:16.7px; } #header .twitter p a { color:#5fb5d6; } /* facebook */ #header .facebook { display:block; width:416px; height:91px; background:url(i/facebook-icon.png) left center no-repeat; position:absolute; left:528px; top:515px; } #header .facebook p { padding-left:95px; padding-top:28px; color:#707070; font-size:12px; line-height:16.7px; padding-right:60px; } #header .facebook p a { color:#5fb5d6; } /* POST *******************************************************/ .post { display:block; background:url(i/post-header.png) center top no-repeat; padding-top:40px; } /* header */ .post .bg-repeat { background:url(i/post-content.png) center top repeat-y; } .post .header { display:block; width:943px; padding-bottom:18px; margin:0px auto; } .post .header .title { color:#5db1d2; font-size:26px; text-transform:uppercase; text-align:center; line-height:1.1;} .post .header .title a { color:#5db1d2; } .post .header .info { padding-top:12px; color:#707070; font-size:14px; letter-spacing:0.05em; text-transform:uppercase; text-align:center; } .post .header .info a { color:#5db1d1; } /* content */ .post .content { display:block; background:url(i/post-content.png) 50% 0 repeat-y; overflow:hidden; } .frame { margin:0px auto; position:relative; clear:both; margin:0px auto; display:block; padding:3px; margin-bottom:15px; } .frame img { display:block; border:8px solid white; position:relative; z-index:1; max-width:900px; max-height:600px; min-width:50px; } .frame .corner1 { display:block; width:10px; height:10px; position:absolute; left:0px; top:0px; background:url(i/pic-corner-1.png) no-repeat; overflow:hidden; z-index:10; } .frame .corner2 { display:block; width:10px; height:10px; position:absolute; right:0px; top:0px; background:url(i/pic-corner-2.png) no-repeat; overflow:hidden; z-index:10; } .frame .corner3 { display:block; width:10px; height:10px; position:absolute; right:0px; bottom:0px; background:url(i/pic-corner-3.png) no-repeat; overflow:hidden; z-index:10; } .frame .corner4 { display:block; width:10px; height:10px; position:absolute; left:0px; bottom:0px; background:url(i/pic-corner-4.png) no-repeat; overflow:hidden; z-index:10; } .frame .shadow1 { display:block; width:50px; height:3px; position:absolute; left:10px; top:0px; background:url(i/pic-1.png) repeat-x; overflow:hidden; z-index:10; } .frame .shadow2 { display:block; width:3px; height:50px; position:absolute; right:0px; top:10px; background:url(i/pic-2.png) repeat-y; overflow:hidden; z-index:10; } .frame .shadow3 { display:block; width:50px; height:3px; position:absolute; right:10px; bottom:0px; background:url(i/pic-3.png) repeat-x; overflow:hidden; z-index:10; } .frame .shadow4 { display:block; width:3px; height:50px; position:absolute; left:0px; bottom:10px; background:url(i/pic-4.png) repeat-y; overflow:hidden; z-index:10; } .post .content p { display:block; width:910px; overflow:hidden; margin:0px auto; padding-bottom:15px; padding-left:5px; color:#6d6e71; font-size:12px; line-height:1.3; } .post .content p.image { position:relative; z-index:999; width:900px; overflow:hidden; text-align:center; padding:5px; margin:0 auto 15px; background:#FFF; -webkit-box-shadow:0 0 6px 0 #ccc; -moz-box-shadow:0 0 6px 0 #ccc; box-shadow:0 0 6px 0 #ccc; line-height:1; } .post .content p img { max-width:880px; } .post .content p a { color:#5db1d2; } /* post-links */ .post .content .post-links { display:block; width:943px; height:40px; margin:0px auto; margin-top:-15px; position:relative; background:url(i/post-links-background.png) center bottom no-repeat; } .post .content .post-links li.comments-link { float:left; padding-left:20px; } .post .content .post-links li.comments-link a { } .post.comments-opened .content .post-links li.comments-link a .show { display:none; } .post.comments-closed .content .post-links li.comments-link a .hide { display:none; } .post .content .post-links li.add-a-comment { float:right; padding-right:25px; } .post .content .post-links li.add-a-comment a { color:#5db1d2; } .post .content .post-links li.permalink { float:right; padding-right:25px; } .post .content .post-links li.send-to-a-friend { float:right; padding-right:20px; } .post .content .post-links li { line-height:38px; } .post .content .post-links li a { color:#6d6e71; font-size:14px; letter-spacing:0.05em; } /* comments */ .post .content .comments { display:none; width:910px; height:130px; overflow:hidden; margin:0px auto; margin-top:17px; } .post.comments-opened .comments { display:block; } .post .content .comments-scroll { display:block; width:910px; height:130px; overflow:hidden; } .post .content .comments-scroll p { width:auto; margin:0px; line-height:14.5px; } .post .content .comments-scroll p a { color:#5db1d2; text-transform:uppercase; text-decoration:underline; } /* footer */ .post .footer { display:block; height:47px; background:url(i/post-footer.png) center top no-repeat; } /* ADDCOMMENT *******************************************************/ #addcomment { display:block; width:650px; height:400px; position:relative; margin:0px auto;} #addcomment .title { display:block; width:650px; height:90px; background:url(i/addcomment-title.png); position:absolute; left:0px; top:0px; } #addcomment .name { display:block; position:absolute; left:71px; top:131px; } #addcomment .name label { display:block; color:#6d6e71; font-size:11px; padding-bottom:4px; } #addcomment .name input { display:block; width:164px; padding:3px; background:white; color:black; border:1px solid #5db1d2; } #addcomment .email { display:block; position:absolute; left:71px; top:176px; } #addcomment .email label { display:block; color:#6d6e71; font-size:11px; padding-bottom:4px; } #addcomment .email input { display:block; width:164px; padding:3px; background:white; color:black; border:1px solid #5db1d2; } #addcomment .website { display:block; position:absolute; left:71px; top:223px; } #addcomment .website label { display:block; color:#6d6e71; font-size:11px; padding-bottom:4px; } #addcomment .website input { display:block; width:164px; padding:3px; background:white; color:black; border:1px solid #5db1d2; } #addcomment .comment { display:block; position:absolute; left:253px; top:130px; } #addcomment .comment label { display:block; color:#6d6e71; font-size:11px; padding-bottom:4px; } #addcomment .comment textarea { display:block; width:321px; height:106px; padding:3px; background:white; color:black; border:1px solid #5db1d2; } #addcomment .links { display:block; position:absolute; left:253px; top:261px; white-space:pre; line-height:40px; font-size:14px; } #addcomment .links a { color:#6d6e71; letter-spacing:0.05em; } #addcomment .links a.submit { color:#5db1d2; } #addcomment .info { display:block; width:650px; height:45px; line-height:45px; position:absolute; left:0px; bottom:0px; font-size:11px; color:#6d6e71; text-align:center; } /* NAVIGATION *******************************************************/ #nav-bg {width:auto; height:auto;margin-left: -2px;} #navigation-container { display:block; height:auto; background:url(i/top-navigation.png) center top no-repeat; padding-top:70px; } #navigation-container .navigation-bg { display:block; height:auto; background:url(i/post-content.png) center top repeat-y ; padding-bottom:10px;} #navigation-container .bottom-bg { display:block; height:40px; background:url(i/bottom-navigation.png) center top repeat-y ;} #navigation { text-transform:uppercase; display:block; width:943px; height:auto; margin:0px auto; position:relative; clear:both; } /* pages */ #navigation .pages { display:block; width:270px; height:22px; line-height:22px; padding:0 2px; position:absolute; left:336px; top:-44px; text-align:center; text-transform:uppercase; color:#5db1d2; font-size:14px; } #navigation .pages a { color:#6d6e71; } #navigation .pages a.selected { color:#5db1d2; } /* previous&next */ #navigation .previous { display:block; width:150px; height:22px; line-height:22px; position:absolute; top:-44px; left:20px; } #navigation .previous a { color:#6d6e71; font-size:14px; } #navigation .next { display:block; width:150px; height:22px; line-height:22px; position:absolute; top:-44px; right:20px; text-align:right; } #navigation .next a { color:#6d6e71; font-size:14px; } /* archives */ #navigation .archives { display:block; width:880px; padding-left:20px; padding-top:30px; } #navigation .archives .title { color:#a1a1a1; font-size:13px; letter-spacing:-0.02em; } #navigation .archives .years { display:block; width:775px; position:absolute; left:125px; top:27px; } #navigation .archives .years p {line-height:1.2; text-transform:uppercase; font-size:13px; color:#bfbfbf; zoom:1;overflow:hidden;} #navigation .archives .years p a, #navigation .archives .years p span {float:left;margin-left:30px;} #navigation .archives .years p a { color:#bfbfbf; } #navigation .archives .years p a.selected { color:#5db1d2; } #navigation .archives .years p a.selected-year { color:#6d6e71; } /* FOOTER *******************************************************/ #footer { display:block; width:943px; max-height: 100%; height: 40px; margin:0px auto; position:relative; background:url(i/body-background.png) center top repeat-y; } #footer .copyright { display:block; position:absolute; left:0px; top:-10px; padding-left:20px; line-height:40px; color:#b0bdc3; font-size:12px; } #footer .flosites { display:block; position:absolute; right:0px; top:-10px; padding-right:20px; line-height:40px; color:#b0bdc3; font-size:12px; } #footer .flosites span { float:right; padding-right:5px; } #footer .flosites a { float:right; } .messages { display:block; width:910px; margin:0px auto; padding-top:15px; color:#5DB1D2; font-size:12px; letter-spacing:0.05em; line-height:1.3; text-align: center;} /* INSIDE-PAGE *******************************************************/ #inside-page-container { display:block; width:auto; position:relative; z-index:-1; } #inside-page { display:block; position:relative; z-index:-1; } #inside-page .content { background:url(i/inside-page.png) center top repeat-y; position: relative; z-index:-1; } #inside-page .content .about-page { width:820px; margin:0px auto; padding:30px 0; } #inside-page .content .image { float:left; width:310px; padding-top:60px;} #inside-page .content .about-text { float:left; width:500px; } #inside-page .content .about-text h1 { text-transform:uppercase; font-size:26px; color:#5db1d2; font-weight:normal; padding:12px 0;} #inside-page .content .about-text p { color:#7e7e7e; font-size:12px; padding-top:10px; line-height: 1.4;} #inside-page .footer { display:block; height:47px; background:url(i/inside-page-footer.png) center top no-repeat; } #inside-page .content .contact-page { width:870px; margin:0px auto; padding-top:50px; height:300px;} #inside-page .content .contact-page h1 { text-transform:uppercase; font-size:26px; color:#5db1d2; font-weight:normal; text-align: center; padding:25px 0} #inside-page .content .contact-page .left-text { float:left; width: 290px; } #inside-page .content .contact-page .left-text p{ color: #7e7e7e; font-size: 12px; line-height:1.4; } #inside-page .content .contact-page .contact-form { width:560px; float: left; padding-left: 10px; } #inside-page .content .contact-page .contact-form form { width:560px; padding-bottom:20px; margin:0px auto;} #inside-page .content .contact-page .contact-form form .inputs { width:300px; float:left; } #inside-page .content .contact-page .contact-form form .inputs p { clear:both; height:25px; } #inside-page .content .contact-page .contact-form form .inputs p label { display:block; float:left; width:95px; text-align:right; padding-right:7px; color:#7e7e7e; font-size:12px; padding-top: 3px;} #inside-page .content .contact-page .contact-form form .inputs p input { width:184px; height:11px; line-height:1; border: 1px solid #5db1d2; color:#7e7e7e; font-size:11px; padding:3px 3px 4px 3px;font-family:Arial, Helvetica, sans-serif;} #inside-page .content .contact-page .contact-form form .textarea p { color:#7b7b7b; font-size:12px; } #inside-page .content .contact-page .contact-form form .textarea { width:248px; float:left; } #inside-page .content .contact-page .contact-form form .textarea textarea { width:242px; margin-top:10px; height:116px; border: 1px solid #5db1d2; font-size:11px; padding:3px;font-family:Arial, Helvetica, sans-serif; color:#7e7e7e} #inside-page .content .contact-page .contact-form form .submit { width:115px; margin-top:5px; padding-left: 205px } #inside-page .content .contact-page .contact-form form .submit input {background: url(i/submit.jpg) 0 0 no-repeat; width:46px;height:11px;border:0;padding:0;cursor:pointer;} /* ARCHIVES */ #archives { width:940px; margin: 0px auto; position:relative; display:block; padding-top: 20px; } #archives .title { float:left; text-transform:uppercase; color:#a1a1a1; font-size:13px; padding-left:50px; width:110px; height:35px; } #archives .year { float:left; text-transform:uppercase; font-size:13px; padding-bottom: 5px; } #archives .year a, #archives .year span {float:left; margin-left:30px; color:#bfbfbf} #archives .year a { color:#6d6e71; } #archives .year a:hover{ color: #5db1d2; } div.wpcf7-response-output { clear: both; text-align: center; font:normal 12px Arial; color:#6d6e71; } .wpcf7-display-none { display: none; } img.ajax-loader { border: none; vertical-align: middle; } #menu li.search-link { position: relative;} #menu li.search-link .search-form { display:none; width:192px; height:48px; background:url(i/search-bg.png); position:absolute; right:-35px; top:-48px; } #menu li.search-link .search-form.visible { display:block; } #menu li.search-link .search-form p { display:block; position:absolute; padding:0px; margin:0px; height:auto; line-height:1; } #menu li.search-link .search-form p.input { left:10px; top:9px; } #menu li.search-link .search-form p.input input { color:#949494; font-size:11px; width:120px; height:16px; line-height:16px; border-spacing:0px; margin:0px; padding:0px; space:0px; background:transparent; padding:2px; border:none; } #menu li.search-link .search-form p.submit { right:15px; top:13px; } #menu li.search-link .search-form p.submit input { display:block; width:16px; height:16px; } p.thank { color:#6d6e71; font-size:18px; text-align:center; padding-top:100px; } p.close {text-align:center; padding-top:10px;} p.close a{ color:#6d6e71; font-size:12px; text-align:center; } /* Send Message *******************************************************/ #sendmessage { display:block; width:650px; height:400px; position:relative; margin:0px auto;} #sendmessage .title { display:block; width:650px; height:90px; background:url(i/send-message-title.png); position:absolute; left:0px; top:0px; } #sendmessage .name { display:block; position:absolute; left:71px; top:131px; } #sendmessage .name label { display:block; color:#6d6e71; font-size:11px; padding-bottom:4px; } #sendmessage .name input { display:block; width:164px; padding:3px; background:white; color:#707070; border:1px solid #5db1d2; } #sendmessage .email { display:block; position:absolute; left:71px; top:176px; } #sendmessage .email label { display:block; color:#6d6e71; font-size:11px; padding-bottom:4px; } #sendmessage .email input { display:block; width:164px; padding:3px; background:white; color:#707070; border:1px solid #5db1d2; } #sendmessage .website { display:block; position:absolute; left:71px; top:223px; } #sendmessage .website label { display:block; color:#6d6e71; font-size:11px; padding-bottom:4px; } #sendmessage .website input { display:block; width:164px; padding:3px; background:white; color:#707070; border:1px solid #5db1d2; } #sendmessage .femail { display:block; position:absolute; left:71px; top:268px; } #sendmessage .femail label { display:block; color:#6d6e71; font-size:11px; padding-bottom:4px; } #sendmessage .femail input { display:block; width:164px; padding:3px; background:white; color:#707070; border:1px solid #5db1d2; } #sendmessage .comment { display:block; position:absolute; left:253px; top:130px; } #sendmessage .comment label { display:block; color:#6d6e71; font-size:11px; padding-bottom:4px; } #sendmessage .comment textarea { display:block; width:321px; height:126px; padding:3px; background:white; color:#707070; border:1px solid #5db1d2; } #sendmessage .links { display:block; position:absolute; left:253px; top:275px; white-space:pre; line-height:40px; font-size:14px; } #sendmessage .links a { color:#6d6e71; letter-spacing:0.05em; } #sendmessage .links a.submit { color:#5db1d2; } #sendmessage .info { display:block; width:650px; height:45px; line-height:45px; position:absolute; left:0px; bottom:0px; font-size:11px; color:#6d6e71; text-align:center; } #flash { position: absolute; left:315px; top:0; height:320px; width:300px; } .content .page { width:900px; margin:0px auto; padding:20px 0px; color:#707070; font-size:12px; line-height:1.5; overflow: hidden; zoom:1; } .content .page p { margin-bottom:12px; } .content .page h1 { font-size:18px; color:#5db1d2; font-weight:normal; text-transform: uppercase; text-align:center; padding:12px 0; } .content .page p img { display:block; margin:0px auto; box-shadow:0 0 6px 0 #999; -webkit-box-shadow:0 0 6px 0 #999; -moz-box-shadow:0 0 6px 0 #999; margin:10px auto; padding:5px; max-width:880px; text-align:justify; background:#FFF; } #venues {} #venues ul li { float:left; width:430px; margin-bottom:24px; } #venues ul li.even { float:right; } #venues ul li .img { float:left; margin-right:12px; } #venues ul li .img img { width:250px; height:auto; } #venues ul li .info { float:left; width:168px; } #venue {} #venue h2 { color:#5DB1D2; font-size: 16px; font-weight: normal; } #venue .info { float:left; width:300px; margin-right:24px; } #venue .img { float:right; } #venue .img img { width:575px; height:auto; }