/* (CC) 2008 Javeline Version 1 - release date: March , 2008 This stylesheet contains the grid and layout elements */ /* ++++++++++++++++++++ RESET TAGS +++++++++++++++++++++ */ * { margin:0; padding:0; font-family:Arial, Verdana, Geneva, Helvetica, sans-serif; font-size:100%; color:#363636; text-decoration:none; } html { background:#5c5959; color:#000;} body { background:#5c5959 url(../img/backgrounds/body-background.gif) 0 0 repeat-x; color:#000; margin:0; padding:0; font-size: 62.5%; text-align: center; } fieldset { border:0px; } table, td, th { border-collapse:collapse; vertical-align:top; } img { border:none; } ul { width:auto; list-style:none; } * html li {height: 1%} /* ++++++++++++++++++++ End RESET TAGS ++++++++++++++++++++ */ /* GLOBAL LAYOUT / GRID ========================================================================= */ #pageWrapper {width: 895px; height: 100%; background: transparent url(../img/backgrounds/content-background.gif) 0 0 repeat-y; text-align: left; margin: 0 auto;} #header {width: 871px; height: 161px; margin: 0 12px; display: block; overflow: visible; background: transparent url(../img/backgrounds/bg-header-btm.gif) bottom left repeat-x;} #content {width: 871px; height: 100%; overflow: hidden; margin: 0 0 0 12px;} .home #content {background: #fff url(../img/backgrounds/bg-home.gif) 3px 0 repeat-y;} .thoughts #content {background: #fff url(../img/backgrounds/bg-thoughts-index.gif) 3px 0 repeat-y;} #content #interaction {width: 190px; min-height: 600px; padding-top: 10px; overflow: hidden; float: left;} #content #mainContent {width: 400px; height: 100%; padding-top: 10px; float: left;} .search #mainContent {margin-left: 10px;} .thoughts #content #mainContent {width: 655px; height: 100%; padding-top: 10px; float: left;} #content #articles #mainContent {width: 655px; height: 100%; padding-top: 10px; float: left;} #content #media {width: 278px; min-height: 600px; overflow: hidden; padding-top: 10px; float: right;} #footer { clear: left; width:895px; height: 52px; overflow:hidden; background: transparent url(../img/backgrounds/content-bg-btm.gif) bottom left no-repeat;} /* END GLOBAL LAYOUT / GRID ========================================================================= */ /* GENERAL DEFINITIONS ============================================================================ */ .text-browser {display:block; visibility:hidden; position:absolute; left:-999em;} .printonly {display:none;} .required, .footnote { color:#f00; font-weight:normal; } .clearer {clear: both} /* END GENERAL DEFINITIONS ======================================================================== */ /* HEADER ============================================================================ */ #headerContent {width: 865px; height: 124px; display: block; overflow: visible; border: 3px solid #fff; background: transparent url(../img/header.jpg) no-repeat;} /* Logo */ #headerContent #logo {width: 276px; height: 40px; overflow: hidden; margin: 55px 0 0 15px; } /* Main navigation */ #header #menu {height: 21px; width: 865px; display: block; border: 3px solid #fff; border-top: 0; overflow: hidden; background: url(../img/backgrounds/bg-menu.gif) repeat-x;} #header ul#mainMenu {float: left;} #header ul#mainMenu li {float: left; display: block; border-left: 2px solid #fff; padding: 1px 12px 5px 12px; margin: 3px 2px 0 -2px;} #header ul#mainMenu li a { text-transform: uppercase; height: 10px; margin-top: 2px; display: block; } #header ul#mainMenu li a .hide{ display: none;} #header ul#mainMenu li.home a{width: 39px; background: url(../img/nav/home-in.gif) no-repeat; } #header ul#mainMenu li.home a:hover, #header ul#mainMenu li.home-active a{width: 39px; background: url(../img/nav/home-active.gif) 0 0 no-repeat;} #header ul#mainMenu li.thoughts a{width: 101px; background: url(../img/nav/thoughts-in.gif) no-repeat; } #header ul#mainMenu li.thoughts a:hover, #header ul#mainMenu li.thoughts-active a{width: 101px; background: url(../img/nav/thoughts-active.gif) 0 0 no-repeat;} #header ul#mainMenu li.video a{width: 49px; background: url(../img/nav/video-in.gif) no-repeat; } #header ul#mainMenu li.video a:hover, #header ul#mainMenu li.video-active a{width: 49px; background: url(../img/nav/video-active.gif) 0 0 no-repeat;} #header ul#mainMenu li.articles a{width: 66px; background: url(../img/nav/articles-in.gif) no-repeat; } #header ul#mainMenu li.articles a:hover, #header ul#mainMenu li.articles-active a{width: 66px; background: url(../img/nav/articles-active.gif) 0 0 no-repeat;} #header ul#mainMenu li.sucsto a{width: 125px; background: url(../img/nav/successstories-in.gif) no-repeat; } #header ul#mainMenu li.sucsto a:hover, #header ul#mainMenu li.sucsto-active a{width: 125px; background: url(../img/nav/successstories-active.gif) 0 0 no-repeat;} #header ul#subMenu {float: right; margin-top: 8px} #header ul#subMenu li {float: left; display: block; border-left: 1px solid #fff; padding: 0px 7px 0px 7px;} #header ul#subMenu li a { text-transform: uppercase; height: 7px; display: block; } #header ul#subMenu li a .hide{ display: none;} #header ul#subMenu li.discuss {border: none;} #header ul#subMenu li.discuss a{width: 61px; background: url(../img/nav/discuss-in.gif) no-repeat; } #header ul#subMenu li.discuss a:hover, #header ul#subMenu li.discuss-active a {width: 61px; background: url(../img/nav/discuss-active.gif) 0 0 no-repeat;} #header ul#subMenu li.about a{width: 54px; background: url(../img/nav/about-in.gif) no-repeat; } #header ul#subMenu li.about a:hover, #header ul#subMenu li.about-active a {width: 54px; background: url(../img/nav/about-active.gif) 0 0 no-repeat;} #header ul#subMenu li.contact a{width: 48px; background: url(../img/nav/contact-in.gif) no-repeat; } #header ul#subMenu li.contact a:hover, #header ul#subMenu li.contact-active a {width: 48px; background: url(../img/nav/contact-active.gif) 0 0 no-repeat;} #header ul#subMenu li.submit a{width: 37px; background: url(../img/nav/submit-in.gif) no-repeat; } #header ul#subMenu li.submit a:hover, #header ul#subMenu li.submit-active a {width: 37px; background: url(../img/nav/submit-active.gif) 0 0 no-repeat;} /* END HEADER ============================================================================ */ /* CONTENT ============================================================================ */ /* Headers */ h1 { font-size: 2.0em; color: #153349; margin:0; } #logo h1.no-print {display: none;} #mainContent h1 {text-transform: uppercase; margin-bottom: 7px} #interaction h1, #mainContent .article h1 {color: #f55b03} .page h1 {margin-left: 10px} h2 { font-size: 18px; color: #f55b03; margin:0;} #interaction h2, #media h2 {color: #153349;} #mainContent .older h2 {font-size: 1.6em; font-weight: normal;} .widget_text h2 {margin-bottom: 2px;} h3 { font-size: 1.2em; color: #f55b03; margin:0;} #media h3 { color: #fe7f0f; font-size: 1.8em;} h4 { font-size: 1.1em; color: #f55b03; margin-bottom: 5px;} /* p */ p {font-size: 12px; margin-bottom: 10px;} #interaction p{font-size: 1.1em;} /* ul */ #content ul {} li {list-style:none;} #content ul li {background: url(../img/backgrounds/bullet-orange.gif) 0 4px no-repeat; padding-left: 10px;} #content ul li.more {background: none; margin-top: 3px} #content ul li.more a{color: #f55b03;} #content ul li.more a:hover{font-weight: bold;} #content ul li.widget {background: none;} .page .enhanced-links-2 ul li {margin-bottom: 1em} #content ul li.widget_video {margin-bottom: 10px;} /* a */ #content a {color: #153349;} #content a:hover {color: #f55b03;} #content #interaction {font-size: 1.1em;} #content #mainContent a {color: #f55b03;} #content #mainContent a:hover, #content a.more:hover {font-weight: bold;} #content a.more {font-size: 0.8em; color: #f55b03;} /* images */ #content img { display: block; border: 1px solid #b2b2b2; padding: 2px; margin-bottom: 9px;} #content #comments img {border: 0; display: inline; padding: 0; margin: 0} #content img.WP-PrintIcon {display: inline; margin-bottom: 0; padding: 0} /* #content .first-article a img {display: none;} */ #content .first-article {width: 380px; overflow: hidden;} #content .first-article img {float: left; margin-right: 10px} div.hr {margin: 0px 0 10px 3px; display: block;} div.hr hr {display: none;} #interaction div.hr {background: url(../img/backgrounds/hr-interaction.gif) 0 0 no-repeat; width: 180px; height: 6px;} #mainContent div.hr {background: #b2b2b2; height: 1px; width: 390px; margin-left: 10px;} #media div.hr {background: url(../img/backgrounds/hr-media.gif) 0 0 no-repeat; width: 268px; height: 4px; margin: 0 0 10px 7px;} #mainContent #comments div.hr {width: 650px; margin-left: 0} input {border: 1px solid #45595c; font-size: 11px; padding: 1px 3px;} #interaction input.text {width: 105px; line-height: 1.3em } #interaction input.button {width: 50px; background: url(../img/backgrounds/bg-search.gif) 0 0 no-repeat; padding: 0 3px; line-height: 1.5em } /* #interaction #searchForm div {clear: all;} #interaction input.text, #interaction input#s {width: 105px; height: 12px; margin-right: 3px; padding: 1px 2px 3px 3px; background: #fff;} #interaction input.text {margin-right: 1px; font-size: 11px;} #interaction input.button, #interaction input#searchsubmit {width: 50px; height: 18px; margin-top: 0px; padding: 0px 3px 4px; background: url(../img/backgrounds/bg-search.gif) 0 0 no-repeat; cursor: pointer;} #interaction input.subbtn {width: 30px; height: 18px; padding: 0px 3px 4px; background: url(../img/backgrounds/bg-search.gif) 0 0 no-repeat; cursor: pointer;} #interaction input.button { font-size: 11px} */ /* --------- specific blocks ----- */ #playermenu { display:inline; position:absolute; z-index:2;} .text-block {padding: 0px 5px 10px 0px; margin-left: 10px; font-size: 12px;} .text-block .thumb {float: left; margin: 0 8px 0 0; } .headline {width: 100%; border-bottom: 1px solid #b2b2b2; overflow: hidden; margin: 0 0 7px 10px; min-height: 80px; *padding-bottom: 0;} .headline p {margin-bottom: 0;} .headline img {float: left; margin-right: 8px; width: 72px; height: 72px;} .thoughts #mainContent .text-block {padding-bottom: 3px} #content #mainContent .text-block ul.pages {margin-bottom: 1px; display: block; overflow: hidden;} #content #mainContent .text-block ul.pages li {background: none; float: left; padding: 0; margin-right: 3px} #content #mainContent .text-block ul.pages li a {color: #153349; font-weight: bold; font-size: 1.2em; } #content #mainContent .text-block ul.pages li.active a {color: #f55b03;} #content #mainContent .text-block ul.pages li a:hover {color: #f55b03;} #content #mainContent .text-block ul.pages li.inactive a {color: #b3b3b3;} #content #mainContent .summary img {display:inline; float: left; margin-right: 8px; width: 72px; height: 72px; overflow: hidden;} #content #mainContent .summary h2 {display: inline; width: 299px;} #content #mainContent .summary {position: relative; clear: left; width: 300px; height: 100px; overflow: hidden; padding-left: 85px;} #content #mainContent .summary img {position: absolute; left: -85px; top: -50px;} #content .entry .h2-wrapper {position: relative; left: 85px;} .thoughts .entry img {margin-top: -32px} #searchForm{padding: 0px 5px 10px 10px; width: 180px; overflow: hidden;} #searchForm fieldset, #signup fieldset {float: left;} #signup {padding: 0px 0 10px 0; width: 180px; overflow: hidden;} #signup label {display: block; margin: 0; width: 180px;} #signup fieldset {margin-bottom: 5px;} .youtube {margin-bottom: 5px;} .summary .entry {position:relative;} .summary .entry small{ position: absolute; top: 23px; left: 87px; } .textwidget, #mainContent .text-block {text-align: justify; padding-right: 6px;} /* ARTICLE PAGES */ #mainContent .article {margin-bottom: 10px} #mainContent .article h1 {margin: 0 0 25px 0; overflow: hidden;} #content .article p img.alignnone {padding: 4px; border: 2px solid #b2b2b2; height: 130px; width: 130px; position: absolute; top: 159px;} #mainContent .article .illustration {position: absolute; height: 130px; width: 130px; top: 195px;} #mainContent .article .illustration img{padding: 4px; border: 2px solid #b2b2b2; height: 130px; width: 130px;} #mainContent .article p {margin: 10px 0; color: #535151} #mainContent .article .h1wrapper {padding: 0px 0 50px 155px; overflow: hidden;} #mainContent .article .h1wrapper p {margin: 0; font-size: 1.25em;} #mainContent textarea {width: 649px} /* Link pages */ #content #mainContent .links ul li.linkcat {background: None; margin-left: -9px} #content #mainContent ul.blogroll {margin: 0 0 10px 12px} #content #mainContent span.link-cat-title {display: block; padding: 5px 0;} #content #mainContent span.button {display: none;} #interaction .subscribe {margin-left: 3px} #interaction .subscribe li {padding-left: 7px} #interaction li#enhanced-links {width: 100%; overflow: hidden; background: url(../img/backgrounds/hr-interaction.gif) -5px 0 no-repeat; padding-top: 15px; margin-top: 10px; margin-left: 0} #content #interaction ul span.link-cat-title, #interaction li#enhanced-links .button {display: none; margin:0; height: 0; margin-top: -15px} #interaction li.linkcat {background: none; padding-left: 0} #interaction .subscribe ul.blogroll li {padding-left: 10px} /* Author pages */ .author h4, .author .article h2 {color: #363636;} .author .profilepicture {float: left; margin: 0 1em 1em 0;} /* Comments */ #mainContent #comments {width: 650px; margin-left: 10px;} #mainContent #comments h2 {margin: 0 0 5px 5px;} /* ---------------- gallery module ------- */ #gallery-module {width: 257px; min-height: 270px; background: #565247; margin: 5px 0 10px 7px; padding: 12px 0 12px 6px;} /* was bg: #3d3a32 */ #gallery-module p {color: #fff; font-size: 1.1em; text-align: justify; width: 250px} #gallery-module p a{color: #f55b03;} #gallery-module p a:hover{font-weight: bold;} #gallery-module img {float: left; margin-right: 4px; border: 1px solid #f3f3f2; background: #2f2e2e; padding: 2px;} #gallery-module .index {color: #fff; font-size: 1.1em;} #gallery-module .index a{color: #fff;} #gallery-module .index a:hover{color: #f55b03;} /*#ngg-widget-1 {display: block; margin-top: 10px; background: transparent url(../img/backgrounds/hr-media.gif) no-repeat top left; padding-top: 10px} */ .ngg_widget .ngg-widget {background: #565247; margin: 6px 0 0; padding: 12px 0 0 6px;} .ngg_widget img {float: left; margin-right: 3px !important} #content ul.gallery-module li {padding-left:0;} #content ul.gallery-module li.artist-info {background: #565247; padding: 0 0 12px 6px; color: #fff;} #jukebox {display: block; height: 30px; width: 250px;} /* ------------ Footer ------------------ */ /* Footer Navigation */ #footer #footer-navigation {width: 532px; margin: 0 auto; overflow: hidden} #footer #footer-navigation ul li {float: left; display: block; border-left: 1px solid #153349; padding: 0px 9px 0px 9px; margin: 8px 2px 8px 0 } #footer #footer-navigation ul li.home, #footer #footer-navigation ul li.home-active {border-left: none;} #footer #footer-navigation ul li a { text-transform: uppercase; height: 8px; margin-top: 2px; display: block; } #footer #footer-navigation ul li a .hide{ display: none;} #footer #footer-navigation ul li.home a{width: 29px; background: url(../img/footer/home-in.gif) no-repeat; } #footer #footer-navigation ul li.home a:hover{background: url(../img/footer/home-active.gif) 0 0 no-repeat;} #footer #footer-navigation ul li.home-active a{width: 29px; background: url(../img/footer/home-active.gif) 0 0 no-repeat;} #footer #footer-navigation ul li.thoughts a{width: 75px; background: url(../img/footer/thoughts-in.gif) no-repeat; } #footer #footer-navigation ul li.thoughts a:hover{background: url(../img/footer/thoughts-active.gif) no-repeat; } #footer #footer-navigation ul li.thoughts-active a{width: 75px; background: url(../img/footer/thoughts-active.gif) 0 0 no-repeat;} #footer #footer-navigation ul li.video a{width: 37px; background: url(../img/footer/video-in.gif) no-repeat; } #footer #footer-navigation ul li.video a:hover{background: url(../img/footer/video-active.gif) no-repeat; } #footer #footer-navigation ul li.video-active a{width: 37px; background: url(../img/footer/video-active.gif) 0 0 no-repeat;} #footer #footer-navigation ul li.articles a{width: 49px; background: url(../img/footer/articles-in.gif) no-repeat; } #footer #footer-navigation ul li.articles a:hover{background: url(../img/footer/articles-active.gif) no-repeat; } #footer #footer-navigation ul li.articles-active a{width: 49px; background: url(../img/footer/articles-active.gif) 0 0 no-repeat;} #footer #footer-navigation ul li.sucsto a{width: 94px; background: url(../img/footer/successstories-in.gif) no-repeat; } #footer #footer-navigation ul li.sucsto a:hover {background: url(../img/footer/successstories-active.gif) no-repeat; } #footer #footer-navigation ul li.sucsto-active a {width: 94px; background: url(../img/footer/successstories-active.gif) 0 0 no-repeat;} /*#footer #footer-navigation ul li.discuss a {width: 40px; background: url(../img/footer/discuss-in.gif) no-repeat; } #footer #footer-navigation ul li.discuss a:hover {background: url(../img/footer/discuss-active.gif) no-repeat; } #footer #footer-navigation ul li.discuss-active a {width: 40px; background: url(../img/footer/discuss-active.gif) 0 0 no-repeat;}*/ #footer #footer-navigation ul li.about a {width: 54px; background: url(../img/footer/about-in.gif) no-repeat; } #footer #footer-navigation ul li.about a:hover {background: url(../img/footer/about-active.gif) no-repeat; } #footer #footer-navigation ul li.about-active a {width: 54px; background: url(../img/footer/about-active.gif) 0 0 no-repeat;} #footer #footer-navigation ul li.contact a {width: 48px; background: url(../img/footer/contact-in.gif) no-repeat; } #footer #footer-navigation ul li.contact a:hover {background: url(../img/footer/contact-active.gif) no-repeat; } #footer #footer-navigation ul li.contact-active a {width: 48px; background: url(../img/footer/contact-active.gif) 0 0 no-repeat;} #footer #footer-navigation ul li.submit a {width: 37px; background: url(../img/footer/submit-in.gif) no-repeat; } #footer #footer-navigation ul li.submit a:hover {background: url(../img/footer/submit-active.gif) no-repeat; } #footer #footer-navigation ul li.submit-active a {width: 37px; background: url(../img/footer/submit-active.gif) 0 0 no-repeat;} /*#footer #footer-navigation ul li.rss a {width: 19px; background: url(../img/footer/rss-in.gif) no-repeat; } #footer #footer-navigation ul li.rss a:hover {background: url(../img/footer/rss-active.gif) no-repeat; } #footer #footer-navigation ul li.rss-active a {width: 19px; background: url(../img/footer/rss-active.gif) 0 0 no-repeat;} #footer #footer-navigation ul li.links a {width: 28px; background: url(../img/footer/links-in.gif) no-repeat; } #footer #footer-navigation ul li.links a:hover {background: url(../img/footer/links-active.gif) no-repeat; } #footer #footer-navigation ul li.links-active a {width: 28px; background: url(../img/footer/links-active.gif) 0 0 no-repeat;}*/ .credits {width: 845px; display: block; overflow: hidden; color: #979797; margin: 3px 0 0 25px; *margin-top: 10px} .credits .left {float: left; color: #979797} .credits .right {float: right; color: #979797} .credits a{ color: #c8c8c8;} /* NEW CSS CODE FOR ANNIELALLA.COM */ .testimonial { font-style: italic !important; } .testimonial-name { text-align: right !important; margin-bottom: 50px; } div#mainContent { width: 580px !important; }