Custom CSS for your pleasure

Hi,

I just like to post some of my CSS hacks so others may use it with their own colors and formats. Have a look at the comments and try it for yourself.

/* This is some style specific stuff you may not need to include */

h1, h2, h3, h4, h5, h6, .widgettitle {font-weight:500; text-shadow: rgba(0,0,0,0.4) 1px 1px 2px; font-family:"Oswald",Helvetica,Arial,sans;}

.title_container .main-title {text-transform:uppercase; font-size:24px; font-family:"Oswald",Helvetica,Arial,sans;}

title, #top .alternate_color.title_container .main-title a {text-shadow: rgba(0,0,0,0.2) 1px 1px 2px;}

#footer h3.widgettitle {color:#e1e1e1;}

.avia_textblock h1 { margin-bottom:0px; text-shadow: 3px 3px 3px #000;}

/*#footer {background: none transparent}*/

#top .widget ul.children {margin-left:15px;}

.main_menu {font-family: Oswald, Helvetica, Arial;}

.main_menu ul:first-child > li > a {font-weight:400;}

.sort_by_cat a {border:#ad137f 1px solid; color:#fff; padding:0px 5px 0px 5px;}

.breadcrumb-title {display:none !important;}

.main_menu ul:first-child > li.current-menu-item > a, .main_menu ul:first-child > li.current_page_item > a {font-weight: 400;}

.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a {color: #ad137f;}

.main_color .sidebar .current_page_item>a {color:#ad137f; font-weight:bold;}

.current_page_item>a {font-weight:400;}

/* Remove tranparency from header */

#header {background-color:#fff;}

/* HR Fullwidth remove margins */

.hr-full, .hr-big {margin: 20px 0;}

/* Making images more fancy (box and slight shadow) - CSS class 'framed' must be added manually to IMAGE */

img.framed {background: #f5f5f5; border: 1px solid #fff; outline: 1px solid #eaeaea; box-shadow: 0px 2px 2px rgba(0,0,0,0.6);}

body .alignleft, .entry-content a:link .alignleft, body .alignright, .entry-content a:link .alignright {padding: 4px !important;}

/* Displaying the line below main nav element when current page is level 3+ */

.current-page-ancestor a > .avia-menu-fx {visibility: visible;opacity: 1;}

.current-page-ancestor a > .avia-menu-fx .avia-arrow-wrap {overflow: hidden;display: block;}

/* Bold should be CI color */

.main_color .toggle_content strong, .main_color .toggle_content strong a, .main_color .tab_content strong, .main_color .tab_content strong a, .main_color .asc_count, .main_color .avia-testimonial-content strong {color:#ad137f;}

/* Center Title of Portfolio Item */

.main_color .grid-entry-title {text-align:center;}

/* Rework the menu shading (just a quite bit) */

#header .avia_mega_div {-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.3); -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);}

.main_menu .menu ul {-moz-box-shadow: 0 6px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);}

.responsive #top.boxed .stretch_full {background:#f3f3f3;}

/* Fixing border radius of rounded images */

.avia-post-nav .entry-image img {border-radius: 4px;}

/* Modifiying Post-Nav background color (those nifty flyout-arrows left and right on news and portfolio) */

#top .avia-post-nav:hover {background: #ad137f; background: rgba(160,1,126,0.8);}

#top .avia-post-nav {background: #aaa; background: rgba(160,1,126,0.4);}

/* Remove rounded stuff (in case you prefer some qubic stuff) */

.avia-icon-list .iconlist_icon, .avia-testimonial-image, .avia-testimonial-image img, .iconbox_top .iconbox_icon {border-radius:4px;}

/* Removing the breadcrumb (no one need a breadcrumb on this) */

.title_container .breadcrumb {display:none;}

/* Menu Mods */

.header_color .main_menu ul:first-child > li.active-parent-item > a {color:#ad137f;}

/* Megamenu Mods */

#top #header .mega_menu_title a {font-size:15px; border-bottom: #ccc 1px dotted;}

#top #header .mega_menu_title a:hover {text-decoration:none;}

#header .avia_mega_div .units {border:none;}

/* Tagcloud Links */

.tagcloud a {background:rgba(250,250,250,0.4);}

.tagcloud a:hover {background:rgba(250,250,250,0.8); text-decoration:none;}

/* Tagcloud widget (I'm a lousy guy writing tags lowercase) */

.widget_most_popular_tags {text-transform: capitalize;}

/* Tabs (bold, font size, better to read) */

.js_active .tab {font-size:12px !important;}

.main_color .tabcontainer .tab_titles .tab {font-weight:bold;}

.main_color .sidebar_tab, .main_color .tabcontainer .tab:hover {color: #ad137f;}

/* Tables (what a mess) */

.main_color table caption, .main_color tr:nth-child(even), .main_color .pricing-table>li:nth-child(even) {color: #666;}

.main_color tr:nth-child(odd), .main_color .pricing-table>li:nth-child(odd), .main_color .pricing-extra {color: #666;}

.main_color tr:hover {background:#ad137f; color:#fff;}

/* Form Elements (stretching to 100%, responsible) */

#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select {width:100%;}

/* Ajax Contact Form (I'll leave this - plugin specific. Don't use it anymore) */

button.ajax-submit {margin:0;border: #ad137f 1px solid; background: #ad137f; color: #fff; padding: 10px; font-weight: bold;}

button.ajax-submit:hover {cursor:pointer;}

form.iwacontact span.ajax-feedback.error, form.iwacontact span.ajax-result.error {color:#ad137f;}

/* Sortable links (links are fine, but I prefer more of a button style) */

.main_color #js_sort_items a.active_sort, .main_color #js_sort_items a {color:#666;}

.main_color #js_sort_items a.active_sort {background:#ad137f; color:#fff; border:#ad137f 1px solid;}

.main_color #js_sort_items a:hover {background:#ad137f; color:#fff;}

.sort_by_cat a {border: #ccc 1px solid; padding: 3px 10px 3px 10px; background: #e8e8e8; border-radius:2px; margin-right:10px;}

#js_sort_items .text-sep {display:none;}

/* Widget News remove date/time (don't do this if you care about SEO) */

.news-time {display:none;}

.news-headline {margin-top:4px;}

/* Ajax Search results (didn't like the excerpt stuff and some other slight optimizations) */

.header_color .ajax_search_title {color: #666; line-height: 1.4em; height: 20px; margin-top: 3px; font-size: 14px; }

.ajax_search_response h4:first-child, .ajax_search_response h4 {font-size: 18px; text-transform:uppercase;}

.header_color .ajax_search_excerpt {display:none;}

#top div .ajax_search_entry_view_all {font-weight: normal; text-transform: uppercase;}

.ajax_search_image {border-radius:2px;}

/* Search results (doh!) */

.main_color .search-result-counter {background:#ad137f;}

.search-result-counter {box-shadow:none; border-radius:2px; color:#fff; font-weight:bold;}

.post-meta-infos {display:none;}

.template-search .entry-content .post-title {font-size:18px; margin:0; padding-top:10px;}

.responsive .boxed#top {-moz-box-shadow: 0 0 25px #000; -webkit-box-shadow: 0 0 25px #000; box-shadow: 0 0 25px #000;}

/* Remove dashed line from post overviews (News, Archives - should be fixed by Kriesi) */

.multi-big .post_author_timeline, .single-small .post_author_timeline {border-right-width: 0px;}

/* Adding a slight shadow to the small preview pics used in post overviews (still need x-browser stuff) */

.small-preview {box-shadow: 0 0 6px rgba(0,0,0,0.4);}

/* Form Elements (Contact Form 7) */

span.wpcf7-list-item {margin-left: 0; margin-right:10px;}

#top .footer_color input[type='email'] {border-color: #666; background-color: #333; color: #aaa;}

span.wpcf7-not-valid-tip {top: -52px; left: 1px; background: #ad137f; border: 1px solid #ad137f; padding: 4px; color: #fff;}

div.wpcf7-validation-errors {border: 1px solid #ad137f !important; background: #ad137f; color: #fff; text-align: center; font-weight: 600; padding: 4px;}

div.wpcf7-response-output {margin: 2em 0em 1em;}

/* Iconbox mouseover effect and changing the link behaviour (this is needed if you like to have the whole iconbox linked) */

.main_color.iconbox_top .iconbox_content:hover {background: #efefef;}

#top .iconbox_top a {text-decoration: none;color: inherit;}

/* Changing image overlays from circle to rounded square (there ya go) */

.image-overlay .image-overlay-inside::before {border-radius: 4px;}

/* 3D tag cloud with mug (in case you use this canvas-plugin try the coffee version) */

#myCanvasContainer {background: transparent url('https://media.pcamobile.de/mug.jpg') no-repeat top left;}