/* At the Nursing Station=> version 1.0 Designed & developed by => Pablo J Boerr URI => http://fliawebdesign.com powered by => ExpressionEngine !! Hosted on => EngineHosting http://enginehosting.com !! you can't use any of this CSS on your site but i'll gladly design a site for you if you pay me =P ANCHORS => color:#89bacc; color:#ba1c1a; =============================================================================== sections => 1 = LINKAGE 2 = IMAGES 3 = TYPOGRAPHY 4 = STRUCTURE 5 = BRANDING 6 = NAVIGATION 7 = POST 7A ==> POST META 8 = COL SEC 8A ==> COL SEC ARHCIVES 8B==> COL SEC HEADING 8C ==> COL SEC TWITTER 8D ==> COL SEC RECENT BLOG 8E ==> SEARCH STYLES 9 = FOOTER SITE INFO 10 = COMMENT FORM 10A ==> COMMENT FORM COMMENTATOR 10B ==> COMMENT PREVIEW 10C ==> COMMENT PREVIEW 11 = ABOUT SECTION PRE FOOTER 11A ==> RESOURCES 12 = ARCHIVE PAGE 13 = GENERAL ELEMENTS 14 = SIGNATURE =============================================================================*/ html{ background: url(../img/checkered_bg.jpg) repeat; border-left :20px solid #454545;} body { color:#444; padding: 0; font-family: Cambria,Georgia, serif !important; font-size: 14px; line-height:22px; } /* 1 Linkage =============================================================================*/ a{text-decoration:none; -webkit-transition:color 0.3s linear;} a:link, a:visited { color:#89bacc; } a:hover, a:focus { color:#ba1c1a; } /* 2 das images =============================================================================*/ img {position: relative; } img.align_left {float: left; display: inline; margin: 0 20px 20px 0; padding:5px; background: #eee url(../img/diago_pattern.png) repeat; } img.align_right {float: right; display: inline; margin: 0 0px 20px 20px; padding:5px; background: #eee url(../img/diago_pattern.png) repeat; } /* 3 TYPOGRAPHY =============================================================================*/ p, ul, ol, li { margin-bottom: 18px; } ul { list-style-type:none; margin-left: 0; } h1 { font-size: 24px; line-height: 36px; margin-bottom: 18px; } h2 { font-size: 22px; line-height: 18px; margin-bottom: 18px; } h3 { font-size: 20px; line-height: 18px; margin-bottom: 18px; } h2,h3,h4,h5,h6{font-weight:200; letter-spacing:1px; text-shadow: 1px 0px 0px #fff;} li {list-style:none;} /* 4 STRUCTURE =============================================================================*/ .page { width: 940px; margin: 0 auto; overflow: hidden; position:relative; padding-bottom: 40px; } .content_wrap{ overflow: hidden; width: 940px; margin-top: 0px; padding-top:20px;} .col_main { float: left; width:540px; } .col_sec{ width: 300px; float: right; position: relative; color:#91989a } #site_info{margin:0 auto; width:940px; padding-top:20px; } #featured {margin-bottom: 40px;} .module{position:relative;} .column{float:left; width: 300px;} /* 5 BRANDING =============================================================================*/ #branding {padding-top:0px; height:100px;} h1#logo a { background: url(../img/atns_logo_v2.png) no-repeat 0 0; display:block; text-indent: -9999px; height:100px; } h1#logo a:focus { background-position:0 1px } /* 6 NAVIGATION =============================================================================*/ ul#nav { background:#eeeeee url(../img/diago_pattern.png) repeat 0 0; overflow:hidden; padding-bottom:0; margin-bottom:40px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border-radius:5px; border:#f5f5f5 1px solid; width:480px; position:absolute; top:15px; right:0; background:#eeeeee url(../img/diago_pattern.png) repeat ; -webkit-gradient(linear, left top, left bottom, from(rgba(250,250,250,.5)), to(#gba(250,250,250,.25)), color-stop(0.2, rgba(0,20,0,.75))); } ul#nav li {width: 120px; float:left; list-style: none; margin-bottom:0; background: url(../img/nav_sep.jpg) no-repeat 100% 50%; } ul#nav li a { color:#454545; display:block; font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,arial,sans-serif; font-size:12px; font-weight:400; height:42px; letter-spacing:2px; margin-right:0px; line-height:40px; text-align:center; text-decoration:none; text-transform:uppercase; font-weight: bold; text-shadow:1px 1px 0 #deded5; -webkit-transition:color 0.5s linear; } ul#nav li:last-child {background: none;} ul#nav li a:hover { font-weight:bold; color:#ba1c1a; background:#e5e5e5 url(../img/diago_pattern.png) repeat 0 0;} ul#nav li a.current{ color:#9e0307; background:rgba(209,209,208,.30) url(../img/diago_pattern.png) ; text-shadow:none; font-weight:bolder;} /* ul#nav li a.current{ color:#9e0307; background:#e5e5e5 url(../img/diago_pattern.png) ; text-shadow:none; font-weight:bolder;} */ /* 7 POST =============================================================================*/ .post {margin-bottom: 60px; position:relative; padding-bottom: 30px; background: url( ../img/border_post_top.jpg) repeat-x 0 100%; } .post h2 {clear:both; color:#89bacc; letter-spacing:1px; padding:10px 40px 40px 0; background:url(../img/border_post_top.jpg) repeat-x 0 100%; position: relative} .post h2 a em {position:absolute; right: 0; bottom:35px; border:none; background:url(../img/rss_hover.png) no-repeat 0 0; text-indent:-9999px; display:block; height:32px; width:35px;} /*RSS ICON */ .post h2 a em:hover {background-position:bottom center} .post p{ margin-left:70px;} .post img.align_right, .post img.align_left { padding: 10px;/* -moz-box-shadow:1px 1px 1px rgba(0,0,0,.14); -webkit-box-shadow:1px 1px 1px rgba(0,0,0,.14); */} .post blockquote {color:#999; margin:0 0 16px 80px; font-style:italic; background: url(../img/big_quote.png) no-repeat 0 0;} h3.date { background: url( ../img/border_post_top.jpg) no-repeat 0 50%; text-align:right; width:540px; padding-top:0px; clear:both; text-transform:uppercase;letter-spacing:1px; color:#89bacc; text-shadow1px 1px 0 #eee; font-size: 10px; font-family:cambria,georgia; font-weight:bold;} p.posted_by { background: url( ../img/border_post_top.jpg) no-repeat 100% 50%;color:#89bacc; margin-left:0; margin-top:40px;text-shadow:0 -1px 0 #eee;} p.posted_by span.comment { margin-left:20px;} /* 7A POST SOCIAL MEDIA POST TO ICONS ---------------------------------------------------------------------*/ a.post_to_twitter_icon{position:absolute; right:5px; bottom:20px; text-indent:-9999px; background: url(../img/twitter_small.png) no-repeat 0 0; display:block; height:25px; width:150px;} a.post_to_delicious_icon{position:absolute; right:175px;text-indent:-9999px; bottom:20px;background: url(../img/delicious.png) no-repeat 0 0; display:block; height:25px; width:150px;} a.post_to_twitter_icon:focus, a.post_to_delicious_icon:focus {background-position:0 1px} /* 8 COL SEC STYLES =============================================================================*/ .col_sec h3 { color:#89bacc; letter-spacing: 2px; } .col_sec ul li { padding:5px 0; margin:0;} /* 8A COL SEC STYLES ARHCIVES ---------------------------------------------------------------------*/ ul#archives_listing li a{background:rgba(250,250,250,.5); display:block; padding:5px;} ul#archives_listing li a:hover{background:rgba(250,250,250,.85);} /* 8B COL SEC STYLES HEADING ---------------------------------------------------------------------*/ h3#recent_blog {background: url(../img/recent_blog_h3.png) no-repeat 0 0; text-indent: -9999px; display: block; height: 60px;} h3#archive_h3 {background: url(../img/archive_h3.png) no-repeat 0 0; text-indent: -9999px; display: block; height: 60px;} h3#twitter_h3 {background: url(../img/twitter_h3.png) no-repeat 0 0; text-indent: -9999px; display: block; height: 60px;} h3#contact_header {background: url(../img/contact_h3.png) no-repeat 0 0; text-indent: -9999px; display: block; height: 60px; margin-bottom: 20px;} h3#recent_comments_h3 { background: url(../img/recent_comments.png) no-repeat 0 0; text-indent: -9999px; display: block; height: 60px; margin-bottom: 20px} h3#leave_comment_h3{background: url(../img/leave_comment_h3.png) no-repeat 0 0; text-indent: -9999px; display: block; height: 60px;} /* 8C COL SEC STYLES TWITTER ---------------------------------------------------------------------*/ ul#twitter{ font-style: italic; } ul#twitter span.support_heading {font-weight: 600; font-size:12px;} ul#twitter li {clear:both; /* border-bottom:dashed 1px #ccc; */ padding-top:5px 0;} img#birdie { border:none; position: absolute; right:0; top:0;} img.twitter_foto {float:left;padding:5px; background: #eee url(../img/diago_pattern.png) repeat; margin:5px 20px 36px 0; border-radius:3px; -mox-border-radius:3px; -webkit-border-radius:3px;-moz-box-shadow:1px 1px 1px rgba(0,0,0,.14); -webkit-box-shadow:1px 1px 1px rgba(0,0,0,.14);} /* 8D COL SEC STYLES RECENT BLOG ---------------------------------------------------------------------*/ .recent_blog ul li {position:relative;} .recent_blog ul li img {padding:5px; background: #eee url(../img/diago_pattern.png) repeat; position:relative;} .recent_blog ul li img:hover {-moz-box-shadow:1px 1px 1px rgba(0,0,0,.14); -webkit-box-shadow:1px 1px 1px rgba(0,0,0,.14); background: #f5f5f5 url(../img/diago_pattern.png) repeat;} .recent_blog ul li span {background:#EEEEEE url(../img/diago_pattern.png) repeat scroll 0 0; bottom:10px; color:red !important; font-weight:500; padding:5px; position:absolute; right:10px; text-align:right; text-shadow:1px 1px 0 #F5F5F5; width:280px;} /* 8E SEARCH STYLES ---------------------------------------------------------------------*/ #search_box { margin-bottom: 40px;} #search_box form input { background:url(../img/rgba.png) repeat 0 0; width:270px; padding:10px 14px; border-width:0px; border: none; border-bottom: 1px solid #eee; border-right: 1px solid #eee; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; font-weight:bold;} h3#search_site { background: url(../img/search_h3.png) no-repeat 0 0; text-indent: -9999px; display: block; height:60px;} #search_box form input {color:#999; font-style: italic;} #search_box form input:focus {background: #eee; border-bottom: 1px solid #f1f1f1; border-right: 1px solid #f1f1f1;} #search_box form input:focus {background: #eee; border-bottom: 1px solid #e8e7e7; border-right: 1px solid #e8e7e7;} em#searched_word {background:yellow; color:#ba1c1a; padding:0 10px; font-weight:bold; font-size:1.8em;} /* 9 FOOTER SITE INFO =============================================================================*/ #site_info {color:#91989a; } #contact_footer {width:300px; float:right;} #contact_footer form {margin-bottom:60px;} #contact_footer form input, #contact_footer form textarea{width:285px; padding:8px 5px;border: none; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;-moz-border-radius: 3px; -webkit-border-radius:3px; border-radius:3px; background:#fff; background:rgba(250,250,250,.8); margin-bottom:5px; color:#89bacc;} #contact_footer form input:focus, #contact_footer form textarea:focus {background:#eee; } #contact_footer form [value] {color:#89bacc; text-transform:uppercase; letter-spacing:1px; font-size:10px;} label.error {color:#ba1c1a} #contact_form em {color:#ba1c1a; font-weight:bold; font-style:normal;} /* 10 COMMENT FORM =============================================================================*/ #comment_box {position:relative; width:300px; float:right;} #comment_box ul, #comment_box ul li{ border:0; margin:0; padding:10px 0; list-style:none; } #comment_box ul li{ clear:both; list-style:none; padding-bottom:10px; color:#999; } #comment_box ul li input{ float:left; background:url(../img/rgba.png) repeat 0 0; width:285px; padding:10px 5px; border-width:0px; border: none; border-bottom: 1px solid #eee; border-right: 1px solid #eee; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;} #comments{float:left; width:540px; } #comment_box textarea {margin-bottom:0px;background:url(../img/rgba.png) repeat 0 0; width:285px; padding:10px 5px; border-width:0px; border: none; border-bottom: 1px solid #eee; border-right: 1px solid #eee; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;height:130px} #comment_box ul li input:focus, #comment_box textarea:focus {background:#eee url(../img/rgba.png) repeat 0 0; } /* 10A COMMENT STYLE FOR COMMENTATORS ---------------------------------------------------------------------*/ h2#odd_even_comment_h2{background: url(../img/odd_even_comment_h2.png) no-repeat 0 0; text-indent: -9999px; display: block; height: 60px;} .odd, .even { margin: 20px 0 0 0; clear: both; overflow: hidden; padding-bottom: 10px; position: relative; padding-top:0px; width:540px; float:left; color:#999; position:relative;} .even{ -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } a.add_comment_buble { background: url(../img/add_comment_buble.png) no-repeat 0 0; display:block; text-indent:-9999px; height:48px; width:48px; position:absolute; top:80px; left:0px;} a.add_comment_buble:hover{ background-position:bottom center} #comment_box button{margin-left:0px;} .gravatar{ position:absolute; top:0; left:0; padding:5px; background: #eee url(../img/diago_pattern.png) repeat; border-radius:3px; -mox-border-radius:3px; -webkit-border-radius:3px;-moz-box-shadow:1px 1px 1px rgba(0,0,0,.14); -webkit-box-shadow:1px 1px 1px rgba(0,0,0,.14); } .odd ul li p, .even ul li p{ clear:both; margin-left:80px; padding:5px 10px 10px 10px; font-weight:600; background: #eee url(../img/diago_pattern.png) repeat; position:relative; text-shadow:1px 1px 0px #fff;} .odd ul li p + p, .even ul li p + p {font-style:italic; font-weight:normal; background:none; } p.first_to_comment {font-size:22px; background:#FEFF6F; padding:5px 10px; } /* 10B COMMENT PREVIEW ---------------------------------------------------------------------*/ div#comment_preview { margin-top:20px; padding:10px 0 40px 0px;} div#comment_preview h3 {margin-bottom:20px; text-transform:uppercase; letter-spacing:-1px;} div#comment_preview p {color:#777; display:block; font-style: italic;} div#comment_preview .quote {font-size:4em; float:left; margin:10px 20px 120px 0px; clear:left; display:block; font-family:helvetica, arial; font-weight:bold; color:#999;} #mp_comment {border-bottom:6px double #eee} /* 10C FOOTER LATEST COMMENTS ---------------------------------------------------------------------*/ .footer_comments { width:540px; float:left;} .footer_comments ul li {position:relative; overflow:hidden; } .footer_comments ul li p {clear:both; margin-left:80px; padding:10px 10px 7px; font-weight:600; background: #eee url(../img/diago_pattern.png) repeat; position:relative; text-shadow:1px 1px 0px #fff;} .footer_comments ul li p + p{font-style:italic; font-weight:normal; background:none;} .footer_comments .gravatar { position:absolute; top:0; left:0;} span.footer_comment_num {color:#fff; position:absolute; right:0; bottom:0px; font-size:52px; text-shadow:1px -1px 0px rgba(0,0,0,.05); font-weight:bolder;} /* 11 ABOUT SECTION PRE FOOTER =============================================================================*/ #about { padding-bottom: 20px; padding-top: 20px;} #about h3 {background: url(../img/about_h3.png) no-repeat 0 0; text-indent: -9999px; display: block; height: 60px;} #about p {font-size: 20px; font-style: italic; text-shadow:1px 1px 0px #fff; line-height: 30px;} img#small_steto {float:right; margin:0 40px 40px 20px;} div#about p:first-letter{font-size: 44px; } /* 11 A RESOURCE FOOTER NOT IN USE RIGTH NOW ---------------------------------------------------------------------*/ .resources h3 {background: url(../img/resources_h3.png) no-repeat 0 0; text-indent: -9999px; display: block; height: 60px;} /* 12 ARCHIVE PAGE =============================================================================*/ body#archive_index_page .col_sec{display:none;} body#archive_index_page div.col_main{ width:940px;} div.col_main_sub {width:270px; float:left; background: #eee url(../img/diago_pattern.png) repeat; margin:0 20px 20px 0; padding:10px 10px 5px 10px; min-height:140px; height:auto !important; height:115px; cursor: pointer;} div.col_main_sub:hover { background: #f5f5f5 url(../img/diago_pattern.png) repeat; -moz-box-shadow:1px 1px 1px rgba(0,0,0,.14); -webkit-box-shadow:1px 1px 1px rgba(0,0,0,.14);} div.col_main_sub p {font-style:italic;} div.col_main_sub:nth-child(3n) { margin-right: 0; } .module_title h6 {font-variant:small-caps; font-weight:bold; margin-bottom:10px;; background:url(../img/checkered_bg.jpg) repeat; margin-left:-10px; padding:5px 10px; -moz-box-shadow:1px 1px 1px rgba(0,0,0,.14); -webkit-box-shadow:1px 1px 1px rgba(0,0,0,.14);} .module_title h6 span{color:#ba1c1a; font-weight:400;} /* 13 ELEMENTS =============================================================================*/ .amp { font-family:Baskerville; font-style:italic; } ::selection { background: #f5f5f5; /* Safari */} ::-moz-selection { background: #f5f5f5; /* Firefox */ } a.backtotop {position:relative; left:880px; bottom:30px; z-index:205; background: url(../img/top.png) no-repeat 0 0; text-indent:-9999px; display:block; width:40px ;height:40px;} a.backtotop:hover{background-position: bottom left} /* 13A button styling ---------------------------------------------------------------------*/ a.diago_but, button.diago_but { background:#ddd url(../img/diago_pattern.png) repeat 0 0; color:#fff; text-transform:uppercase; font-weight:bolder; font-size:24px; display:block; width:110px; padding:0 0 0 5px; border:none; line-height: 25px; -webkit-transition:all 0.5s linear; height:25px; font-family:corbel, helvetica, arial, sans-serif; -moz-transition:all 0.5s linear;} a.diago_but img {float:right;} a.diago_but strong , .view_all_post a strong {color:#bc1e1c; font-weight:900; -webkit-transition:color 0.3s linear; } a.diago_but:hover strong, .view_all_post a:hover strong {color:#fff;} a.diago_but:hover, button.diago_but:hover, .view_all_post a:hover {color:#fff !important; background:#89bacc url(../img/diago_pattern.png) repeat 0 0; width:120px;} /* .col_main a.diago_but {position:absolute; right:0px; bottom:20px;} */ /* creates reverse effect */ .col_main a.diago_but {left:420px; position:relative; top:90px;} .col_sec a.diago_but {width:140px; padding: 0; display: inline-block;padding:0 0 0 5px; -webkit-transition: all 0.5s linear; -moz-transition:all 0.3s linear; } .sep {background:#eee url(../img/diago_pattern.png) repeat 0 0;height:10px; margin:40px 0 20px 0;} .col_sec a.diago_but:hover {width:150px;} /* 13B pagination ---------------------------------------------------------------------*/ .pagination p{ background:#f5f5f5 url(../img/diago_pattern.png) repeat 0 0; border:1px solid #f5f7f5; font-size:16px; line-height:16px; padding:5px; } .view_all_post a { background:#ddd url(../img/diago_pattern.png) repeat 0 0; color:#fff; text-transform:uppercase; font-weight:bolder; font-size:24px; display:block; width:277.9px; padding:0; border:none; line-height: 25px; -webkit-transition:all 0.3s linear; height:25px; display:none;} /* 14 SIGNATURE FLIA + EH & EE =============================================================================*/ #signature { background: #eee url(../img/diago_pattern.png) repeat; clear:both; text-align:center; position:relative; bottom:0; left:0; width:940px; height:40px; padding-top:20px; margin:0 auto; display: block;} .page + .page {padding-bottom: 0;}