@gray: #ddd; @red: #971B23; @pink: #FA9CE6; @pink-dark: darken(@pink, 10%); @pink-darker: darken(@pink, 20%); @pink-darkest: darken(@pink, 30%); @pink-light: lighten(@pink, 10%); @pink-lighter: lighten(@pink, 20%); @info-faded: fadeout(@pink-dark, 30%); @content:#fff; @link: #971B23; @link-hover: lighten(#971B23, 20%); @link-visited: #971B23; /* =Mixins -------------------------------------------------------------- */ .rounded-corners { -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; } /* =Global Elements -------------------------------------------------------------- */ /* Main global 'theme' and typographic styles */ /*** GENERAL TAG REDEFINITIONS --------------------------------------------------------------------------------------- ***/ html { height: auto; margin: 0px; padding: 0px; } body { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #000000; text-decoration: none; background-color: @pink-dark; background-image: url(images/star-bg.png); text-align: left; margin: 0px; padding: 0px; } p { padding: 0px; margin: 0px 0px 15px 0px; } a { color: @link; text-decoration: underline; } a:link { color: @link; } a:visited { color: @link-visited; } a:hover { color: @link-hover; } a:active { color: @link-hover; } h1 { font-size: 20px; text-align: center; font-weight:normal; display: block; padding: 5px 0px 7px 0px; margin: 0px 0px 20px 0px; color: #000; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: @pink-dark; } h2 { font-size: 17px; text-align: center; font-weight:normal; display: block; padding: 5px 0px 7px 0px; margin: 0px 0px 20px 0px; color: #000; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: @pink-dark; } hr { color: #000000; margin: 0px; padding: 0px; color: @pink-dark; background-color: @pink-dark; border:none; height: 1px; margin: 5px 0px 5px 0px; } ul { list-style-position: outside; list-style-image: none; list-style-type: circle; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 15px; } ol { list-style-position: outside; list-style-image: none; list-style-type: decimal; padding: 0px 0px 0px 20px; margin: 10px 0px 10px 0px; } li { padding-bottom: 5px; } img { border: none; } /* =Structure -------------------------------------------------------------- */ #siteContainer { display:block; padding:0px 0px 0px 0px; margin:0px auto 20px auto; height:100%; background:@content; overflow:hidden; -moz-box-shadow: 0px 2px 8px #000; -webkit-box-shadow: 0px 2px 8px #000; box-shadow: 0px 2px 8px #000; } #banner { height:200px; display:block; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; background-image: url(images/header.jpg); background-repeat: no-repeat; background-color: #FA9CE6; } #info-banner { display:none; padding:0px 0px 0px 0px; height:40px; background: @info-faded; } #site-info { display:block; float:left; padding:8px 0px 0px 20px; font-size:30px; font-weight:bold; color:#fff; } #site-info a:link, #site-info a:visited, #site-info a:active, #site-info a:hover { color: #fff; text-decoration:none; } #site-description { display:block; float:right; padding:12px 20px 5px 0px; font-size:15px; color:#fff; } #skip { position:absolute; top:-9000px; left:-9000px; z-index:99; } .skip-link a:active, .skip-link a:focus { position:absolute; top:9000px; left:9010px; width:15em; margin:0; padding:3px; text-align:center; font-weight:bold; background:#fff; color:#606060; } /* =Menu -------------------------------------------------------------- */ #access { display:block; width:100%; position: relative; float:left; height:auto; margin: 0 auto; padding:0px 0px 0px 0px; height:auto; font-size:13px; background:#FA9CE6; border-top: 1px solid @pink-dark; border-bottom: 1px solid @pink-dark; ul{ margin: 0; padding: 0; li{ display: inline; a { display:block; float: left; text-decoration: none; color: #000; padding: 7px 15px 7px 15px; background-color: @pink; } a:visited{ color: #000; background-color: @pink; } a:hover{ color: #fff; background-color:@pink-dark; } } .current-menu-parent a, .current-menu-parent a:hover, .current-menu-parent a:active, .current-menu-parent a:visited, .current-menu-item a, .current-menu-item a:hover, .current-menu-item a:active, .current-menu-item a:visited { color: #000; background-color: @pink-light; } } } /* =Content -------------------------------------------------------------- */ #content { display:block; height:100%; clear:both; article { display:block; .entry-meta { font-size:13px; } .entry-title { display:block; width:100%; padding:0px 0px 0px 0px; margin:0px 0px 5px 0px; clear:both; a { text-decoration:none; } } .entry-content { margin-top:30px; margin-bottom:20px; } h3 { display:block; padding:0px 0px 0px 0px; margin:20px 0px 5px 0px; font-size: 15px; clear:both; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000; } p { margin: 0px 0px 10px 0px; width:auto; } ul { list-style: square; margin: 0px 0px 10px 0px; list-style-position: inside; } ol { list-style: decimal; margin: 0px 0px 0px 0px; list-style-position: inside; } .entry-utility { display:block; clear:both; font-size:13px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; } } .first-post { margin-bottom: 0px; } .last-post { margin-bottom: 20px; } } #content-single { } /* =Sidebar */ /* -------------------------------------------------------------- */ .sidebar-link-small { font-size:12px; display:inline; background:none; text-decoration: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } .sidebar-link-standard { display:inline; background:none; text-decoration: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } .sidebar-link-wide { color:#000; font-size:12px; display:block; background:none; text-decoration: none; margin: 0px 0px 0px 0px; padding: 3px 5px 3px 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: @pink-darkest; &:hover { color: @red; background-color: @pink-light; } } /* -------------------------------------------------------------- */ #searchform { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; label { display:none; } #s { width:200px; } } .sidebar { display:block; float:right; height:auto; ul { /* xoxo*/ margin: 0px 0px 20px 0px; padding: 0px 0px 0px 0px; list-style: none outside none; li { /* widget-container */ display:block; margin: 0px 0px 20px 0px; padding: 0px 0px 0px 0px; clear:both; select { margin: 10px 0px 0px 0px; padding: 0px 0px 0px 0px; } h3 { /* widget-title */ color:#fff; display:block; margin: 0px 0px 0px 0px; padding: 5px 5px 5px 5px; background:@pink-dark; } ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; li { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; a:link, a:hover, a:active, a:visited { .sidebar-link-wide; } } } } } } /* =Widgets -------------------------------------------------------------- */ /* =Navigation -------------------------------------------------------------- */ .navigation, .navigations { width:100%; height: 30px color: #006da8; font-size: 12px; line-height: 18px; overflow: hidden; clear:both; } .navigation a:link, .navigation a:visited { color: #0387CD; text-decoration: none; } .navigation a:active, .navigation a:hover { color: #07405e; } .nav-previous, .nav-next , .meta-nav { width: 40%; margin: 0px 0px 0px 0px; padding: 5px 0px 5px 0px; } .nav-previous { float: left; margin-left:20px; } .nav-next { float: right; text-align: right; margin-right:20px; } #nav-above { display:block; margin: 0px 0px 0px 0px; padding: 0; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: @pink-darkest; } #nav-above { display: none; } .paged #nav-above, .single #nav-above { display: block; } #nav-below { display:block; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 0px; border-top-width: 1px; border-top-style: solid; border-top-color: #006da8; } /* =Footer -------------------------------------------------------------- */ #wpstats { display:none; } footer { display:block; clear:both; height:auto; border-top-width: 1px; border-top-style: solid; border-top-color: @pink-darker; background:@pink; margin:5px 0px 0px 0px; padding:7px 0px 0px 0px; text-align:center; section { p { font-family:Verdana, Geneva, sans-serif; font-size:11px; padding-top:4px; } } ul { /* xoxo*/ width:280px; float:left; margin: 10px 20px 10px 20px; padding: 0px 0px 0px 0px; list-style: none outside none; .widget-container { /* widget-container */ display:block; margin: 0px 0px 0px 0px; padding: 10px 0px 10px 0px; clear:both; min-height:50px; background:@pink; .rounded-corners; overflow:hidden; h3 { /* widget-title */ color:#000; font-weight:normal; display:block; border-bottom: 1px solid @pink-dark; margin: -25px 0px 5px 0px; padding: 20px 0px 5px 0px; background:@pink; } ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; li { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; a:link, a:hover, a:active, a:visited { .sidebar-link-small; } } } } } } #comments-title { margin: 0px auto 20px auto; padding: 20px 30px 0px 30px; border-top-width: 1px; border-top-style: solid; border-top-color: #006da8; } section, #content { /* Just the parts that relate to comments. */ ol { list-style-type: none; li { article { } } } } #respond { margin: 0px auto 20px auto; padding: 20px 0px 0px 0px; border-top-width: 1px; border-top-style: solid; border-top-color: #006da8; h3 { margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; } form { margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; label { display:none; } .logged-in-as { margin: 5px 0px 5px 0px; padding: 0px 0px 0px 0px; } .comment-form-comment { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; textarea { } } .form-allowed-tags { margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px; } .form-submit { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align:right; } } } /*** Custom styles for the Confusion Jewelry product lists. ------------------------------------------------------------------------------------------------- ***/ .product { float:left; background-color: #FA9CE6; text-align: center; margin-bottom:20px; } .monogram_row { clear:both; margin: 0px 0px 30px 10px; padding: 0px 0px 0px 0px; } .monogram_font { width: 90px; text-align: left; float: left; } .accessory_row { display:block; width:750px; margin: 0px auto; padding-bottom:10px; } .fused_pendant_row { display:block; width:750px; margin: 0px auto; padding-bottom:10px; label { display:block; select { display:block; width:280px; margin: 0px auto 20px auto; padding: 5px 0px 5px 10px; text-align:left; } } input { } } fused_image_submit { display:block; width:200px; margin: 0px auto; text-align:center; padding: 5px 0px 5px 0px; } .fused_image_row { clear:both; font-size:10px; text-align:center; } .fused_image_pendant { float:left; width: 220px; background-color: #FA9CE6; text-align: center; padding: 0px 0px 0px 0px; margin: 0px 15px 30px 15px; } .fused_image_icon { width: 80px; text-align: center; float: left; margin: 0px 1px 30px 1px; padding: 0px 0px 0px 0px; } .monogram_curlz { width: 90px; text-align: center; float: left; } .monogram_chelsea { width: 90px; text-align: center; float: left; } .accessory_form { label { font-size:12px; } select, input { font-size:12px; padding: 2px 0px 1px 0px; } } .purchaseText { margin: 0px; padding-top: 4px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .purchaseDesc { display:block; width:auto; font-size: 12px; font-style: italic; margin: 0px 0px 5px 0px; padding-top: 4px 0px 4px 0px; } .purchaseButton { margin: 0px; padding-top: 0px 0px 4px 0px; clear: both; } /* =Images -------------------------------------------------------------- */ /* Resize images to fit the main content area. - Applies only to images uploaded via WordPress by targeting size-* classes. - Other images will be left alone. Use "size-auto" class to apply to other images. */ img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img { max-width: 100%; /* When images are too wide for containing element, force them to fit. */ height: auto; /* Override height to match resized width for correct aspect ratio. */ } .alignleft, img.alignleft { display: inline; float: left; margin-right: 10px; margin-top: 4px; } .alignright, img.alignright { display: inline; float: right; margin-left: 10px; margin-top: 4px; } .aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } img.alignleft, img.alignright, img.aligncenter { margin-bottom: 12px; } .wp-caption { background: #f1f1f1; line-height: 18px; margin-bottom: 20px; /* max-width: XXXpx; !important; prevent too-wide images from breaking layout */ padding: 4px; text-align: center; } .wp-caption img { margin: 5px 5px 0; } .wp-caption p.wp-caption-text { color: #888; font-size: 12px; margin: 5px; } .wp-smiley { margin: 0; } .gallery { margin: 0 auto 18px; } .gallery .gallery-item { float: left; margin-top: 0; text-align: center; width: 33%; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery img { border: 2px solid #cfcfcf; } .gallery-columns-2 .attachment-medium { max-width: 92%; height: auto; } .gallery-columns-4 .attachment-thumbnail { max-width: 84%; height: auto; } .gallery .gallery-caption { color: #888; font-size: 12px; margin: 0 0 12px; } .gallery dl { margin: 0; } .gallery img { border: 10px solid #f1f1f1; } .gallery br+br { display: none; } #content .attachment img {/* single attachment images should be centered */ display: block; margin: 0 auto; } /* =Custom Classes -------------------------------------------------------------- */ .clear { clear:both; }