/* YUI reset CSS from http://yui.yahooapis.com/3.0.0/build/cssreset/reset.css */ html { color:#000; background:#FFF; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } li { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; font-variant:normal; } sup { vertical-align:text-top; } sub { vertical-align:text-bottom; } input,textarea,select { font-family:inherit; font-size:inherit; font-weight:inherit; } input,textarea,select { *font-size:100%; } /* Star in front is css hack to enable for IE6,7 */ legend { color:#000; } /* Basic elements */ html,body { margin:0px; padding:0px; background: #797979 url('/static/images/background.jpg') left top repeat fixed; } html,body,td { font-size:14px; font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; color:#333333; } /* Basic Links elements */ a:link, a:visited, a:active { color:#6bb355; text-decoration:none; outline:0 none; } a:hover { color:#fac632; text-decoration:none; } /* a[style]:hover { color:#fac632 !important; } /* Allows to override inline color on hover. This is needed as color is calculated by PHP with tag clouds and hover can not be inline. */ a.disabled { color:#5e5e5e; cursor:default; text-decoration:none; } /* Page elements */ #page { width:960px; margin:0px auto; } #footer { font-size:12px; padding:10px 10px 40px 10px; } #page-info-box { position:fixed; display:none; z-index:1; top:43px; width:100%; text-align:center; color:#ffffff; font-weight:bold; height:30px; margin:0px; padding:0px; background-color:#75c35d; font-size:18px; white-space:nowrap; line-height:30px; } #page-info-box img { vertical-align:top; } #page-info-box .close { position:absolute; right:7px; top:7px; cursor:pointer; } #header { height:43px; position: fixed; top:0; left:0; right:0; z-index: 1000; background-color:#333333; -moz-box-shadow:0px 0px 10px rgba(0,0,0,0.4); -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.4); box-shadow:0px 0px 10px rgba(0,0,0,0.4); } #header .container { width: 960px; margin: 0 auto; } #header .container::after { clear: both; } #header div > ul { display: block; float: right; margin: 0 0px 0 0; position: relative; left: 0; } #header div > ul > li { display: block; float: left; padding:0 6px; margin:0 0 0 8px; position: relative; } #header div > ul > li a.upload { color: #6BB355; } #header div > ul > li a { display: block; float: none; line-height: 43px; font-size: 14px; font-weight: bold; color: #fff; } #header div > ul > li a:hover { color: #6BB355; } #header div > ul > li a.dropdown:after { width: 0; height: 0; display: inline-block; content: "↓"; text-indent: -99999px; vertical-align: top; margin: 20px 0px 0 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #ffffff; filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; } #header div > ul > li a:hover.dropdown:after { border-top: 4px solid #6BB355; } #header div > ul > li:hover .dropdown-menu { display:block; } #header div > ul .dropdown-menu { background-color: #333333; display: none; position: absolute; top: 43px; min-width: 160px; max-width: 220px; margin: 0; padding: 4px 0; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 10px rgba(0,0,0,0.4); -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 10px rgba(0,0,0,0.4); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 10px rgba(0,0,0,0.4); } #header div > ul .dropdown-menu li { float: none; display: block; background-color: none; position: relative; } #header div > ul .dropdown-menu .divider { height: 0px; margin: 5px 0; overflow: hidden; /* border-top: 1px solid #eee; */ border-bottom: 1px solid #5e5e5e; } #header div > ul .dropdown-menu li:hover { background-color: #000; } #header div > ul .dropdown-menu a { display: block; padding: 4px 15px; clear: both; font-weight: normal; line-height: 16px; } #header div > ul .dropdown-menu div.badge { display:none; right:15px; top:5px; padding:0px 6px; position:absolute; background-color:#75c35d; color:#ffffff; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; font-size:12px; font-weight:normal; } #header form { float: left; margin: 0px 0 0 0; position: relative; filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; } #header form input { float:left; } #header form input[type="text"] { height:14px; width: 106px; font-size:12px; padding:4px; background-color:#ffffff; margin:9px 0px; border-right:0px; border-top-right-radius:0px; border-bottom-right-radius:0px; -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px; } #header form input[type="submit"] { margin:9px 5px 5px 0px; padding:0px; width:25px; height:24px; border:1px solid #d3d3d3; border-left:0px; background:url(/static/images/search_bar.png) center right no-repeat #fff; cursor:pointer; border-top-right-radius:6px; border-bottom-right-radius:6px; -moz-border-radius-topright:6px; -webkit-border-top-right-radius:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-right-radius:6px; } #header a.logo { float: left; display: block; padding: 7px 50px 0px 0px; } #header a.avatar { float: right; display: block; padding: 4px 0px 0px 0px; } #header a.avatar img { border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } #header-start { position:relative; width:960px; height:97px; } #header-start .logo { position:absolute; top:0px; left:-86px; } #header-start .menu { position:absolute; top:0px; right:0px; background-color:#ffffff; padding:1px 6px 1px 0; border-radius:0 0 6px 6px; -moz-border-radius:0 0 6px 6px; -webkit-border-radius:0 0 6px 6px; } #header-start .menu li { float:left; padding-left:6px; } #content { background-color:#ffffff; position:relative; min-height:600px; top: 103px; margin: 0 0 103px 0; padding: 0px; -moz-box-shadow:0px 0px 10px rgba(0,0,0,0.4); -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.4); box-shadow:0px 0px 10px rgba(0,0,0,0.4); border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; padding:0px 0px 20px; } /* Added top:103px instead of margin to support IE 7. */ #content .seperator { background-color:#f2f2f2; height:30px; margin:0px 20px; } #content .submenu { font-size:14px; font-weight:normal; position:relative; height:30px; margin:0px 20px; background-color:#F2F2F2; } #content .submenu a { color:#333333; } #content .submenu ul { clear: both; position:absolute; right:0px; top:4px; } #content .submenu li { float:left; padding:1px 6px; margin:2px 0px 0px 8px; position:relative; } #content .submenu li.selected, #content .submenu li:hover { background-color:#75c35d; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } #content .submenu li.selected a, #content .submenu li:hover a { color:#ffffff; } #content .submenu.profile li.selected, #content .submenu.profile li:hover { background-color:#f2f2f2; } #content .submenu.profile li.selected a, #content .submenu.profile li:hover a { color:#333333; } #content .submenu.profile { background-color:#fff; } #content .category-column { float:left; width:450px; margin:0 10px 0 0; } #content .category-title { font-size:18px; font-weight:bold; margin:0px 0px 5px 0px; } #content .category-container { margin:0 0 20px 0; } #content .category-action { text-align:right; } #content-header { position:relative; height:60px; margin:0px;} #content-header .title { position:absolute; left:20px; top:12px; font-size:30px; font-weight:bold; } #content-header.profile { bottom:0px; height:115px; background-color:#f2f2f2; border-top-right-radius:20px; border-top-left-radius:20px; -moz-border-radius-topright:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-topleft:20px; -webkit-border-top-left-radius:20px; } #content-header.profile .content { position:absolute; bottom:0px; } #content-header.profile .container { position:relative; height:115px; width:960px; } #content-header.profile .avatar { position:absolute; left:20px; top:20px; } #content-header.profile .info { position:absolute; left:101px; top:16px; } #content-header.profile .info-overlay { position:absolute; display:none; opacity:.97; filter:Alpha(Opacity=80); background-color:#f2f2f2; z-index:999; width:960px; margin:4px 0 0 0; } #content-header.profile .info-overlay .description { float:left; padding:20px; width:440px; font-style:italic; line-height:18px; -webkit-font-smoothing:antialiased; } #content-header.profile .info-overlay .details { float:left; padding:20px; width:440px; line-height:16px; font-size:12px; } #content-header.profile .info-overlay .details .label { color:#5e5e5e; float:left; width:110px; } #content-header.profile .info-overlay .details .value { float:left; width:330px; overflow:hidden; } #content-header.profile .info-overlay .edit { position:absolute; right:10px; bottom:10px; } #content-header.profile .username { font-size:26px; font-weight:bold; color:#333333; } #content-header.profile .details { font-size:12px; font-weight:normal; line-height:14px; } #content-header.profile:hover .info-hidden { display:block; } #content-header.profile .info-hidden { display:none; position:absolute; left:0px; top:62px; white-space:nowrap; } #content-header.profile .follow { position:absolute; top:20px; right:20px; } #content-header.profile.mini { position:relative; height:48px; } #content-header.profile.mini .container { height:48px; } #content-header.profile.mini .avatar { position:absolute; left:20px; top:7px; } #content-header.profile.mini .avatar img { width:34px; height:34px; } #content-header.profile.mini .info { left:64px; top:7px; } #content-header.profile.mini .info-hidden { float:left; position:static; left:auto; top:auto; font-size:12px; font-weight:normal; line-height:34px; } #content-header.profile.mini .follow { position:static; top:auto; right:auto; float:left; margin:2px 10px 0 0; } #content-header.profile .default-header-content { display:block; } #content-header.profile .mini-header-content { display:none; } #content-header.profile.mini .default-header-content { display:none; } #content-header.profile.mini .mini-header-content { display:inline; } #content-header .menu { font-size:16px; font-weight:bold; bottom:14px; position:absolute; right:20px; } #content-header .menu a { color:#333333; } #content-header .menu ul { clear: both; } #content-header .menu li { float:left; padding:1px 6px; margin:0px 0px 0px 8px; position:relative; } #content-header .menu li.selected, #content-header .menu li:hover { background-color:#333333; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } #content-header .menu li.selected a, #content-header .menu li:hover a { color:#ffffff; } #content-header .menu li .badge { right:-8px; top:-9px; padding:0px 6px; position:absolute; background-color:#75c35d; color:#ffffff; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; font-size:12px; font-weight:normal; } #content-main { padding:20px 20px 40px; position:relative; } #content-main.wide { padding:0; } #content-main.column { padding:20px 10px 40px 20px; width:680px; float:left; position:relative; } #content-main.column-wide { padding:20px 0px 40px 20px; width:690px; float:left; position:relative; } #content-side { width:210px; margin: 20px 20px 20px 0px; float:left; background-color:#f2f2f2; min-height:430px; padding:10px; } #content-side.sections { width:230px; margin: 20px 20px 20px 0px; float:left; background-color:transparent; min-height:430px; padding:0; } #content-side .section { padding:10px; margin:0 0 20px 0; } #content-side .section.background { background-color:#f2f2f2; } #content-side .info { font-size:12px; margin:10px 0 4px 0; } #content-side .seperator { height:1px; width:210px; background-color:#fff; margin:10px 0; } #content-side .menu li { padding:6px; margin:2px 0; color:#5e5e5e; font-size:16px; font-weight:bold; background-color:#ffffff; cursor:pointer; } #content-side .menu li a { color:#5e5e5e; } #content-side .menu li.selected, #content-side .menu li:hover { background-color:#75c35d; color:#fff; } #content-side .menu li.selected a, #content-side .menu li:hover a { color:#ffffff; } #content-side .header { border-bottom:1px #fff solid; color:#6BB355; margin:0 0 6px 0; } #content-footer { position:absolute; bottom:0px; width:960px; margin:0 0 10px 0; } #content-footer, #content-footer a { font-size:12px; text-align:center; color:#8f8f8f; } /* Entry elements */ .entry { padding:0px 0px 50px 0px; margin:0px 0px 0px 0px; position:relative; } .entry .header { width:920px; position:relative; margin-bottom:8px; } .entry .title { font-size:26px; font-weight:bold; } .entry .story { margin:0px 0px 10px 0px; } .entry .photos { overflow: hidden; } .entry div.photo { text-align: center; margin:0 0 20px 0; } .entry div.photo img { max-height: 680px; max-width: 920px; vertical-align: top; cursor:pointer; } .entry li.photo { float: left; padding: 0 4px 4px 0; position: relative; } .entry li img { vertical-align: top; cursor:pointer; } .entry ul { overflow: auto; width:924px; } .entry .caption { color:#fff; padding:10px; height:18px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background:rgb(0, 0, 0); background:rgba(0, 0, 0, 0.5); } .entry li .caption { position: absolute; width:284px; bottom:4px; margin:0; } .entry div > .caption { position: relative; bottom:38px; margin:0px 0 -38px 0; visibility:hidden; opacity:0; transition:visibility 0s ease-in-out 200ms,opacity 200ms ease-in-out; -webkit-transition:visibility 0s ease-in-out 200ms,opacity 200ms ease-in-out; -moz-transition:visibility 0s ease-in-out 200ms,opacity 200ms ease-in-out; -o-transition:visibility 0s ease-in-out 200ms,opacity 200ms ease-in-out; } .entry div.photo:hover .caption { visibility:visible; opacity:1; transition-delay:0s; -webkit-transition-delay:0s; -moz-transition-delay:0s; -o-transition-delay:0s; } /* See http://www.greywyvern.com/?post=337 for more info on CSS transitions */ .entry .photo-container { display:inline-block; vertical-align: top; } .entry li.photo .actions, .entry .photo .top { padding:10px; background:rgb(0, 0, 0); background:rgba(0, 0, 0, 0.5); visibility:hidden; opacity:0; transition:visibility 0s ease-in-out 200ms,opacity 200ms ease-in-out; -webkit-transition:visibility 0s ease-in-out 200ms,opacity 200ms ease-in-out; -moz-transition:visibility 0s ease-in-out 200ms,opacity 200ms ease-in-out; -o-transition:visibility 0s ease-in-out 200ms,opacity 200ms ease-in-out; } .entry .photo:hover .actions, .entry .photo:hover .top { visibility:visible; opacity:1; transition-delay:0s; -webkit-transition-delay:0s; -moz-transition-delay:0s; -o-transition-delay:0s; } .entry li.photo .actions { position:absolute; top:0px; right:4px; } .entry div.photo .top { position: relative; top:40px; margin:-40px 0 0 0; overflow: hidden; height:20px; max-width:900px; } .entry div.photo .top .info { float:left; color:#ffffff; font-size: 12px; line-height: 20px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; text-align:left; } .entry div.photo .top .actions { float:right; } .entry .photo .actions > div { display:inline-block; vertical-align:top; margin:0 5px; cursor:pointer; } .entry .photo .actions .comment-button { width:22px; height:20px; background:url('/static/images/photo_overlay_sprite.png') no-repeat -108px 0px; line-height:16px; text-align:center; color: #000; font-size: 12px; } .entry .photo .actions .like-button { width:16px; height:20px; background:url('/static/images/photo_overlay_sprite.png') no-repeat -76px 0px; } .entry .photo .actions .liked { background:url('/static/images/photo_overlay_sprite.png') no-repeat -92px 0px; } .entry > .actions { padding-top: 4px; text-align:right; } .entry > .actions .hidden { display:inline-block; visibility:hidden; opacity:0; transition:visibility 0s ease-in-out 200ms,opacity 200ms ease-in-out; -webkit-transition:visibility 0s ease-in-out 200ms,opacity 200ms ease-in-out; -moz-transition:visibility 0s ease-in-out 200ms,opacity 200ms ease-in-out; -o-transition:visibility 0s ease-in-out 200ms,opacity 200ms ease-in-out; } .entry:hover > .actions .hidden { visibility:visible; opacity:1; transition-delay:0s; -webkit-transition-delay:0s; -moz-transition-delay:0s; -o-transition-delay:0s; } .entry .padlock { background:url('/static/images/user_sprite.png') no-repeat -241px -0px; width:11px; height:15px; display:inline-block; margin: 0px 4px 0 0; } .entry .draft { color:#ea5200; font-size:14px; margin:10px auto; text-align:center; } .entry .title input { width:577px; } .entry .caption input { width:70%; padding: 0; margin: 0; font-size: 16px; } .entry li .caption input { width:220px; } .entry .caption .action-button { margin:0; } .entry .story textarea { width:906px; font-size:14px; height:120px; } .entry .story .submit { width:920px; padding:2px 0px; text-align:right; } .entry .inline-edit-placeholder { color:#5e5e5e; font-style:italic; } .entry .caption .inline-edit-placeholder { color:#fff; } /* .entry { padding:0px 0px 50px 0px; margin:0px 0px 0px 0px; position:relative; } .entry .header { width:920px; position:relative; margin-bottom:8px; } .entry .header img { height:25px; width:25px; vertical-align:bottom; margin:0 15px 3px 0; } .entry .title { font-size:26px; font-weight:bold; } .entry .date { position:absolute; right:0px; bottom:0px; font-size:16px; font-weight:bold; } .entry .story { margin:0px 0px 10px 0px; } .entry .photo-content { width:680px; min-height:450px; float:left; } .entry .photo { position:relative; width:680px; /* height:510px; For fixed height * / } .entry .photo span.photo-wrapper { display:block; /* position:absolute; top:0; left:0; This is if we wan't fixed height * / } .entry .photo a.advance-link { display:block; width:680px; /* height:510px; line-height:510px; For fixed height * / text-align:center; } .entry .photo a.advance-link:focus { outline: none; } .entry .photo img { vertical-align:top; } .entry .photo-content-side { float:left; } .entry .thumbs { width:240px; margin-left:0px; position:relative; padding:0px 0px 4px 0px; } .entry .thumbs ul { clear: both; } .entry .thumbs li { float: left; padding:0px 0px 5px 0px; height:50px; width:50px; margin:0px 0px 5px 10px; display:none; } .entry .thumbs a:focus { outline: none; } .entry .thumbs li.selected { background: #75c35d; } .entry .photo-footer { margin:0; position:relative; } .entry .photo-footer .caption { text-align:center; padding:0; margin:4px 0 0 0; font-size:18px; font-weight:bold; } .entry .photo-info-container { min-height:23px; margin:4px 0 0 0; } /* Should be 22px but Firefox seems to want 23px * / .entry .photo-info { position:relative; background-color:#f2f2f2; display:none; margin:4px 0 0 0; } .entry:hover .photo-info { display:block; } .entry .photo-info .tags-location { padding:4px; font-size:12px; width:530px; } .entry .photo-info .actions { display:block; font-size:12px; right:4px; bottom:4px; } .entry .photo-info .details { display:none; font-size:12px; line-height:16px; padding:4px; width:440px; } .entry .photo-info .label { color:#5e5e5e; font-size:12px; font-weight:normal; float:left; width:110px; } .entry .photo-info .value { float:left; width:330px; overflow:hidden; } .entry .photo-feedback { width:230px; padding:0px 0px 0px 10px; background: url(/static/images/user_sprite.png) no-repeat 2px 1px; } .entry .photo-feedback .comment { background-color:#f2f2f2; margin-bottom:4px; padding:4px; font-size:12px; position:relative; } .entry .photo-feedback .comments-hidden { background-color:#f2f2f2; margin-bottom:4px; padding:4px; font-size:12px; } .entry .photo-feedback .likes { background-color:#f2f2f2; margin-bottom:4px; padding:4px; font-size:12px; } .entry .photo-feedback .like-thumb { float:left; height:25px; width:25px; margin:2px 2px 0px 0px; } .entry .photo-feedback .avatar { float:left; height:35px; } .entry .photo-feedback .message { float:left; margin:2px 0px 14px 6px; width:181px; } .entry .photo-feedback .comment:hover .info { display:block; } .entry .photo-feedback .comment .info { display:none; position:absolute; text-align:right; color:#888888; font-size:11px; bottom:2px; left:45px; } .entry .photo-feedback .comment .info .new { color:red; } .entry .pagination { text-align:right; } .entry .pagination span, .entry .pagination a { padding:0px 0px 0px 3px; } .entry .comment-form { width:230px; margin:0px 0px 0px 10px; } .entry .comment-form textarea { overflow:hidden; width:218px; height:14px; margin:0px; padding:2px; font-size:12px; background-color:#fff; border:4px solid #f2f2f2; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; } .entry .submit { padding:2px 0px; text-align:right; } .entry .actions { position:absolute; right:0px; bottom:40px; display:none; } .entry:hover .actions { display:block; } .entry .title input { width:577px; } .entry .caption input { width:569px; } .entry .hover { background-color:#ffC; } .entry .story textarea { width:666px; font-size:14px; height:120px; } .entry .story .submit { width:680px; } .entry .inline-edit-placeholder { color:#5e5e5e; font-style:italic; } .entry .padlock { background:url('/static/images/user_sprite.png') no-repeat -241px -0px; width:11px; height:15px; position:absolute; left:-20px; } .entry .draft { color:#ea5200; font-size:14px; margin:10px auto; text-align:center; } .entry .user-info { width:230px; margin:0px 0px 10px 10px; background-color:#f2f2f2; position:relative; } .entry .user-info .avatar img { height:25px; width:25px; display:block; } .entry .user-info .avatar { float:left; padding:4px; } .entry .user-info .info { float:left; line-height:25px; font-size:12px; padding:4px 0 0 0; } .entry .user-info .follow { position:absolute; line-height:25px; padding:4px 0 0 0; right:4px; top:0px; } /* .entry .edit-title { display:none; font-size:14px; font-weight:normal; } .entry .header:hover .edit-title { display:inline; } */ /* Entry popup * / #entry-popup-container { position:absolute; width:920px; min-height:600px; display:none; z-index:1000; background-color:#fff; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; padding:20px; -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } #entry-popup-overlay { cursor:pointer; position:absolute; top:0; left:0; width:100%; height:100%; opacity:.80; filter:Alpha(Opacity=80); background-color:#797979; } #entry-popup-label { cursor:pointer; position:absolute; top:-26px; right:0px; padding:1px 6px; background-color:#f2f2f2; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; color:#5e5e5e; } /* #entry-popup-label { display:none; position:absolute; bottom:-20px; left:0px; color:#f2f2f2; font-size: 12px; text-align:center; width:960px; } #entry-popup-container:hover #entry-popup-label { display:block; } */ /* Photo overlay */ #photo-overlay .overlay { z-index:1999; cursor:pointer; position:absolute; top:0; left:0; width:100%; height:100%; opacity:.98; filter:Alpha(Opacity=98); background-color:#1A1A1A; } #photo-overlay .photo-overlay-container { z-index:2000; overflow:hidden; width:100%; position:absolute; top:0px; left:0px; } #photo-overlay .content-container { overflow:auto; position:relative; } /* Clear floats */ #photo-overlay .content-container > div { float:left; } #photo-overlay .main-content { position:relative; } #photo-overlay .side-content { width:270px; background-color:#000; position:relative; } /* #photo-overlay .toggle-side-button { position:absolute; top:100px; left:-41px; left:-36px\9; height:20px; height:100px\9; padding: 0px 14px; padding: 0px 8px\9; background:#323232; border-radius:6px 6px 0 0; -moz-border-radius:6px 6px 0 0; -webkit-border-radius:6px 6px 0 0; text-align:center; color:#fff; font-size:14px; white-space:nowrap; line-height:20px; cursor:pointer; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-writing-mode:tb-rl; filter: flipv fliph; } /* \9 is for to enable for all IE */ #photo-overlay .photo-container { display:block; position:relative; padding-top:1px; margin-top:-1px; } /* Padding & margin to prevent collapse of margin between this and photo div. */ #photo-overlay .photo { display:block; text-align:center; position:relative; } #photo-overlay .photo-container:hover .actions { } #photo-overlay .photo-container .actions { z-index:2001; display:block; position:absolute; bottom:0px; right:0px; padding:10px; font-size:12px; text-align:center; color: #000; overflow:auto; } /* z-index is for IE8 */ #photo-overlay .photo-container .actions > div { float:left; margin:0 5px; cursor:pointer; } #photo-overlay .photo-container .actions .entry-button { width:20px; height:20px; background:url('/static/images/photo_overlay_sprite.png') no-repeat -174px 0px; } #photo-overlay .photo-container .actions .comment-button { width:22px; height:20px; background:url('/static/images/photo_overlay_sprite.png') no-repeat -108px 0px; line-height:16px; } #photo-overlay .photo-container .actions .like-button { width:16px; height:20px; background:url('/static/images/photo_overlay_sprite.png') no-repeat -76px 0px; } #photo-overlay .photo-container .actions .liked { background:url('/static/images/photo_overlay_sprite.png') no-repeat -92px 0px; } #photo-overlay .photo-container .actions .info-button { width:20px; height:20px; background:url('/static/images/photo_overlay_sprite.png') no-repeat -56px 0px; } #photo-overlay .photo-container .actions .share-button { width:23px; height:20px; background:url('/static/images/photo_overlay_sprite.png') no-repeat -151px 0px; } #photo-overlay .photo-container .actions .report-button { width:21px; height:17px; background:url('/static/images/photo_overlay_sprite.png') no-repeat -130px 0px; } #photo-overlay .photo-container .left-button-container { display:none; position:absolute; left:0px; top:50%; margin-top:-25px; height:50px; width:50px; cursor:pointer; } #photo-overlay .photo-container .left-button-container:hover .left-button { background:url('/static/images/photo_overlay_sprite.png') no-repeat 0px 0px; } #photo-overlay .photo-container .left-button { cursor:pointer; position:absolute; left:10px; color:#fff; top:50%; width:28px; height:28px; margin-top:-14px; background:url('/static/images/photo_overlay_sprite.png') no-repeat 0px -28px; } #photo-overlay .photo-container .right-button-container { display:none; position:absolute; right:0px; top:50%; margin-top:-25px; height:50px; width:50px; cursor:pointer; } #photo-overlay .photo-container .right-button-container:hover .right-button { background:url('/static/images/photo_overlay_sprite.png') no-repeat -28px 0px; } #photo-overlay .photo-container .right-button { cursor:pointer; position:absolute; right:10px; color:#fff; top:50%; width:28px; height:28px; margin-top:-14px; background:url('/static/images/photo_overlay_sprite.png') no-repeat -28px -28px; } #photo-overlay .photo-container .toggle-side-button { display:none; margin: 0 4px 4px 0; cursor:pointer; position:absolute; right:0px; bottom:0px; width:28px; height:28px; opacity:.80; filter:Alpha(Opacity=80); } #photo-overlay .photo-container .toggle-side-button.enlarge { background:url('/static/images/photo_overlay_sprite.png') no-repeat -56px -28px; } /* #photo-overlay .photo-container .toggle-side-button.enlarge:hover { background:url('/static/images/photo_overlay_sprite.png') no-repeat -56px -28px; } */ #photo-overlay .photo-container .toggle-side-button.reduce { background:url('/static/images/photo_overlay_sprite.png') no-repeat -112px -28px; } /* #photo-overlay .photo-container .toggle-side-button.reduce:hover { background:url('/static/images/photo_overlay_sprite.png') no-repeat -112px -28px; } */ #photo-overlay .nav-actions { position: absolute; top:4px; right:4px; display:none; } #photo-overlay .nav-actions .back-button { display: none; } #photo-overlay .photo img { cursor:pointer; } #photo-overlay .photo .loader { position:absolute; top:50%; left:50%; margin: -9px 0 0 -15px; } #photo-overlay .thumbs-container { width:240px; position:relative; margin:10px 10px 4px 10px; overflow:hidden; } #photo-overlay .thumbs-container li { float: left; padding:0px 0px 5px 0px; height:50px; width:50px; margin:0px 0px 5px 10px; cursor:pointer; } #photo-overlay .thumbs-container a:focus { outline: none; } #photo-overlay .thumbs-container li.selected { background: #75c35d; } #photo-overlay .thumbs-nav { display:none; position:relative; top:-4px; overflow:auto; margin:0 20px 4px 20px; font-size:12px; color:#fff; } #photo-overlay .entry-container { margin: 0 0px 10px 0; } #photo-overlay .header { font-size:26px; font-weight:bold; color:#fff; padding:10px 0 10px 10px; } #photo-overlay .story { color:#fff; max-height:110px; overflow-y:auto; padding:0 10px 10px 10px; margin: 0 40px 0px 0; } #photo-overlay .story::-webkit-scrollbar { width:8px; } #photo-overlay .story::-webkit-scrollbar-thumb{ background-color:#666; -webkit-border-radius: 4px; } #photo-overlay .story::-webkit-scrollbar-track-piece { background-color:#1A1A1A; -webkit-border-radius: 4px; } #photo-overlay .caption { text-align:center; padding:10px; color:#ccc; margin:0 0 15px 0; font-size:16px; font-weight:bold; } #photo-overlay .photo-side-container { padding:0px 0px 0px 20px; overflow-y:auto; } #photo-overlay .photo-side-container::-webkit-scrollbar { width:8px; } #photo-overlay .photo-side-container::-webkit-scrollbar-thumb{ background-color:#666; -webkit-border-radius: 4px; } #photo-overlay .photo-side-container::-webkit-scrollbar-track-piece { background-color:#1A1A1A; -webkit-border-radius: 4px; } #photo-overlay .photo-side-container .comments { max-width:230px; } #photo-overlay .photo-side-container .comment { color:#fff; background-color:#1a1a1a; margin-bottom:4px; padding:4px; font-size:12px; position:relative; overflow:auto; } #photo-overlay .photo-side-container .likes-container { display:none; max-width:222px; background-color:#1a1a1a; margin-bottom:4px; padding:4px; font-size:12px; color:#fff; } #photo-overlay .photo-side-container .likes { overflow:hidden; } #photo-overlay .photo-side-container .like { float:left; height:25px; width:25px; margin:2px 2px 0px 0px; } #photo-overlay .photo-side-container .like img { height:25px; width:25px; } #photo-overlay .photo-side-container .avatar { float:left; height:35px; } #photo-overlay .photo-side-container .message { float:left; margin:2px 0px 14px 6px; width:181px; } #photo-overlay .photo-side-container .comment:hover .info { display:block; } #photo-overlay .photo-side-container .comment .info { display:none; position:absolute; text-align:right; color:#fff; font-size:11px; bottom:2px; left:45px; } #photo-overlay .photo-side-container .comment .info .new { color:red; } #photo-overlay .photo-side-container textarea { overflow:hidden; width:218px; height:14px; margin:0px; padding:2px; font-size:12px; background-color:#fff; border:4px solid #f2f2f2; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; } #photo-overlay .photo-side-container > .info { display:none; font-size:11px; width:222px; margin:0px 0px 4px 0; padding:4px; background-color:#1a1a1a; position:relative; } #photo-overlay .photo-side-container > .info .detail-item { padding-bottom: 2px; overflow:auto; } #photo-overlay .photo-side-container > .info .label { color:#5e5e5e; float:left; font-weight:normal; width:90px; } #photo-overlay .photo-side-container > .info .value { color:#fff; float:left; width:132px; overflow:hidden; } #photo-overlay .photo-side-container > .info .show-hints { color:#fff; padding:20px 0 10px 0; } #photo-overlay .photo-side-container .feedback-container { display:none; } #photo-overlay .photo-side-container > .loader { width:230px; padding:0; } #photo-overlay .feedback-form { max-width:230px; text-align:center; } #photo-overlay .feedback-form .submit { padding:2px 0px; text-align:right; } #photo-overlay .user-info { display:none; width:230px; margin:0px 0px 0px 20px; background-color:#1a1a1a; position:relative; overflow:auto; } #photo-overlay .user-info .avatar img { height:25px; width:25px; display:block; } #photo-overlay .user-info .avatar { float:left; padding:4px 4px 4px 0; height:25px; } #photo-overlay .user-info .info { float:left; line-height:25px; font-size:12px; padding:4px 0 0 0; width:150px; height:25px; overflow:hidden; } #photo-overlay .user-info .follow { position:absolute; line-height:25px; padding:4px 0 0 0; right:0px; top:0px; } /* People page */ #people { margin:20px 0px 20px 20px; } #people .category-title { margin:0 0 20px 0; font-size:24px; font-weight:bold; } .followers { margin:0 0 10px 0; } .follower { float:left; padding:0px 0px 10px 0px; margin: 0px 20px 20px 0; width:215px; height:50px; border-bottom:#f2f2f2 solid 1px; position:relative; } #friends .follower { margin: 0px 15px 20px 0; } .follower:hover .actions { display:block; } .follower:hover .hover { display:none; } .follower .actions { display:none; position:absolute; right:0px; top:0px; text-align:right; } .follower .actions .action-button { margin:0 0 4px 0; } .follower .avatar { float:left; position:relative; width:50px; height:50px; margin:0 10px 0 0; } .follower .avatar img { width:50px; height:50px; } .follower .info { float:left; width:155px; } .follower .info .title a { color:#333333; font-size:18px; font-weight:bold; cursor:pointer; } .follower .info .details { color:#5e5e5e; font-size:12px; } .follower .friend { bottom:-4px; right:-4px; height:20px; width:20px; position:absolute; } .follower .friend img { height:20px; width:20px; } /* Activity feed */ .activity { padding:10px 0px 10px 0px; border-bottom:1px solid #f2f2f2; } .activity .container { position:relative; } .activity .container .content { float:left; margin:0px 0px 10px 0px; } .activity .container .avatar { float:left; height:35px; width:35px; margin:0px 10px 0px 0px; } .activity .container .title { width:630px; margin:0px 0px 4px 0px; } .activity .container .title-entry { font-size:18px; font-weight:bold; margin:0px 0px 4px 0px; } .activity .container .message { max-width:507px; margin:10px 0px 0px 6px; color:#5e5e5e; font-size:14px; position:relative; text-indent:16px; float:left; } .activity .container .quote-start { position:absolute; left:0px; top:-6px; color:#bbbbbb; font-size:300%; text-indent:0; } .activity .container .quote-end { position:absolute; color:#bbbbbb; font-size:300%; text-indent:0; margin:-6px 0px 0px 4px; } .activity .container .show-all { position:relative; height:100px; float:left; } .activity .container .show-all div { position:absolute; bottom:0px; } .activity .container .photos { width:635px; } .activity .container .photo { height:100px; width:100px; margin:0px 4px 4px 0px; float:left; cursor:pointer; } .activity .container .photo img { height:100px; width:100px; } .activity .container .photo.large, .activity .container .photo.large img { height:128px; width:128px; } .activity .container .photo-count{ position:relative; white-space:nowrap; margin:0 0 0 0; color:#5e5e5e; font-weight:normal; font-size:12px; } .activity .container .more-button { position:absolute; right:0px; bottom:-5px; } .activity .container .info { position:absolute; left:45px; bottom:-4px; color:#888888; font-size:11px; } .activity .container .info .new { color:red; } .activity .container .actions { position:absolute; top:3px; right:10px; } .activity .more { display:none; } /* Timeline */ #timeline { background:url('/static/images/user_sprite.png') repeat-y -316px; } #timeline-bottom { background:url('/static/images/user_sprite.png') no-repeat -253px -8px; width:60px; min-height:71px; } #timeline .year { margin:0px 0px 0px 58px; padding:6px 0px 6px 0px; font-size:26px; font-weight:bold; cursor:pointer; } #timeline .month { margin:10px 0px 10px 58px; font-size:20px; font-weight:bold; cursor:pointer; } #timeline .entries { margin:0px 0px 0px 48px; } #timeline .entry { float:left; margin:0px 0px 10px 10px; position:relative; padding:0px; } #timeline .entry > .thumb { height:50px; width:50px; } #timeline .entry .entry-info { position:absolute; top:-100px; left:0px; width:270px; height:75px; display:none; z-index:1; padding:10px; background-color:#f2f2f2; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } #timeline .entry:hover .entry-info { z-index:999; display:block; } #timeline .entry .entry-info .info { position:relative; float:left; width:160px; height:75px; font-weight:bold; } #timeline .entry .entry-info .thumb { float:left; margin-right:10px; height:75px; } #timeline .entry .entry-info .stats { position:absolute; bottom:0px; font-weight:normal; white-space:nowrap; color:#5e5e5e; font-size:12px; } /* Lightbox */ #content-main.lightbox { font-size:12px; color:#5e5e5e; } /* Form elements */ input, textarea, select { outline:0 none; } /* Removes focus border on Safari */ input { border:0px; } input[type="text"], input[type="password"], select, textarea { padding:6px; font-size:18px; border:1px solid #d3d3d3; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; background-color:#f6f6f6; } input[type="file"] { margin:5px 0px; } input[type="checkbox"] { margin:4px 0px; } .form { width:300px; margin: auto;} .form .error { color:#ea5200; font-weight:normal; } .form .info { padding-left:0px; text-align:right; color:#8f8f8f; font-size:11px; font-weight:normal; } .form .highlighted { font-weight:bold; } .form .field { width:300px; position:relative; text-align:left; margin:5px 0px; font-size:12px; } .form .field-wide { width:620px; position:relative; text-align:left; margin:5px 0px; } .form .field input[type="text"], .form .field input[type="password"] { width:286px; } .form .field textarea { width:286px; } .form .field select { width:300px; font-size:14px; padding:8px 6px;} .form .label { text-align:left; font-size:16px; padding-top:8px; } .form .label .info { color:#8f8f8f; font-size:10px; font-weight:normal; margin-left:4px; } .form .submit { padding:10px 0px; text-align:right; } .form .submit-right { float:left; line-height:30px; margin:5px 0 0 0; } .form .submit.center { text-align:center; } .form label.valid { padding-bottom:2px; padding-left:14px; background:url('/static/images/form_validate_ok.gif') no-repeat scroll 0 0 transparent; } .form .help { position:absolute; left:305px; top:10px; width:190px; font-size:14px; } .form .help-wide { text-align:right; white-space:nowrap; } .form .alert-box { margin: 10px 0; } .form .ui-slider { margin: 8px 6px; } .form-hint { color:#8f8f8f !important; font-style:italic; } #avatar-crop-form .label { font-size:16px; margin-bottom:6px; } #profile-form textarea { height:130px; } /* Find friends settings */ #find-friends .user { padding:10px 0px 10px 0px; border-bottom:1px solid #f2f2f2; position:relative; } #find-friends .user .avatar { float:left; height:35px; width:35px; margin:0px 10px 0px 0px; } #find-friends .user .info { float:left; margin:0px 0px 0px 0px; } #find-friends .user .title a { color:#333333; font-size:18px; font-weight:bold; cursor:pointer; } #find-friends .user .details { color:#5e5e5e; font-size:12px; } #find-friends .user .actions { position:absolute; top:10px; right:10px; line-height:35px; color:#5e5e5e; } #search-user-form { margin:0 0 10px 0; text-align:center; position:relative; } #search-user-form input { width:400px; } #search-user-form .form-hint { color:#8f8f8f; } #search-user-form .loader { position:absolute; top:8px; right:132px; width:18px; } /* Entry form elements */ #entry-form { width:680px; } #entry-form textarea { height:120px; width:666px; font-size:14px; } #entry-form #photos { position:relative; margin:5px 0px; padding:6px; border:1px solid #d3d3d3; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; min-height:80px; } #entry-form .photo { padding:8px; margin:6px auto 0px auto; border:1px solid #d3d3d3; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } #entry-form .photo img { height:100px; vertical-align:bottom; } #entry-form .photo input[type="text"] { margin:2px 0px 6px 8px; padding:2px; font-size:12px; } #entry-form .photo .field-caption input[type="text"] { font-size:16px; width:454px; } #entry-form .photo .label { width:0; margin-left:8px; text-align:left; font-size:12px; padding:0; } #entry-form .photo .field-tags input[type="text"] { width:290px; } #entry-form .photo .field-location input[type="text"] { width:150px; } #entry-form #photos-menu { font-size:14px; font-weight:bold; top:6px; position:absolute; right:6px; } #entry-form #photos-menu ul { clear: both; } #entry-form #photos-menu li { float:left; padding:1px 6px; margin:0px 0px 0px 8px; color:#5e5e5e; cursor:pointer; } #entry-form #photos-menu li.selected, #entry-form #photos-menu li:hover { color:#ffffff; background-color:#5e5e5e; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } #entry-form .photo .help { position:relative; width:auto; left:0; top:0; margin-left:9px; } #entry-form #photos-organize { margin:6px auto 6px auto; width:660px; } #entry-form #photos-sortable li { float:left; height:100px; margin:5px; cursor:move; } #entry-form #photos-sortable li img { height:100px; width:100px; vertical-align:bottom; } #entry-form #photos-batch { text-align:center; padding:8px; margin:6px auto 0px auto; } #entry-form #photos-batch .button { margin:27px 0 0 0; } #entry-form #photos-batch .field-tags input[type="text"] { width:420px; } #entry-form .user-tags { width:290px; margin:0 0 0 8px; display:none; } #entry-form .user-locations { width:236px; margin:0 0 0 8px; display:none; } #entry-form .photo .user-tags-link { text-align:right; width:296px; margin:-4px 0 0 8px; font-size:11px; } #entry-form .photo .user-locations-link { text-align:right; width:156px; margin:-4px 0 0 8px; font-size:11px; } #entry-form #upload-info { font-size:12px; top:6px; position:absolute; left:6px; color:#8F8F8F; } #entry-form #upload-drag-info { font-size:12px; color:#8F8F8F; width:666px; text-align:center; margin:10px 0 0 0; } #entry-form #upload-drop-zone { height:150px; line-height:150px; background-color:#75c35d; color:#ffffff; text-align:center; font-weight:bold; font-size:18px; margin:10px 0 0 0; } /* Upload elements */ #upload-list { padding:0; list-style:none; margin:10px 0 0px 0; } #upload-list .file { margin:0 0 10px 0; width:100%; overflow: hidden; } #upload-list .file > div { float:left; } #upload-list .file .file-info { width:216px; margin-left: 0; padding: 0 8px; text-align:right; } #upload-list .file .file-size { color: #666; } #upload-list .file .file-progress { width: 200px; height: 14px; vertical-align: middle; } #upload-list .file .file-error { color:#8a1f11; background-color:#fff6bf; padding: 0 4px; width:426px; } #upload-list .file .file-cancel { padding: 0 8px; } /* #upload-list .file-invalid { cursor:pointer; color:#514721; line-height: 24px; margin-bottom: 1px; } #upload-list .file-invalid span { background: url(/static/images/mootools/error.png) no-repeat 4px 1px; background-color: #fff6bf; padding:1px; padding-left:28px; } */ /* Buttons */ /* This is needed to center dynamic width elements (old way of doing it. New way uses inline-block which works with text-align but not in IE7? Setting an element as a float shrinks a block element to content size. .button-center-wrapper { position:relative; left:50%; float:left; } .button-center { left:-50%; position:relative; } .action-button { float:left; height:30px; padding: 0px 26px; background-color:#75c35d; -moz-border-radius:6px; -webkit-border-radius:6px; text-align:center; color:#ffffff; font-size:18px; white-space:nowrap; line-height:30px; cursor:pointer; } */ .action-button { display:inline-block; font-weight:bold; height:30px; margin:5px 0px 5px 10px; padding: 0px 26px; background-color:#75c35d; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; text-align:center; color:#ffffff; font-size:18px; white-space:nowrap; line-height:30px; cursor:pointer; zoom:1; *display:inline; } /* The star is a quick hack to make it apply only for IE7 and below, and combined with zoom:1 the result is a inline-block. */ .action-button:hover { background-color:#fac632 !important; } .action-button:focus { outline: 0 none; } .action-button.center { margin:5px 0px 5px 0px; } .action-button.top { margin-top:0px; vertical-align:top; } .action-button.medium { height:26px; line-height:26px; font-size:16px; padding:0px 22px; } .action-button.small { height:20px; line-height:20px; font-size:14px; padding:0px 12px; } .action-button.xsmall { height:auto; line-height:normal; font-weight:normal; font-size:14px; padding:1px 6px; margin:0px 0px 0px 8px; } .action-button.center.xsmall { margin:0px; } .action-button.xxsmall { height:auto; line-height:normal; font-weight:normal; font-size:12px; padding:1px 4px; margin:0px 0px 0px 4px; } .action-button.center.xxsmall { margin:0px; } .action-button.gray { background-color:#f2f2f2; color:#5e5e5e; } .action-button.gray:hover { background-color:#75c35d !important; color:#ffffff !important; } .action-button.dark { background-color:#333333; color:#ffffff; } .action-button.dark:hover { background-color:#75c35d !important; color:#ffffff !important; } .action-button.facebook { padding:0px 6px; background-color:#3a5b97; font-size:12px; font-weight:normal; } .action-button.facebook img { vertical-align:text-bottom; } /* old */ .action-button-center { display:inline-block; font-weight:bold; height:30px; margin:5px 0px 5px 0px; padding: 0px 26px; background-color:#75c35d; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; text-align:center; color:#ffffff; font-size:18px; white-space:nowrap; line-height:30px; cursor:pointer; zoom:1; *display:inline; } /* The star is a quick hack to make it apply only for IE7 and below, and combined with zoom:1 the result is a inline-block. */ .action-button-center:hover { background-color:#fac632 !important; } .action-button-2 { display:inline-block; font-weight:bold; height:30px; margin:5px 0px 5px 10px; padding: 0px 26px; background-color:#f2f2f2; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; text-align:center; color:#5e5e5e; font-size:18px; white-space:nowrap; line-height:30px; cursor:pointer; zoom:1; *display:inline; } /* The star is a quick hack to make it apply only for IE7 and below, and combined with zoom:1 the result is a inline-block. */ .action-button-2:hover { background-color:#75c35d; color:#ffffff; } .action-button-2-small { display:inline-block; font-weight:bold; height:20px; margin:5px 0px 5px 10px; padding: 0px 12px; background-color:#f2f2f2; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; text-align:center; color:#5e5e5e; font-size:14px; white-space:nowrap; line-height:20px; cursor:pointer; zoom:1; *display:inline; } /* The star is a quick hack to make it apply only for IE7 and below, and combined with zoom:1 the result is a inline-block. */ .action-button-2-small:hover { background-color:#75c35d !important; color:#ffffff !important; } .action-button-2-small:focus { outline: 0 none; } .action-button-2-small-center { display:inline-block; font-weight:bold; height:20px; margin:5px 0px 5px 0px; padding: 0px 6px; background-color:#f2f2f2; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; text-align:center; color:#5e5e5e; font-size:14px; white-space:nowrap; line-height:20px; cursor:pointer; zoom:1; *display:inline; } /* The star is a quick hack to make it apply only for IE7 and below, and combined with zoom:1 the result is a inline-block. */ .action-button-2-small-center:hover { background-color:#75c35d; color:#ffffff; } .action-button-small { display:inline-block; font-weight:bold; height:20px; margin:5px 0px 5px 10px; padding: 0px 12px; background-color:#75c35d; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; text-align:center; color:#ffffff; font-size:14px; white-space:nowrap; line-height:20px; cursor:pointer; zoom:1; *display:inline; } /* The star is a quick hack to make it apply only for IE7 and below, and combined with zoom:1 the result is a inline-block. */ .action-button-small:hover { background-color:#fac632; } .action-button-small-center { display:inline-block; font-weight:bold; height:20px; margin:5px 0px 5px 0px; padding: 0px 12px; background-color:#75c35d; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; text-align:center; color:#ffffff; font-size:14px; white-space:nowrap; line-height:20px; cursor:pointer; zoom:1; *display:inline; } /* The star is a quick hack to make it apply only for IE7 and below, and combined with zoom:1 the result is a inline-block. */ .action-button-small-center:hover { background-color:#fac632; } /* Tooltips */ .tipsy { position: absolute; padding: 10px; z-index: 1000; } .tipsy-inner { padding:2px 6px 2px 6px; background-color:#75c35d; color:#ffffff; max-width:200px; text-align:center; } /* .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } */ .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 10px dashed #000; } .tipsy-arrow-n { border-bottom-color: #75c35d; } .tipsy-arrow-s { border-top-color: #75c35d; } .tipsy-arrow-e { border-left-color: #75c35d; } .tipsy-arrow-w { border-right-color: #75c35d; } .tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; } .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -10px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; } .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -10px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; } /* Discover */ #discover-featured-photos { margin:-10px 0px 0px 0px; width:920px; } #discover-featured-photos .container { width:928px; overflow:hidden; } #discover-featured-photos .container > div { float:left; margin:0 4px 4px 0; position:relative; } #discover-featured-photos .container > div img { display:block; } /* Remove extra whitespace from hyperlinks */ #discover-featured-photos div.medium { width:458px; height:304px; overflow:hidden; } #discover-featured-photos div.thumb-crop { width:154px; margin:0px; } #discover-featured-photos .thumb-crop img { width:150px; margin:0 4px 4px 0; } #discover-featured-photos .medium img { width:458px; } #discover-featured-photos .thumb-small-crop img { width:80px; height:80px; } #discover-popular-photos { margin:0px 0px 20px 0px; overflow:hidden; } #discover-popular-photos .category-container { width:924px; margin:0px; } #discover-popular-photos .category-container > div { float:left; margin:0 4px 4px 0; } #discover-popular-photos .category-container > div img { vertical-align:bottom; height:80px; width:80px; } .tag-cloud a:hover { color:#fac632 !important; } /* Search */ #search-form { margin:-20px 0px 20px 0px; text-align:center; } #search-form.popular { text-align:left; } #search-form select { font-size:14px; padding:4px; height:30px; margin:0px; vertical-align:bottom; } #search-form input[type="text"] { padding:4px; height:20px; margin:0px; vertical-align:bottom; } #search-form input[type="submit"] { margin:0px; } #search-form span { font-size:12px; color:#8F8F8F; } #search-thumb-zoom { width:160px; top:-40px; margin:0 0 0 auto; } #search-results { width:920px; overflow-x:hidden; } #search-results-container { width:970px; } #search-results li { float:left; } #search-results li img { height:128px; width:128px; margin:0px 0px 0px 0px; padding:0 4px 4px 0; vertical-align:bottom; } #search-results .bottom { margin:6px 0px 10px 0px; width:920px; } #search-results .bottom .left { float:left; } #search-results .bottom .right { float:right; } /* Old navbar. #search-navigation { left:0; position:fixed; width:100%; z-index:10000; bottom:0; } #search-navigation .tab { position:absolute; top:-15px; right:10px; height:20px; font-weight:bold; padding: 0px 12px; background:#f2f2f2; -moz-border-radius:6px 6px 0 0; -webkit-border-radius:6px 6px 0 0; text-align:center; color:#5e5e5e; font-size:14px; white-space:nowrap; line-height:20px; cursor:pointer; } #search-navigation .shadow { height:5px; background:url(/static/images/shadow.png) repeat-x left top; } #search-navigation .content { height:50px; background:#797979; padding:10px; } #search-navigation .photos { float:left; width:100%; } */ #search-navigation-photos { position:relative; } #search-navigation-photos .scrolling-hotspot-left { min-width: 75px; width: 10%; height: 100%; position: absolute; z-index: 200; left: 0; } #search-navigation-photos .scrolling-hotspot-right { min-width: 75px; width: 10%; height: 100%; position: absolute; z-index: 200; right: 0; } #search-navigation-photos .scroll-wrapper { position: relative; overflow: hidden; width: 100%; height: 55px; } #search-navigation-photos .photo { float:left; margin-right:4px; padding:0; height:55px; width:50px; cursor:pointer; } #search-navigation-photos .selected { background: #75c35d; } #search-navigation-photos .arrow { cursor:pointer; background-image: url(/static/images/jquery/ui-icons_ffffff_256x240.png); margin:17px 10px 0 10px; float:left; } /* Start */ #start-promo { font-size:20px; text-align:center; line-height:30px; padding:26px 0 0 0; } #start-join { text-align:center; margin:10px 0 20px 0; } #start-footer { text-align:center; margin:30px 0 0 0; } #start-slideshow { position:relative; width:960px; height:184px; background-color:#f2f2f2; padding:10px 0; overflow:hidden; white-space:nowrap; } #start-slideshow ul { position: relative; } #start-slideshow li { float:left; text-align:left; width:194px; height:184px; } #start-slideshow img { width:184px; height:184px; } /* About */ #about .feature { padding:60px 0 20px 0; } #about .feature > div { padding-left:40px; } #about .feature .wide { padding:0; } #about .title { font-size:20px; line-height:30px; padding-bottom:10px; } #about .info { font-size:14px; text-align:left; line-height:16px; padding-bottom:20px; } #about .text-column { display:inline-block; vertical-align:middle; width:530px; } #about .image-column { display:inline-block; vertical-align:middle; width:340px; text-align:center; } /* Places */ #places-map-container { position: relative; } #places-navbar { position:absolute; bottom:40px; left:0px; width:914px; z-index:999; background:rgba(255,255,255); background:rgba(255,255,255,0.75); padding:5px 1px 0px 5px; } #places-navbar .arrow { background-image: url(/static/images/jquery/ui-icons_797979_256x240.png); } #places-map { width:920px; height:520px } #places-map .photo { height:50px; width:50px; } #places-map .photo img { margin:4px 4px 0px 0px; vertical-align:top; } #places-map .marker-info-box { width:270px; background:#fff; padding:6px 2px 6px 6px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } /* Design bar */ #design-bar { left:0; position:fixed; width:100%; top:0; z-index:1000; } #design-bar .container { background-color:#333333; -moz-box-shadow:0px 0px 10px rgba(0,0,0,0.4); -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.4); box-shadow:0px 0px 10px rgba(0,0,0,0.4); } #design-bar .content { height:145px; width:960px; margin: auto; padding:10px 0; position:relative; color:#ffffff; } #design-bar .menu { font-size:14px; font-weight:bold; top:6px; position:absolute; right:0px; } #design-bar .menu ul { clear: both; } #design-bar .menu li { float:left; padding:1px 6px; margin:0px 0px 0px 8px; color:#ffffff; cursor:pointer; } #design-bar .menu li.selected, #design-bar .menu li:hover { color:#333333; background-color:#ffffff; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } #design-bar .submit { position:absolute; right:0px; bottom:8px; } #design-bar .column { float:left; padding-right:30px; min-width:130px; } #design-bar select { padding:2px; font-size:14px; color:#5e5e5e; border:0px; width:130px; } #design-bar input[type="text"] { padding:4px; font-size:14px; width:75px; } #design-bar .field { position:relative; margin:0 0 4px 0; } #design-bar .label-small { font-size:12px; color:#d2d2d2; margin-top:2px; } #design-bar #color-picker { top:0px; left:90px; } /* Overrides #color-picker below as it has higher specificity */ /* Misc settings */ #watermark-preview-container { position:relative; width:680px; text-align:center; } #watermark-preview-container .loader { position:absolute; top:100px; left:50%; margin-left:-15px; } .preview-photo-thumb { height:50px; width:50px; margin:0px 0px 3px 0px; cursor:pointer; } /* Home page */ #home-profile-avatar { float:left; margin:0 5px 0 0; } #home-profile-info { float:left; margin:0 0px 0 0; width:90px; } #home-profile-people { float:left; font-size:11px; width:80px; text-align:right; } #home-profile-people a { color:#333333; } #home-profile-people a:hover { color:#6bb355; } #home-profile-people .highlight { font-weight:bold; } #home-profile-title { font-weight:bold; font-size:12px; } #home-profile-info { font-size:12px; } #home-welcome-box { margin:10px 0px 30px 45px; position:relative; } #home-welcome-box li { list-style:decimal inside none; font-size:18px; padding:1px 0; } #home-welcome-box .title { font-size:24px; font-weight:bold; } #home-welcome-box .title-2 { font-size:14px; font-weight:bold; } #home-welcome-box .completed { text-decoration:line-through; } #home-welcome-box-button { position:absolute; right:0px; top:6px; margin:0px; } #home-discover-box { padding:10px; margin: 50px 0 10px 0; background-color:#f2f2f2; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; text-align:center; } #home-upload-button { position:relative; text-align:center; } #home-close-entries-button { display:none; position:absolute; right:0px; bottom:0px; } /* Messages */ #messages-actions { position:relative; top:-5px; text-align:right; } #thread-create { display:none; position:relative; } #threads .selected { background-color:#f2f2f2; border-bottom:1px solid #fff; } #threads .thread { padding:10px 0px 10px 0px; border-bottom:1px solid #f2f2f2; position:relative; } #threads .thread .content { float:left; margin:0px 0px 0px 0px; } #threads .thread .status { float:left; height:35px; width:30px; margin:0px 0px 0px 0px; text-align:center; line-height:35px;} #threads .thread .checkbox { position:absolute; right:6px; top:12px; } #threads .thread .count { position:absolute; right:30px; top:15px; color:#fff; min-width:28px; height:18px; line-height:18px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; text-align:center; } #threads .thread .count-sent { right:0px; } #threads .thread .count-low { background-color:#dadada; } #threads .thread .count-medium { background-color:#cad7c1; } #threads .thread .count-high { background-color:#75c35d; } #threads .thread .avatar { float:left; height:35px; width:35px; margin:0px 10px 0px 0px; position:relative; } #threads .thread .title { font-size:18px; font-weight:bold; cursor:pointer; } #threads .thread .message { font-size:12px; color:#5E5E5E; } #threads .thread .info { position:absolute; right:0px; bottom:5px; color:#888888; font-size:11px; } #threads .thread .info .new { color:red; } #threads .avatar .group { bottom:-4px; right:-4px; height:20px; width:20px; position:absolute; } #threads .avatar .group img { height:20px; width:20px; } #thread-reply { display:none; position:relative; } #thread { position:relative; } #thread .title { font-size:22px; font-weight:bold; margin:0 0 0px 0; } #thread .message { margin:10px 0px 10px 0px; position:relative; } #thread .message .content { float:left; margin:0px 0px 0px 0px; } #thread .message .avatar { float:left; height:35px; width:35px; margin:0px 10px 0px 0px; } #thread .message .text { width:855px; background-color:#f2f2f2; padding:10px 10px 20px 10px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } #thread .message .info { position:absolute; right:4px; bottom:4px; color:#888888; font-size:11px; } #thread .message .info .new { color:red; } #thread-create-form { width:875px; } #thread-create-group-warning { display:none; position:absolute; left:320px; top:0px; width:300px; color:#888888; font-size:11px; } #thread-create-group-warning img { float:left; margin-right:4px; } #thread-reply-group-warning { position:absolute; left:45px; bottom:35px; width:300px; color:#888888; font-size:11px; } #thread-reply-group-warning img { float:left; margin-right:4px; } #thread-create-form textarea { height:120px; width:861px; font-size:14px; } #thread-reply-form { width:875px; } #thread-reply-form textarea { height:120px; width:861px; font-size:14px; } #thread .subscribers { height:20px; position:absolute; right:0px; top:6px; line-height:20px; font-size:11px; color:#888888; } #thread .subscribers img { height:20px; vertical-align:middle; } #thread-container { position:relative; } #thread-actions { position:absolute; bottom:0px; } #thread-actions select { font-size:14px; padding:4px; } #thread-navigation { margin:5px 0 0 0; height:30px; text-align:right; } /* Contact */ #contact-tab { right:-400px; position:fixed; z-index:2001; top:200px; } #contact-tab .tab { position:absolute; top:100px; left:-55px; left:-36px\9; height:20px; height:100px\9; font-weight:bold; padding: 0px 12px; padding: 0px 8px\9; background:#f2f2f2; border-radius:6px 6px 0 0; -moz-border-radius:6px 6px 0 0; -webkit-border-radius:6px 6px 0 0; text-align:center; color:#5e5e5e; font-size:14px; white-space:nowrap; line-height:20px; cursor:pointer; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-writing-mode:tb-rl; filter: flipv fliph; } /* \9 is for to enable for all IE */ #contact-tab .content { width:378px; padding:10px; border-radius:6px 0 0 6px; -moz-border-radius:6px 0 0 6px; -webkit-border-radius:6px 0 0 6px; } #contact-tab .form #contact-message { height:140px; font-size:14px; } /* iPhone */ #iphone-promo { overflow:auto; } #iphone-promo > div { float:left; } #iphone-promo .slideshow { position:relative; float:left; margin:0 60px 0 60px; } #iphone-promo .slideshow li { position:absolute; left:28px; top:129px; width:269px; height:385px; display:none; list-style:none; } #iphone-promo .info { width:460px; float:left; margin:60px 0 0 0; } #iphone-promo .info li { list-style-type:disc; padding:8px 0 0 8px; list-style-position:inside; } #iphone-promo .title { font-size:20px; line-height:30px; padding-bottom:10px; } /* iPad */ #ipad-promo { overflow:auto; padding:20px 0 20px 20px; } #ipad-promo > div { float:left; } #ipad-promo .info { width:485px; margin:60px 0 0 0; } #ipad-promo .info li { list-style-type:disc; padding:8px 0 0 8px; list-style-position:inside; } #ipad-promo .title { font-size:20px; line-height:30px; padding-bottom:10px; } /* Miscellaneous */ .notify { text-align:center; color:#ffffff; font-weight:bold; height:30px; margin:0px 20px; padding: 0px 26px; background-color:#75c35d; font-size:18px; white-space:nowrap; line-height:30px; } .dialog { display:none; } .loader { text-align:center; padding:0px 6px; } .error { color:#ea5200; } .bold { font-weight:bold; } .italic { font-style:italic; } .small { font-size:12px; } .large { font-size:16px; } .xlarge { font-size:18px; } .xxlarge { font-size:22px; } .rounded { border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } .list { padding:0px 30px 0 30px; } .list li { list-style-type:disc; padding:8px 0 0 8px; list-style-position:outside; } .tag { font-weight:normal; } .autocomplete-label-small { padding-left:0px; color:#8f8f8f; font-size:11px; font-weight:normal; margin-top:-4px; } .ui-widget-content .ui-state-hover .autocomplete-label-small, .ui-widget-content .ui-state-focus .autocomplete-label-small { color: #ffffff; } .ui-autocomplete-nomatch { background: white url('../Images/AutocompleteError.gif') right center no-repeat; } #color-picker { position:absolute; z-index:1000; top:-89px; left:320px; background-color:#5e5e5e; border:1px solid #d3d3d3; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; padding:4px; } .alert-box { font-size:12px; color:#333333; padding:10px; margin:0 auto 20px auto; max-width:680px; background-color:#ffeb90; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } .info-box { font-size:12px; color:#333333; padding:10px; margin:0 auto 20px auto; max-width:680px; background-color:#f2f2f2; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } /* Helper classes */ .clear { clear:both; } .hidden { display:none; } .float { float:left; } .float-right { float:right; } .center { text-align:center; } .right { text-align:right; }