/*
Theme Name: Computer Milk
Theme URI: http://www.computermilk.net
Description: ComputerMilk Theme for Wordpress
Version: 1 (WP 2.7.1)
Author: Obadiah Metivier
Author URI: http://middleEARmedia.com
Tags: computermilk, obadiah, middleEARmedia
*/

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";




/*
	 Computer Milk
	 by middle EAR media
	 http://www.middleEARmedia.com
*/



/*
	 Colors
	 bg-body: #3FA7E6
	 text: #16374F
	 bg-footer: #161F2A
	 text-footer: #6EAB00
	 button-text/h1/h4 Dark Gray: #11171F
	 button-bg/h2/h3 Green: #C7FF00
	 button hover-bg: #9BD338

*/


/*     Utilities     */
* { margin: 0; padding: 0; }
html, body, #wrap {height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
.hide {background-image:none; text-indent:-99999px; }
.left {float:left;}
.right {float:right;}
.clear 								{ clear: both; }
::selection                         { background: #161F2A; color: #C7FF00; /* Safari */ }
::-moz-selection                    { background: #161F2A; color: #C7FF00; /* Firefox */ }




/*     Layout     */

body								{ margin:0px; padding:0px; font-family:Georgia, "Times New Roman", Times, serif;  font-size: 85%; line-height: 1.3em; width:100%; background-color:#3FA7E6; background-image:url(../../../images/bg-header.jpg); background-repeat: repeat-x; color:#16374F;}

#wrap {margin:0px auto; width:960px;}

#main {padding-bottom: 200px;}  /* must be same height as the footer */
#header { background-image:url(../../../images/header.jpg); height:250px;}
#content { float:left; width:600px; padding-bottom:20px; line-height: 1.8em; letter-spacing:.1em;}
#side {width:320px; float:right; margin: -60px 0 10px 0;}
#footer {position: relative;
	margin-top: -200px; /* negative value of footer height */
	height: 200px;
	clear:both;
	width:100%; padding:0px; background-image:url(../../../images/bg-footer.gif); background-repeat:repeat;
	}
.footerContent { margin:0px auto; width:960px; padding:20px 0px; background-color:#161F2A; background-image:url(../../../images/footer.jpg); background-repeat:no-repeat; font-family:Arial, Helvetica, sans-serif; color:white; font-size:11px; height: 100px;}
.footerContent span { padding:0 0 0 0px; color:#6EAB00;}





/*     Probably don'nt need this  ???    */
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



/*     Links, Buttons and Form Styling     */

.field {border:1px solid #11171F; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius:2px;}
.button { color:#11171F; border:1px solid #11171F; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius:2px; background-color:#C7FF00;}
.button:hover { color:#11171F; border:1px solid #11171F; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius:2px; background-color:#9BD338; cursor:pointer;}
.moreLink { padding:0 5px; float:right;}

.mem {background-image:url(../../../images/mem.png); background-repeat:no-repeat; width:152px; height:16px; text-indent: -99999px; display:block; position:absolute; top:19px; left:283px;}
.mem:hover {background-image:url(../../../images/mem-h.png); background-repeat:no-repeat; width:152px; height:16px; text-indent: -99999px; }


.oldLink {
float:left;
font-weight:bold;
margin:0 0 0 70px;
text-transform:uppercase;
}
.newLink {
float:right;
font-weight:bold;
margin:0;
text-transform:uppercase;
}


.tags { font-size:.9em; border:1px solid #3096D3; padding:10px; background-color:#;}
.tags:hover { border-color:#003366;}

.cats { font-size:.9em; border:1px solid #3096D3; padding:10px; background-color:#;}
.cats:hover { border-color:#003366;}

.postMeta { font-size:.7em; border:1px solid #3096D3; padding:10px; background-color:#;}
.postMeta:hover { border-color:#003366;}
.postMetaArchive { font-size:.9em; border:1px solid #3096D3; border-bottom:5px solid #3096D3; border-right:5px solid #3096D3; padding:10px; background-color:#; margin:10px 0 0 0;}
.postMetaArchive:hover { border-color:#003366; background-color:#3096D3;}

.inlineButton { color:#11171F; border:1px solid #11171F; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius:2px; background-color:#C7FF00; padding:3px 5px;}
.inlineButton:hover { color:#11171F; border:1px solid #11171F; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius:2px; background-color:#9BD338; cursor:pointer; padding:3px 5px;}

.pad5-sides {padding:0px 5px;}




/*	Typography	*/
a 									{color:#ffffff; text-decoration:none; outline:none;}
a:hover								{ color:#C7FF00;  }

acronym								{color:#ffffff; text-decoration:none; outline:none; border-bottom:1px dashed #C7FF00;}
acronym:hover								{ color:#C7FF00; cursor:help; border-bottom:1px dashed #11171F;  }

p { margin: 0 0 1.4em; }

blockquote {
    background: url("../../../images/quote.png") no-repeat scroll 0 0 transparent;
    color: #000;
    font-size: 1.5em;
    line-height: 1.2em;
    min-height: 90px;
    padding: 20px 0 10px 110px;
}

h1, h2, h3, h4, h5, h6 {font-family:"Courier New", Courier, mono;}

h1 { color:#11171F; font-size:2em; margin:0 0 10px 0;}
h1 span { padding:0 0 40px 0;}


h2 { color:#11171F; font-size:1.2em; }
h2 span { padding:0 0 40px 0;}


h2.postTitle { margin:0 0 10px 0; font-size:2em; font-family:"Courier New", Courier, mono; color: #C7FF00; letter-spacing:.15em;}
h2.postTitle a {color:#C7FF00; }
h2.postTitle a:hover {color:#ffffff; }
#side ul li.searchForm {margin:0 0 0 20px;}

h3 {color: #C7FF00; font-size:1.6em;}
h3#respond {margin: 15px 0 0 0;}
h4 { color: #11171F; font-size:1.4em; padding-bottom:5px; }

h5 {color: #000000;}

ul {	
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 1em;	
	list-style-type:none; 	
	list-style-position: inside
	}

.widgettitle {padding-top:10px;}
.green {color: #C7FF00;}

h3.green a {color: #C7FF00;}
h3.green a:hover {color: #ffffff;}


/*	Navigation Styles	*/
#nav {margin:0px auto; width:960px; position:relative;}
#catNav								{ padding: 0px 0px 0px 600px; overflow: hidden; margin: 0 0 0px 0; line-height:0;}
#catNav li							{ display: block;}
#catNav li a						{ display: block; width: 100px; height: 50px; text-indent: -9999px;
	                                  background: url(../../../images/nav-sprite.jpg); float: left;
	 								  border: none; padding: 0; }
#catNav li a:hover                  { cursor:pointer; }									  

#catNav li a#list-one-button		{ background-position: 0px 0px; }
#catNav li.activeCatButton a#list-one-button { background-position: 0px 50px; }
#catNav li a#list-one-button:hover { background-position: 0px 50px; }

#catNav a#list-two-button			{ background-position: -100px 0px; }
#page-wrap #catNav li.activeCatButton a#list-two-button { background-position: -100px 50px; }	
#catNav li a#list-two-button:hover { background-position: -100px 50px; }	

#catNav a#list-three-button			{ background-position: -200px 0px; }
#page-wrap #catNav li.activeCatButton a#list-three-button { background-position: -200px 50px; }
#catNav li a#list-three-button:hover { background-position: -200px 50px; }

a.rssIcon			{ background-image:url(../../../images/feed-icon-28x28.png); position:absolute; top:5px; right:5px; }
a.rssIcon:hover { background-image:url(../../../images/feed-icon-28x28-h.png); cursor:pointer; }

#catNav li a#rssIcon				{ display: block; width: 28px; height: 28px; text-indent: -9999px;
	                                  background-image:url(../../../images/feed-icon-28x28.png); float: left;
	 								  border: none; padding: 0; margin-left: 20px; }
#catNav li a#rssIcon:hover			{ display: block; width: 28px; height: 28px; text-indent: -9999px;
	                                  background-image:url(../../../images/feed-icon-28x28-h.png); float: left;
	 								  border: none; padding: 0;  cursor:pointer;}
									  
/*
	BLOG ENTRIES
*/
.post								{ margin: 0 0 45px 90px; }
.post-image							{ margin:0 0 0 0px;}
.post-image-sidebar					{ width:255px; height:50px; overflow:hidden; margin:0 0 0 10px;}
.post-image-sidebar:hover			{ width:255px; height:50px; overflow:hidden; margin:0 0 0 -10px;}

.page								{ margin: 0 0 45px 0; }

.day								{ color:#eeeeee; font-size: 2.2em; font-weight: bold; margin: 0; font-family: Georgia, serif;}
.month								{ color:#9BD338; font-size: 1.2em; font-weight: bold; text-transform: uppercase; margin: 0; padding:15px 0 0; font-family:Arial, Helvetica, sans-serif; }
.year								{ color:#6EAB00; font-size: 1em; font-weight: bold; margin: 0; padding:-5px 0 0; font-family:Arial, Helvetica, sans-serif;}
ol.commentlist						{ list-style: none; }
.comment-bubble						{ background: #990000; color: white; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
ol.commentlist li p					{ font-size: 1.0em; }
.gravatar							{ margin-top: 3px; padding: 2px; height: 40px; }




/*	Date Calendar Styles	*/

.datebox {
background-image:url(../../../images/bg-datebox.png);
background-repeat:no-repeat;
color:white;
height:100px;
left:-90px;
margin:0 -90px 0 0;
padding:5px;
position:absolute;
text-align:center;
top:0;
width:80px;
z-index:21;
}

p.date {
	width: 40px;
	height: 14px;
	padding: 12px 0px 14px 0;
	text-align: center;
	background: url(../../../images/calendar-sprite.jpg) no-repeat 0 0; 
	float:left;
}

.commentscloud {
	position: absolute;
	text-align: center;
	top: 67px;
	left: -82px;
	width: 30px;
	height: 28px;
	padding: 3px 0;
	background: url(../../../images/comment-bubble.png) no-repeat 0 0;
	z-index:20;
	font-weight:bold;
}

.commentscloud a {color:#224863;}
.commentscloud a:hover {color:#161F2A;}

/*
	COMMENTS
*/
.commentList { }
.commentList ol li { margin: 5px 0 0 90px; padding: 5px; border:1px solid #11171F; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius:2px;}
.commentList ol li.alt { background-color:#3096D3; margin:5px 0 0 90px;}

.xhtml { font-size:.7em; border:1px solid #3096D3; padding:5px; background-color:#;}
.xhtml:hover { border-color:#003366;}

.avatar { background-color:#3096D3; padding:1px;}
.photo {background:white; padding:5px;}



#side ul li ul li {border:1px solid #224863; margin:2px; padding:2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius:2px; width:260px; display:block; background:#3096D3;}


.searchForm {padding:0 0 20px 0;}
img#wpstats{display:none}

/*
	ADVERTISEMENTS
*/
#ads { width:355; border:1px solid black;}
	#ads ul li { float:left; margin:7.5px; padding:10px; border:1px solid black;}
	#ads ul li:hover { border:1px solid #C7FF00;}
	
.google-sidebar-ad {margin:10px;}	
	
/*
	POP UP BUBBLES
*/	
	
        .bubbleInfo {
            position: relative;
            top: 0px;
            left: 0px;

        }
        .trigger {
            position: relative;
        }
     
        /* Bubble pop-up */

        .popup {
        	position: absolute;
        	display: none;
        	z-index: 50;
        	border-collapse: collapse;

        }

        .popup td.corner {
        	height: 15px;
        	width: 19px;
        }

        .popup td#topleft { background-image: url(http://www.computermilk.net/images/bubble/bubble-1.png); }
        .popup td.top { background-image: url(http://www.computermilk.net/images/bubble/bubble-2.png); }
        .popup td#topright { background-image: url(http://www.computermilk.net/images/bubble/bubble-3.png); }
        .popup td.leftside { background-image: url(http://www.computermilk.net/images/bubble/bubble-4.png); }
        .popup td.rightside { background-image: url(http://www.computermilk.net/images/bubble/bubble-5.png); }
        .popup td#bottomleft { background-image: url(http://www.computermilk.net/images/bubble/bubble-6.png); }
        .popup td.bottom { background-image: url(http://www.computermilk.net/images/bubble/bubble-7.png); text-align: center;}
        .popup td.bottom img { display: block; margin: 0 auto; }
        .popup td#bottomright { background-image: url(http://www.computermilk.net/images/bubble/bubble-8.png); }

        .popup table.popup-contents {
        	font-size: 12px;
        	line-height: 1.2em;
        	background-color: #11171F;
        	color:#999999;
        	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;


        	}

        table.popup-contents th {
        	text-align: right;
        	text-transform: lowercase;
			padding:5px;
        	}

        table.popup-contents td {
        	text-align: left;
			padding:5px;
        	}

.popup a {color:#9BD338;}
.popup a:hover {color:#C7FF00;}

.popupTitle { color:#CCCCCC; font-size:1.3em;}
.popupTopRow { padding:5px 0 0 0;}
.popupBottomRow { padding:0 0 5px 0;}

/* Mem Ads - custom sidebar advertisements
-------------------------------------------------------------- */

#mem-ads {
width:280px;
overflow:visible !important;
margin:20px 0 20px 5px;
}

#mem-ads a {
	display:block;
    float: left;
    height: 125px;
    margin: 0 10px 10px 0;
	text-decoration:none!important;
	border:none!important;
    width: 125px;
	opacity:.7;
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	filter:alpha(opacity=70)
}

#mem-ads a:hover {
	opacity:1;
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter:alpha(opacity=100)
}
