/********************************************/ /*** Reset ***/ /********************************************/ body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td { margin: 0; padding: 0; border: 0; } /********************************************/ /*** Global ***/ /********************************************/ body {font-size: 62.5%;color: #333;font-family: Arial, Helvetica, sans-serif;text-align: center;background: #f7f7f7 url(/includes/images/template-items/body_bg.png) repeat-x;overflow: scroll} body#home {font-size: 62.5%;color: #333;font-family: Arial, Helvetica, sans-serif;text-align: center;background: #f7f7f7 url(/includes/images/template-items/body_bg_home.png) repeat-x} #mainContainer {width: 100%} #footerContainer {width: 100%;height: 41px;background: url(/includes/images/template-items/footer_bg.png) repeat-x} .innerContainer {margin: 0 auto;width: 960px;text-align: left} .innerFooterContainer {margin: 0 auto;width: 960px;text-align: left} /***** Headings *****/ h1 {font-size: 2.2em} h2 {font-size: 1.8em} h3 {font-size: 1.6em} h4 {font-size: 1.4em} h5 {font-size: 1.2em} h6 {font-size: 1em} /***** General *****/ img.floatRight {margin: 10px 10px 10px 15px} img.floatLeft {margin: 10px 15px 10px 0} .clear {clear: both} .displayNone {display:none} .floatRight {float: right} .floatLeft {float: left} /***** Paragraphs *****/ p {padding: 7px 0;font-size: 1.3em;line-height: 1.5em} p.textIndent {text-indent: 1.8em} /***** Un-Ordered Lists *****/ ul {list-style-type: none;font-size: 1.3em} ul li {padding: 0 0 4px 10px} /***** Ordered Lists *****/ ol {margin: 15px 0;font-size: 1.3em} ol li {margin-left: 30px;font-size: 1.3em;font-weight: bold;font-family: Georgia, "Times New Roman", Times, serif;color: #222} ol p {font-size: 13px;font-weight: normal;font-family: Arial, Helvetica, sans-serif;color: #333} /***** Blockquotes *****/ blockquote {padding: 10px;display: block;width: 225px;text-align: right;color: #690101;font-family: Georgia, "Times New Roman", Times, serif;font-size: 20px;font-style: italic;letter-spacing: 1pt} blockquote p {line-height: 23px} blockquote em {color: #4c0101;font-size: 24px} blockquote em.first {padding-right: 3px} blockquote em.last {padding-left: 3px} blockquote a {border-bottom: none} #blockquoteWide {margin: 25px 0 55px 15px;width: 930px;background: url(/includes/images/template-items/blockquote_wide_top.png) no-repeat top left} #blockquoteWide blockquote {width: 930px;text-align: left;background: url(/includes/images/template-items/blockqoute_wide_bottom.png) no-repeat bottom left} #blockquoteWide blockquote p {font-family: Georgia, "Times New Roman", Times, serif;font-size: 26px;line-height: 34px;color: #8a8a8a;text-shadow: 0px 1px 1px #fff} #blockquoteWide span {color: #0090c0} /********************************************/ /*** Masthead ***/ /********************************************/ #masthead {position: relative;height: 100px;background: url(/includes/images/template-items/header_bg.png) no-repeat} #logo {margin: 25px 0 0 15px} /********************************************/ /*** Main Navigation ***/ /********************************************/ #mainMenu {float: right;width: 550px;height: 61px} #mainMenu ul {float: left;margin: 0;padding: 0} #mainMenu li {float: left;padding: 0;margin: 0 7px;display: inline} #mainMenu ul li a {text-indent: -999999px;overflow: hidden;display: block;height: 61px;background: url(/includes/images/template-items/main_menu_sprite.png)} #mainMenu #home a {width: 75px;background-position: 0 0} #mainMenu #home a:hover {background-position: 0 122px} #mainMenu #home a#active {width: 75px;background-position: 0 61px} #mainMenu #aboutMe a {width: 107px;background-position: -82px 0} #mainMenu #aboutMe a:hover {background-position: -82px 122px} #mainMenu #aboutMe a#active {background-position: -82px 61px} #mainMenu #portfolio a {width: 100px;background-position: -198px 0} #mainMenu #portfolio a:hover {background-position: -198px 122px} #mainMenu #portfolio a#active {background-position: -198px 61px} #mainMenu #blog a {width: 65px;background-position: -305px 0} #mainMenu #blog a:hover {background-position: -305px 122px} #mainMenu #blog a#active {background-position: -305px 61px} #mainMenu #contactMe a {width: 120px;background-position: -375px 0} #mainMenu #contactMe a:hover {background-position: -375px 122px} #mainMenu #contactMe a#active {background-position: -375px 61px} /********************************************/ /*** Footer ***/ /********************************************/ #footer {padding: 0 15px;clear: both;position: relative;height: 41px} p.copyright {padding-top: 12px;float: right;color: #f7f7f7;font-size: 12px} #footerMenu {padding-top: 12px;list-style-type: none} #footerMenu li {margin: 0;padding: 0;display: inline;font-size: 10px;color: #606060} #footerMenu li a {margin: 0 7px;color: #f7f7f7;font-size: 11px;text-transform: uppercase;text-decoration: none} #footerMenu li a:hover {border-bottom: 1px solid #f7f7f7} /*****************************************************************************************/ /*****************************************************************************************/ /*****************************************************************************************/ #blog {margin-top: 10px;padding-top: 30px} #blogContent {margin: 0 30px 0 15px;width: 600px;float: left} #blogContent h1 {width: 500px;color: #333;font-size: 32px} #blogContent h2 {margin: 35px 0 0 0;color: #333;font-size: 20px;text-transform: uppercase} #blogContent h2 + p {padding: 5px 0 7px 0} #blogContent h3 {margin: 7px 0 0 0;padding: 0} #blogContent h3 + p {padding: 0 0 7px 0} #blogContent h4 {margin: 7px 0 2px 0;padding: 0;font-size: 12px;color: #111;text-transform: uppercase} #blogContent h4 + p {padding: 0 0 7px 0} #blogContent h4.boxHeading {margin-bottom: 20px;padding: 5px 0;color: #111;text-align: center;background: #dbdbdb} #blogContent h5 {margin: 5px 0 1px 0;padding: 0;font-size: 12px;color: #0090c0} #blogContent h5 + p {padding: 0 0 7px 0} #blogContent h6 {margin: 5px 0 0 0;padding: 0;font-size: 11px;color: #333} #blogContent h6 + p {padding: 0 0 7px 0} #blogContent ul.entryDetails {margin: 3px 0 40px 0;list-style-type: none} #blogContent ul.entryDetails li {margin: 0;padding: 0;display: inline;font-size: 10px} #blogContent ul.entryDetails li span.date {margin: 0 5px 0 3px;color: #2e2e2e;font-size: 12px} #blogContent ul.entryDetails li a {margin: 0 5px 0 3px;color: #2e2e2e;font-size: 12px;text-decoration: none} #blogContent ul.entryDetails li a:hover {color: blue;border-bottom: 1px solid blue} #blogContent img.bannerImage {padding: 7px;background: #ecebeb;border: 1px solid #dbdbdb} #blogContent hr.contentBreak {margin: 35px 0;width: 599px;height: 19px;background: url(/includes/images/blog/blog_content_break.png) no-repeat;border: none} .imageWrap {margin: 35px 0;padding: 5px 5px 5px 6px;text-align: center;background: #ecebeb;border: 1px solid #dbdbdb} .imageWrap p {padding: 5px 10px 2px 0;text-align: right;font-size: 11px;text-transform: uppercase} #headingTest {margin: 25px 0;padding: 0 15px 25px 15px;background: #ecebeb;border: 1px solid #dbdbdb} #blogCategoryContent {margin: 0 30px 0 15px;width: 600px;float: left} #blogCategoryContent h1 {width: 500px;color: #333;font-size: 32px} #blogCategoryContent h1 a {width: 500px;color: #333;font-size: 32px;text-decoration: none} #blogCategoryContent ul.entryDetails {margin: 3px 0 15px 0;list-style-type: none} #blogCategoryContent ul.entryDetails li {margin: 0;padding: 0;display: inline;font-size: 10px} #blogCategoryContent ul.entryDetails li span.date {margin: 0 5px 0 3px;color: #2e2e2e;font-size: 12px} #blogCategoryContent ul.entryDetails li a {margin: 0 5px 0 3px;color: #2e2e2e;font-size: 12px;text-decoration: none} #blogCategoryContent ul.entryDetails li a:hover {color: blue;border-bottom: 1px solid blue} #blogCategoryContent .categoryEntry {margin-bottom: 30px;padding-bottom: 25px;;border-bottom: 1px dotted #d6d6d6} #blogCategoryContent img.bannerImage {padding: 7px;background: #ecebeb;border: 1px solid #dbdbdb} #blogCategoryContent p {padding: 7px 10px} #blogContent ul {margin: 10px 0 10px 25px;list-style-type: disc} #blogContent ul li {margin: 0 0 7px 0;padding: 0} #blogSidebar {margin-bottom: 100px;width: 300px;float: left;background: #eaeaea;border: 1px solid #e1e1e1} #blogSidebar #blogAds {margin: 30px 0 35px 20px} #blogSidebar #blogAds a {margin: 0 15px 15px 0;padding: 0;height: 120px;float: left;border: 1px solid #fff} #blogSidebar h3.twitterHeading {margin: 0 0 5px 20px;width: 225px;height: 61px;background: url(/includes/images/blog/sidebar_twitter_heading.png) no-repeat;text-indent: -5000px} #blogSidebar #twitterFeed {margin: 0 20px 35px 20px;list-style-type: none} #blogSidebar #twitterFeed li {margin-bottom: 10px;padding: 5px 0 15px 0;color: #959595;font-style: italic;background: url(/includes/images/blog/sidebar_break.png) no-repeat bottom left} #blogSidebar h3.flickrHeading {margin: 0 0 5px 20px;width: 225px;height: 61px;background: url(/includes/images/blog/sidebar_flickr_heading.png) no-repeat;text-indent: -5000px} #blogSidebar #flickrFeed {margin: 15px 0 35px 20px} #blogSidebar #flickrFeed a {margin: 0 15px 15px 0;padding: 0;float: left;height: 75px;border: 1px solid #d1d0d0} #blogSidebar h3.latestPostsHeading {margin: 0 0 15px 20px;width: 225px;height: 20px;background: url(/includes/images/blog/sidebar_latest_posts_heading.png) no-repeat;text-indent: -5000px} #blogSidebar #recentBlogPosts {margin: 10px 20px 35px 20px;list-style-type: none} #blogSidebar #recentBlogPosts h3 {font-size: 13px;color: #666666} #blogSidebar #recentBlogPosts li {margin-bottom: 10px;padding: 5px 0 15px 0;color: #959595;background: url(/includes/images/blog/sidebar_break.png) no-repeat bottom left} #blogSidebar #recentBlogPosts li a {margin-left: 3px;color: #555;text-decoration: none;border-bottom: 1px solid #555} #blogSidebar #recentBlogPosts li a:hover {color: #0000EE} #blogSidebar h3.latestCommentsHeading {margin: 0 0 5px 20px;width: 225px;height: 20px;background: url(/includes/images/blog/sidebar_latest_comments_heading.png) no-repeat;text-indent: -5000px} #blogSidebar #recentComments {margin: 10px 20px 35px 20px;list-style-type: none} #blogSidebar #recentComments li {margin-bottom: 10px;padding: 5px 0 15px 0;color: #959595;background: url(/includes/images/blog/sidebar_break.png) no-repeat bottom left} #blogSidebar #recentComments li a {color: #959595;text-decoration: none} #blogSidebar #recentComments li a:hover {color: #0000EE} /*****************************************************************************************/ /*** If you make any adjustments to the CSS please do it here feel free to override ***/ /*****************************************************************************************/ #blogComments {margin: 100px 0;position: relative;width: 565px} #blogComments .commentWrap {margin: 35px 0;width: 565px} #blogComments .commentAuthor {} #blogComments .commentAuthor img {float: left} #blogComments .commentAuthor ul {margin: 0 0 0 7px;padding: 47px 0 0 0;float: left;list-style-type: none} #blogComments .commentAuthor ul li {margin: 0;padding: 0} #blogComments .commentAuthor ul li.siteLink a {color: #333;font-size: 12px;text-transform: uppercase;text-decoration: none} #blogComments .commentAuthor ul li.date {color: #555;font-size: 11px;text-transform: uppercase} .commentWrap {position: relative} .commentPoint {position: absolute;top: 90px;left: 18px;width: 43px;height: 34px;background: url(/includes/images/blog/comment_arrow.png) no-repeat} #blogComments .commentEntry {margin: 43px 0 0 0;padding: 7px 15px;background: #ecebeb;border: 1px solid #dbdbdb} .contactForm {margin: 0 0 30px 0;padding: 25px 0 3px 10px;width: 555px;background: #ecebeb;border: 1px solid #dbdbdb} .contactForm label {font-size: 13px;float: left;width: 135px;margin-left:1em;color: #383838} .contactForm input {margin-bottom: 8px;padding: 4px 0 4px 3px;width: 370px;font-family: inherit;background: #fff url(/includes/images/template-items/textarea_bg.gif) no-repeat top left;border: 1px solid #e8e8e8} .contactForm textarea {padding-left: 3px;width: 370px;height: 130px;font-family: inherit;background: #fff url(/includes/images/template-items/textarea_bg.gif) no-repeat top left;border: 1px solid #e8e8e8} .contactForm select {margin: 0 0 8px 0;padding: 4px 0;width:375px;font-family: inherit} .contactForm option {} .contactForm #submitButton {margin: 15px 0 0 415px;width: 92px;height: 28px;background: url(/includes/images/template-items/form_submit.jpg) no-repeat;cursor: pointer;text-indent: -999em;border: none} .contactForm #submitButton:hover {background-position: bottom left} hr.commentBreak {border: none;border-top: 1px dotted #dedede} hr.commentFormBreak {margin: 35px 0;width: 565px;height: 19px;background: url(/includes/images/blog/comment_form_break.png) no-repeat;border: none} a.postComment {position: absolute;top: 7px;right: 0;color: #444;text-decoration: none;border-bottom: 1px solid #444} a.postComment:hover {color: #2183A0;border-bottom: 1px solid #2183A0} #blogComments h3 {padding: 0 0 5px 3px;color: #333} /*****************************************************************************************/ /*****************************************************************************************/ /*****************************************************************************************/ .responseMsg {} .responseMsg p {padding: 15px 15px 10px 73px;font-size: 12px;line-height: 1.3em} .responseMsg span {display: block;font-size: 11px;font-weight: bold;text-transform: uppercase} .responseMsg ul {margin: 0 0 10px 65px} .successMsg {margin: 30px 0;width: 100%;min-height: 65px;color: #1C8400;background: #E9F9E5 url(/includes/images/blog/success_msg_icon.jpg) no-repeat 15px 10px;border: 1px solid #B4E8AA} .errorMsg {margin: 30px 0;width: 100%;min-height: 65px;color: #B50007;background: #F9E5E6 url(/includes/images/blog/error_msg_icon.jpg) no-repeat 15px 10px;border: 1px solid #E8AAAD} .infoMsg {margin: 30px 0;width: 100%;min-height: 65px;color: #0055B5;background: #E5ECF9 url(/includes/images/blog/info_msg_icon.jpg) no-repeat 15px 12px;border: 1px solid #AAC6E8} .noticeMsg {margin: 30px 0;width: 100%;min-height: 65px;color: #828400;background: #F9F9E5 url(/includes/images/blog/notice_msg_icon.jpg) no-repeat 15px 10px;border: 1px solid #E8E3AA} .botPageCount{float:right;margin: 5px 20px 80px 0} .botPageCount b{padding:5px 8px; border:1px solid #fff; background:#969696; color:#fff;} .botPageCount a{padding:5px 8px; border:1px solid #fff; background:#eaeaea; text-decoration:none;} .botPageCount a:hover {color: blue!important;border: 1px solid #555} .botPageCount a:visited {color: #333} .botPageCount span.previousPage{margin-right:10px;} .botPageCount span.nextPage{margin-left:10px;} .botPageCount span a {padding: 0;color: #333;border: none;background:none} .botPageCount span a:hover {color: blue !important;border: none;border-bottom: 1px solid blue} .botPageCount span a:visited {color: #333} #viewDemoDownloadSource {margin: 40px 0} #viewDemoDownloadSource a#viewDemo {float: left;width: 238px;height: 108px;display: block;background: url(/includes/images/blog/view_demo_download_source.png) no-repeat 0 0;text-indent: -5000px} #viewDemoDownloadSource a#downloadSource {float: left;width: 359px;height: 108px;display: block;background: url(/includes/images/blog/view_demo_download_source.png) no-repeat -238px 0;text-indent: -5000px} #viewDemoDownloadSource a#viewDemo:hover {background-position: 0 -108px} #viewDemoDownloadSource a#downloadSource:hover {background-position: -238px -108px} #downloadFiles {margin: 40px 0} #downloadFiles a#downloadFilesLink {width: 597px;height: 108px;display: block;background: url(/includes/images/blog/download_files.png) no-repeat 0 0;text-indent: -5000px} #downloadFiles a#downloadFilesLink:hover {background-position: 0 -108px} #downloadSource {} #downloadSource a#downloadSourceLink {width: 597px;height: 108px;display: block;background: url(/includes/images/blog/download_source.png) no-repeat 0 0;text-indent: -5000px} #downloadSource a#downloadSourceLink:hover {background-position: 0 -108px} #blogMasthead {position: relative;margin: 25px 0 0 15px;width: 930px;height: 35px;background: #eaeaea;border: 1px solid #e1e1e1} #blogMasthead #blogMenu {margin: 1px 0 0 0;padding: 0;width: 469px;height: 33px;float: left} #blogMasthead #blogMenu li {float: left;padding: 0;margin: 0;display: inline} #blogMasthead #blogMenu li a {text-indent: -999999px;overflow: hidden;display: block;height: 33px;background: url(/includes/images/blog/blog_menu_sprite.png)} #blogMasthead #blogMenu li#tutorials a {width: 109px;background-position: 0 0} #blogMasthead #blogMenu li#tutorials a:hover {background-position: 0px 33px} #blogMasthead #blogMenu li#articles a {width: 101px;background-position: -109px 0} #blogMasthead #blogMenu li#articles a:hover {background-position: -109px 33px} #blogMasthead #blogMenu li#free a {width: 115px;background-position: -210px 0} #blogMasthead #blogMenu li#free a:hover {background-position: -210px 33px} #blogMasthead #blogMenu li#about a {width: 144px;background-position: -325px 0} #blogMasthead #blogMenu li#about a:hover {background-position: -325px 33px} #rssFeed {float: right} #rssFeed a {margin: 1px 20px 0 0px;width: 189px;height: 32px;display: block;background: url(/includes/images/blog/rss.png) no-repeat top left;text-indent: -5000px;outline: none} #rssFeed a:hover {background-position: bottom left} #blogContent #shareThis {margin: 65px 0 45px 0;padding: 54px 0 0 84px;width: 600px;height: 118px;list-style-type: none;background: url(/includes/images/blog/social_box.png) no-repeat} #blogContent #shareThis li {margin: 0 10px 0 0;padding: 0;float: left;display: inline} #blogContent #shareThis li a {width: 60px;height: 52px;display: block;text-indent: -5000px} #blogContent #shareThis li a#socialDelicious {background: url(/includes/images/blog/social_delicious.png) no-repeat} #blogContent #shareThis li a#socialDigg {background: url(/includes/images/blog/social_digg.png) no-repeat} #blogContent #shareThis li a#socialStubmle {background: url(/includes/images/blog/social_stumble.png) no-repeat} #blogContent #shareThis li a#socialReddit {background: url(/includes/images/blog/social_reddit.png) no-repeat} #blogContent #shareThis li a#socialTechnorati {background: url(/includes/images/blog/social_technorati.png) no-repeat} #blogContent #shareThis li a#socialTwitter {background: url(/includes/images/blog/social_twitter.png) no-repeat} #blogContent pre {font-size: 12px;line-height: 20px;width: 590px;overflow: auto;overflow-y: hidden;background: url(/includes/images/blog/code_bg.jpg);margin: 10px 0 20px 0} #blogContent pre code {display: block; margin-left: 20px} #blogContent pre code ol {} #blogContent pre code ol li {font-size: 12px;font-family: "Consolas","Courier New",Courier,mono} #blogContent pre code ol li span {}