13 min
Kestrel - Code - kestrel.css

/* #kestrelcode */


/* @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400);  */

/*
@font-face {
    font-family: "Open Sans";
    src: url('http://jothut.com/dvlp/font/OpenSans-Regular.ttf') format('truetype'); 
}
*/

body {
    background: #ffffff;
   font-family: "Open Sans", Arial, Helvetica, sans-serif; 
/*   font-family: "Lato", Arial, Helvetica, sans-serif;  */
/*    font-family: "PT Serif", Georgia, Times, "Times New Roman", serif;   */
    font-size: 100%;   /* ~16px */
    line-height: 1.5em;
    width: 100%;
    margin: 0px;
}  

br {
    padding: 50px;
}

.codetext {
    color: #000000; 
    font-size: .8em;
    line-height: 1em;
    font-family: "Courier New" Courier  monospace;
}

header {
    background: #120a8f;   /* ultramarine blue */
	width: 100%;
/*	height: 2em; */
	position: fixed; 
	top: 0;
	left: 0;
	z-index: 100; 
}

section {
    margin: 10px auto 0px;
    position: relative;
    padding-top: 20px; 
}

textarea {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;  
/* 5jun2013    font-size: .95em;  */
    font-size: 1em;
    overflow: auto;
    background: #ffffff;
    border: 1px solid #ccc; 
}

#textareaboxarticle {
    width: 90%;
    height: 250px;
}

#microblogtextareabox {
    width: 75%;
}   


#sitewide {
  margin: 0px auto;
  padding: 0;
/*  28may2013 max-width: 40em; */ /* approx 640 px */
/* 30may2013  max-width: 44em;  */
  max-width: 42em;

  padding: .4em .2em 0 .2em;
}

img {
 /*   max-width: 35em; */
    max-width: 100%;
}

#imageheader img {
    width: 100%;
/*    max-width: 1280px; */ 
    max-width: 990px; 
}

table {
    font-size: .8em;
    color: #000000;
}

#content {
    line-height: 1.7em;
    /* font-size: 1.1em; */
    /* font-size: 1em; */

/* 30may2012   font-size: 1.05em; */
    font-size: 1.2em;

/* arial 
    font-family: Arial;
    font-family: Verdana;
    font-size: 1.05em;
    color: #777;
*/
}


#streamcontent {
 /* 28may2013   font-size: 0.92345em;  */
    font-size: 1em;
}

#microblogcontent {
    line-height: 1.7em;
    font-size: 1.2em;
}

#toc {
    font-size: .8em;
    float: right;
    background: #f0fff0; /* light blue */
    display: inline;
    width: 12.5em;
    text-align: left;
    border: 1px solid #cccccc;
    line-height: 1.2em;
    padding-top: .3em;
    padding-bottom: .3em;
    margin: 1.2em 0 1.2em 1.2em;
} 

/* the button CSS, javascript, and html code is from metafilter.com */
	.buttons {
			background: #ccc;
           		border: 1px solid #ccc; 
			margin: 1;
			float:left;
/*
                        padding-left: 10px;
                        padding-right: 10px;
*/
                        width: 30px;
		}
		
		.raise	{
			border-top: 1px solid buttonhighlight;
			border-left: 1px solid buttonhighlight;
			border-bottom: 1px solid buttonshadow;
			border-right: 1px solid buttonshadow;
			background: #ccc;
			margin:1;
			float:left;
                        width: 30px;
/*
                        padding-left: 10px;
                        padding-right: 10px;
*/
		}
		
		.press {
			border-top: 1px solid buttonshadow;
			border-left: 1px solid buttonshadow;
			border-bottom: 1px solid buttonhighlight;
			border-right: 1px solid buttonhighlight;
			background: #ccc;
			margin:1;
			float:left;
                        width: 30px;
/*
                        padding-left: 10px;
                        padding-right: 10px;
*/
		}	
		
		#toolbar {
/* 15may2013
			margin: 0;
			width: 100px; 
			padding: 0;
			height:20px;
			background: #ccc;
			text-align:left;
*/
			margin: 0;
			padding: 0;
			text-align:left;
                        float:right;

/*
			border-top: 1px solid buttonhighlight;
			border-left: 1px solid buttonhighlight;
			border-bottom: 1px solid buttonshadow;
			border-right: 1px solid buttonshadow;
*/
		}

		#microblogtoolbar {
			margin: 0;
			padding: 0;
			text-align:left;
                        float:right;
		}
#toolbar {
    display: none;
}
#microblogtoolbar {
    display: none;
}

/******************* MEDIA QUERIES START **********************/

/********* smartphone **********/
@media screen and (max-device-width: 480px) {
    body {
        font-size: 110%;
    }
    #content {
        color: #000000;
        font-size: 1.15em;
        line-height: 1.4em;
    }
    #streamcontent {
        font-size: 1em;
    }
    
}

/********** tablet **********/


/* hp tablet and ipad 2 (cp's) both have a resolution and device width/height of 768 x 1024 */
/* ipad 3 (deb's) has a resolution of 1536 x 2048 and device w/h of 768 x 1024 */
/* so based upon my testcontent that uses min-width media queries below, deb's ipad 3 should display purple in both portrait and landscape mode */
/* reason why deb's ipad3 displays same as cp's is because of using the -device-width query above */
/* by adding the meta viewport tag and using min-width, I don't think the below will work for deb's ipad 3 */
/* this body font-size and content font-size work well on ipad with -device-width and/or resolution of 768 x 1024 */
/* although it display smaller on hp tablet for some reason */

/* @media screen and (min-width: 768px) and (max-width: 1024px) { */
 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
    body {
        font-size: 110%;
    }
    #sitewide {
        max-width: 40em; 
    }
    #content {
        color: #000000;
/* 28may2013       font-size: 1.15em; */
/* 30may2013   font-size: 1.3em */
/* 3june2013 font-size: 1.25em; */
        font-size: 1.2em;
        line-height: 1.7em; 
    }
    #streamcontent {
        font-size: 1em; 
    }
}

/********** desktop or laptop **********/
@media screen and (min-device-width: 1224px) {
    #content {
        line-height: 1.7em;
/* 28may2013          font-size: 1.1em; */
/* 30may2013          font-size: 1.25em; */ /* test for a bit 28may2013 */
          font-size: 1.2em;  /* test for a bit 30may2013 */
          color: #222222;

/* for pt serif font-size: 1.4em; */
/*
font-size: 1.25em;
letter-spacing: 1px;
*/

    }
}    


/* testing for resizing desktop/laptop browser */
#testcontent {
    font-size: .7em;
    background: white;
}

@media all and (min-width: 200px) {
    #testcontent {
        font-size: .8em;
        background: red;
    }
}

@media all and (max-width: 320px) {
    #testcontent {
        font-size: .9em;
        background: #00cdcd;
    }
}

@media all and (min-width: 400px) {
    #testcontent {
        font-size: .9em;
        background: orange;
    }
}

@media all and (min-width: 600px) {
    #testcontent {
        font-size: 1em;
        background: yellow;
    }
}

@media all and (min-width: 768px) {
    #testcontent {
        font-size: 1em;
        background: grey;
    }
}

@media all and (min-width: 800px) {
    #testcontent {
        font-size: 1.05em;
        background: green;
    }
}

@media all and (min-width: 1000px) {
    #testcontent {
        font-size: 1.1em;
        background: blue;
    }
}

@media screen and (min-width: 1023px) {
    #testcontent {
        font-size: 1.15em;
        background: black;
        color: red;
    }
}
@media screen and (min-width: 1024px) {
    #testcontent {
        font-size: 1.15em;
        background: black;
        color: #fff;
    }
}
@media screen and (min-width: 1025px) {
    #testcontent {
        font-size: 1.15em;
        background: black;
        color: blue;
    }
}

@media all and (min-width: 1200px) {
    #testcontent {
        font-size: 1.2em;
        background: purple;
        color: #fff;
    }
}


/******************* MEDIA QUERIES END **********************/

#navmenu ul {
    list-style-type: none;
    background: #120a8f;   /* ultramarine blue */
    padding: .4em 0 .5em 0; 
    margin: 0 0 0 0;
    font-size: .9em;
    font-family: Arial, Helvetica, sans-serif;  
}
#navmenu ul li {
    display: inline-block; 
}
#navmenu ul li a {
    text-decoration: none;
    color: #f8f8f8;
    text-align: left;
    padding: 0 .5em;
}
#navmenu ul li a:hover {
    text-decoration: underline;
    color: #ffffff;
}
#navmenu #navmenutext {
    display: none;
}

#footermenu {
    clear: right;
    font-size: .8em;
    text-align: center;
}
#footermenu ul {
    list-style-type: none;
    padding: 0 0 0 0; 
    margin: 0 0 0 0;
}
#footermenu ul li {
    display: inline-block; 
}
#footermenu ul li a {
    text-align: left;
    padding: 0 .5em;
}

h1, h2, h3, h4, h5 {
    color: #000;
    border-bottom: 1px solid #cccccc;
/*  5june2013 redundant?   font-weight: bold; */
}

h1 {font-size: 1.40em;}
h2 {font-size: 1.30em; padding-top: 1.5em;}
h3 {font-size: 1.20em; border-bottom: none; padding-top: 1.5em;}
h4 {font-size: 1.15em; border-bottom: none; padding-top: 1.5em;}
h5 {font-size: 1.10em; border-bottom: none; padding-top: 1.5em;}

#articletitle a {
    color: #000000;
    text-decoration: none;
}

#articletitle a:visited {
    color: #000000;
    text-decoration: none;
}

a.extlink {
/* 5jun2013    text-decoration: underline; */
    text-decoration: none;
}
a.extlink:hover {
    color: red;
}

.toclevel1 {margin-left: 0;}
.toclevel2 {margin-left: .3em;}
.toclevel3 {margin-left: .6em;}
.toclevel4 {margin-left: .9em;}
.toclevel5 {margin-left: 1.2em;}

#content strong, b {
    color: #000000;
}


a {text-decoration: none; color: #0000ff;}
a:visited {color: #cc3399;} 
a:hover {text-decoration: underline;}
a:active {text-decoration: underline; color: #ff0000;}

#content a strong,b {color: #0000ff;}
#content a:visited strong,b {color: #cc3399;}
#content a:hover strong,b {text-decoration: underline;}
#content a:active strong,b {text-decoration: underline; color: #ff0000;}


.greytext a {color: #888888;}
.greytext a:visited {color: #888888;}
.greytext a:hover {color: #000000; text-decoration: underline;}

.hrstream {
/*    background-color: #d8d8d8;  */
    background-color: #ffffff; 
    border-width: 0; 
    color: #d8d8d8; 
    height: 1px; 
    line-height: 0; 
    text-align: left;
} 

.undelete {
    background: #ffff99;
    font-size: 0.6em;
}

#olderlink {float: right;}


.blogposttitle a {
    color: #000000;
/*    font-size: 1.1em; */
/* 5june2013    font-size: 1.05em; */
    font-weight: bold; 
    text-decoration: none;
}
.blogposttitle a:hover {
    color: #000000;
    text-decoration: underline;
}

.highlighted {
    margin-right: .5em;
    margin-left: .5em;
    background: #f5faff;
    padding: .2em .2em 0 .2em;
    border: 1px solid #cccccc;
}


/* this alters only the opening paragraph of text on a blog post except in IE8 */
/*
#content > p:nth-child(2) {
    font-size: 1.2em;
    background: yellow;
}
*/


/* ol formatting adapted from: 
   http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/ 
*/

ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
ol > li {
    position:relative; /* Create a positioning context */
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
}
ol > li:before {
    content:counter(li) ". "; /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;
    font-weight:bold;
    text-align:center;
}
li ol,
/* 3may2013 I think it's suppose to be ol not ul  li ul {margin-top:6px;} */
 li ol {margin-top:6px;} 
ol ol li:last-child {margin-bottom:0;}


#content pre code {
    color: brown;
    font-size: 0.8em;
    line-height: 1em;
    font-family:     "Courier New" Courier  monospace;
}

.added {
    background-color: #cff;
}

.removed {
    background-color: #fcc;
}

.changed {
    background-color: #ff6;
}

/* tag cloud info from petefreitag.com */
.smallestTag { font-size: xx-small; }
.smallTag    { font-size: small; }
.mediumTag   { font-size: medium; }
.largeTag    { font-size: large; }
.largestTag  { font-size: xx-large; }

input {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px; 
    border: 1px solid #cccccc;
    padding-left: .4em;
}

#headersearch {
    float: right;
    margin: 0 0 0 0;
    padding: .2em;
}
#headersearchbox {
    width: 200px;
}

#headersearchlink {
    display: none;
}

.submitbutton {
    font-size: 1em;
    color: #f8f8f8;
    background: #120a8f; 
/* radius was 6px */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
    border: 1px solid #120a8f;
}
.submitbutton:hover {
    color: #ffffff;
    background: #0000cd;
}
#homepagebutton .submitbutton {
    font-size: 1em;
    color: #f8f8f8;
    background: #009900; 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
    border: 1px solid #009900;
}
#homepagebutton .submitbutton:hover {
    color: #ffffff;
    background: #00cc33; 
}
#followbutton {
    font-size: 1em;
    color: #f8f8f8;
    background: #00cc33; 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
    border: 1px solid #00cc33;
    font-weight: bold;
}
#followbutton:hover {
    color: #ffffff;
}
#unfollowbutton {
    font-size: 1em;
    color: #666666;
    background: #c0c0c0; 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
    border: 1px solid #c0c0c0;
    font-weight: bold;
}
#unfollowbutton:hover {
    color: #000000;
}

#headerhomelink {
    float: left;
    background: #120a8f;   /* ultramarine blue */
    padding: .4em .5em .5em .5em; 
    margin: 0 0 0 0;
    font-size: .9em;
    font-family: Arial, Helvetica, sans-serif;  
}
#headerhomelink a {
    color: #f8f8f8;
}
#headerhomelink a:hover {
    color: #ffffff;
    text-decoration: none;
}

.smallscreens {
    display: none;
}

/******************  nav menu on smaller screen ***************/
@media all and (max-width: 480px) {
    #toc {
        display: none;
    }

#navmenu {
    position: relative;
    min-height: 40px;
width: 70px;
float: right;
}
#navmenu ul {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
      /*    border-radius: 5px; */
      /*    box-shadow: 0 1px 2px rgba(0,0,0,.3);   */
    background: #120a8f;  
}
#navmenu ul li {
    display: none;
    margin: 0;
}
#navmenu .current {
    display: block;
}
#navmenu ul li a {
    display: block;
    text-decoration: none;
    color: #f8f8f8;
/*    text-align: left; */
text-align: right;
    padding: 0 .5em;
}
#navmenu ul:hover {
    background: #000000;
}
#navmenu ul:hover li {
    display: block;
    margin: 0 0 5px;
/*    background: #120a8f;  */
}
#navmenu ul li a:hover {
    text-decoration: underline;
    color: #ffffff;
/*    background: #120a8f;  */
}
#navmenu #navmenutext {
    display: inline;
}
#navmenu .current a:active {
    display: none; 
}

    #sitewide {
        padding: .4em .6em 0 .6em;
    }

    .largescreens {
        display: none;
    }

    .smallscreens {
        display: inline;
    }
    h2 {font-size: 1.30em; padding-top: .2em;}
    h3 {font-size: 1.20em; border-bottom: none; padding-top: .2em;}
    h4 {font-size: 1.15em; border-bottom: none; padding-top: .2em;}
    h5 {font-size: 1.10em; border-bottom: none; padding-top: .2em;}

} /* end media query for 480px width */

@media only screen and (max-width : 640px) {
    header {
/* 15may2013        position: absolute; */
        position: fixed;
    }
    #microblogtextareabox {
        width: 85%;
    }   
    #headersearch {
        display: none; 
    }
    #headersearchlink {
        display: inline; 
    }

/* 15may2013 
    h2 {font-size: 1.30em; padding-top: .2em;}
    h3 {font-size: 1.20em; border-bottom: none; padding-top: .2em;}
    h4 {font-size: 1.15em; border-bottom: none; padding-top: .2em;}
    h5 {font-size: 1.10em; border-bottom: none; padding-top: .2em;}
*/
}

@media only screen and (max-width: 800px) { 
    #headersearchbox {
        width: 150px;
    }
}

@media only screen and (max-width: 700px) { 
    #headersearchbox {
        width: 75px;
    }
}

@media only screen and (min-width: 320px) { 
    #toolbar {
        display: inline;
    }
    #microblogtoolbar {
        display: inline;
    }
}
@media only screen and (min-width: 1025px) { 
    #toolbar {
        display: none;
    }
    #microblogtoolbar {
        display: none;
    }
}

@media only screen and (min-width: 320px) { 
    #textareaboxarticle {
        width: 80%;
        height: 125px;
    }
}

@media screen and (min-width: 768px) {
    #textareaboxarticle {
        width: 90%;
        height: 200px;
    }
}

@media screen and (min-width: 1025px) {
    #textareaboxarticle {
        width: 90%;
        height: 250px;
    }
}

#loggedinuserinfo {
    background: #e0eeee;
}

#leftcontent {
background: #f8eaba; 
border: 1px solid #ccc;   
padding: 5px;  
width: 45%;
vertical-align: top;
}

#rightcontent {
background: #ffdddd;      
border: 1px solid #ccc;   
padding: 5px;
width: 45%;
vertical-align: top;
/* float: right; */
}

.activehighlight {
    background: #b0e2ff;
}

#enhtextareaboxarticle {
    width: 100%;
    /* height: 500px; */
    height: 475px;
}

#enhmainwrap {
    overflow:hidden;
}
#leftpane {
    width: 48%;
    float:left;
    padding-left: 10px; 
    position: fixed;
}
#rightpane {
    width: 48%;
    float:right;
    padding-right: 10px; 
}

#enhtoolbar {
margin: 0;
padding: 0;
text-align:left;
}

@media screen and (max-width: 1024px) {
    #enhtoolbar {
        padding: 0 0 40px 0;
    }
    #enhtextareaboxarticle {
        width: 100%;
        height: 400px;
    }
}

.tagbox {
    float: left;
    width: 9em; /* when sitewide width=42em */
    height: 5em; 
    line-height: 4.5em;
/* portrait 
    height: 10em; 
    line-height: 9em;
*/
    border: 5px solid #666666;
    margin: .8em;
    font-size: 1.3em;
    position: relative;
    text-align: center;
}

.tagtext {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;  
}

@media all and (min-width: 320px) {
    .tagbox {
        width: 12em;
        margin: .4em;
    }
}
/*
@media all and (min-width: 400px) {
    .tagbox {
        width: 14em;
    }
}
*/
@media all and (min-width: 480px) {
    .tagbox {
        width: 10.5em;
        font-size: 1.1em;
        margin: .4em;
    }
}
@media all and (min-width: 600px) {
    .tagbox {
        width: 12em;
    }
}
@media all and (min-width: 800px) {
    .tagbox {
        width: 9em;
    }
}

@media all and (max-width: 480px) {
    #footermenu ul li a {
        padding: 0 .3em;
    }
}


/* position text at bottom of div
.tagtext {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 10px;
}
*/


/* notes:

letter-spacing seems to make more sense with a serif font.

a sans-serif font at a large size seems to display better with the letter-spacing.

 - sitewide max width:
I tend toward the 67-72  max chars per line for blog posts.
if content font size is 1.25em, then use 44em for max width.
if content font size is 1.1em, then use 40em for max width.
if content font size is 1.2em, then use 42em for max width.

font-size of 1.25 to 1.3 em seems to look better with a serif font instead of a sans-serif.

/*


/* 
   # = id - unique for a page - used once 
   . = class - repeated usage on a page 
   1em = 16px
   margin/padding: top right bottom left;
*/
From JR's : articles
2437 words - 20597 chars - 13 min read
created on Aug 12, 2013 at 05:56:24 pm - #
source - versions - backlinks