@import url(http://fonts.googleapis.com/css?family=Orbitron);

/*   
     Theme Name: Dragonfly
     Theme URI: http://
     Description: Dragonfly is a mobile-first responsive WordPress theme.  That means it has a special layout and style just for mobile, and automatically adjusts to an appropriate look depending on the screen size and device used.	 My goal was to make a fast, responsive and stylish theme aimed at mobile devices that would still look great on a large screen.
     Author: F Marchan
     Author URI: http://flarnie.com/
     Version: 0.1.2
     Tags: flexible-width, microformats, right-sidebar, threaded-comments, two-columns, green, blue, purple, translation-ready, custom-colors, custom-menu, custom-background, theme-options, full-width-template, sticky-post
     .
     License: Like WordPress, this work is released under GNU General Public License, version 2 (GPL).
     License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html/
     .
     Credit to Andy Clarke for CSS3 Media Queries,

NOTE: USE WITH CAUTION AND TEST WITH ABANDON*/

/*Basic CSS Reset */
@import url('styles/cssreset.css');

/* Basic WordPress Styles */
@import url('styles/wpstyle.css');


/*General*/

a{
    color:black;
    text-decoration:underline;
}

a:hover
{
    color:#19391B;
} 

body{
    font-family:"Arial",Helvetica, sans-serif;
    background-color:#f6f7ec;
}

#wrapper{
    position:relative;
}

h1, 
h2, 
h3 { 
    font-family: 'Orbitron', sans-serif;
    text-transform:lowercase;
}

h1, 
h2, 
h3, 
h4 {
    padding: 0 0 0.5em;
}

p{
    margin-bottom:.5em;
    font-size:100%;
}

ul,
ol{
    padding-left:2em;
}

.xoxo{
    padding-left:0;
}

blockquote{
    padding:.5em 0 .5em 1em;
}


img{
    padding:1% 1% 1.5% 1%;
    margin: 0 1% 1% 1.5%;
    border:0;
}

pre {
    white-space: pre-wrap;
    width: 100%;
}

/*Header*/
#branding{
    padding:2% 4.5%;
    background-color:#8bbd83;
}

#blog-title{ 
    font-family: 'Orbitron', sans-serif;
    text-transform:lowercase;
    font-size:225%;
}

#blog-description{
    font-size:100%;
    font-family:"Arial",Helvetica, sans-serif;
    text-transform:none;
    font-weight:normal;
    padding:0;
}

/*adjust for the H1 switch in the headline*/

#headline h1{
    font-size:100%;
}

/*Access and Nav Bar*/
/*Make the nav ul into a horizontal navigation menu*/
#access {
    background-color:#f6f7ec;
    padding:2%;
    position:relative;
}

#main-skip-link, 
#side-skip-link{
    float:right;
}

.skip-link{
    font-size:70%;
}

.menu ul, 
.menu ul ul {
    display:inline;
    list-style: none;
    margin: 0;
    font-size:110%;
}

.menu li {
    display: inline;
}

#access a {
    display: inline-block;
    margin:0% 2%;
    padding: .5% 0%;
}

#navbar {
    border-bottom:5px solid #c4eebd;
}

/* For IE 7 to display above inline-block menu*/
#access a {
    zoom: 1;
    *display: inline;
}

#nav-social {
    width:400px;
    float:right;
    margin-bottom: -30%;
}

/*main section*/

#secondary{
    background-color:#c4eebd;
    padding:4%;
}

ul.xoxo{
    list-style: none;
}

#top-widget-area{
    background-color:#8bbd83;
}

#main{
    background-color:#f6f7ec;
    position:relative;
}

#content{
    padding:2% 4%;
}

.sticky h2 a{
    font-style:italic;
}

img.aligncenter {
}

.commentlist .bypostauthor {
    background-color: #CCCCCC;
}

/*hide the ribbons*/
.ribbon{
    display:none;
}

/*comments button*/

#comments-hide{
    display:none;
}
/*js file will reveal button when activated*/

#show-hide{

    position:absolute;
    right:0;
    border-style:none;	
    background-color:#c4eebd;
    display:block;
    font-size:120%;
    height:1.65em;
}

#comments-hide{
    background-color:#c4eebd;
    height:1.65em;
    font-size:120%;
    border:none;
}

/*Footer*/
#site-info{
    float:left;
}

#bottom{
    float:right;
}

footer{
    background-color:#8bbd83;
}

/*Clearing the Footer*/

#colophon:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
body{
    background-color:#19391b;
}

/*Desktop and Wide Screen  media queries:
  ----------------------------------------------------------------------------------------------------*/
@media only screen and (min-device-width :600px) {



    h1,
    h2,
    h3,
    h4{
	padding:1em 0 .5em 0;
    }

    /*Wrapper*/
    #wrapper{
	margin:3.17% 1.585%;
    }

    #wrapper {
	max-width: 2080px;
	min-width: 600px;
    }

    /*Branding and Header*/
    #branding{
	padding:2% 5%;
	position:relative;
    }

    #branding p{
	padding-left:0;
    }

    /*adjust for non-sized title*/
    #blog-title{
	font-size:400%;
    }

    #branding{
	text-shadow:#333333 1px 1px 5px;
    }

    #branding{
	z-index:2;
	-webkit-box-shadow: 2px 2px 5px #333; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow: 2px 2px 5px #333; /* FF3.5 - 3.6 */
	box-shadow: 2px 2px 5px #333; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
    }

    /*Ribbons*/
    /*Use a flexible image, the CSS3 method doesn't play well with liquid layouts*/
    .ribbon{
	display:block;
	padding:0;
	margin:0;
    }

    .l-ribbon-header{
	width:1.5%;
	height:28px;
	position:absolute;
	top:-1px;
	left:0;
    }

    .r-ribbon-header{
	width:1.5%;
	height:28px;
	position:absolute;
	top:-1px;
	right:0;
    }

    .l-ribbon-top{
	width:1.5%;
	height:28px;
	position:absolute;
	top:-1px;
	left:-1.5%;
    }

    .r-ribbon-top{
	width:1.5%;
	height:28px;
	position:absolute;
	top:-1px;
	right:-1.5%;
    }

    .l-ribbon-footer{
	width:1.5%;
	height:28px;
	position:absolute;
	top:-27px;
	left:0;
    }

    .r-ribbon-footer{
	width:1.5%;
	height:28px;
	position:absolute;
	top:-27px;
	right:0;
    }

    /*Access and Nav Bar*/
    #navbar{
	padding:0 1.5%;
	position:relative;
    }

    /*#access{
      padding-left:10%;
      }*/

    #nav-widget-area{
	display:inline;
	overflow:hidden;
    }

    #navbar {
	border-bottom: none;
    }

    /*Top Box*/

    /*top-widget-area Widget Area*/
    #top-widget-area{
	display:block;
	font-size:80%;
    }

    #top-widget-area{
	padding:2% 5%;
	position:relative;
	z-index:2;
	-webkit-box-shadow: 2px 2px 5px #333; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow: 2px 2px 5px #333; /* FF3.5 - 3.6 */
	box-shadow: 2px 2px 5px #333; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
    }

    /*Basic 2-column for top-left and top-right widget areas*/
    #top-left{
	width:48.75%;
	float:left;
	padding-right:1%;
	border-right:1px solid #808080;
    }

    #top-right{
	width:48.75%;
	float:right;
	padding-left:1%;
    }

    /*trying to fix the IE7 bug*/
    #top-widget-area{
	width:90%;
    }

    /*Basic 2-column again*/
    #left-top{
	width:50%;
	float:left;
    }

    #right-top{
	width:50%;
	float:right;
    }

    /*Clearing the floats*/
    #top-widget-area:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
    }

    #main:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
    }

    /*Main*/
    #main{
	margin:0 1.5%;
	position:relative;
	width:97%;
    }
    /*have to specify dimensions to avoid IE7 bug*/

    /*Basic 2-column for Main*/
    #content{
	width:52%;
	float:left;
	padding:5% 4%;
    }

    #secondary{
	display:block;
	width:24%;
	float:right;
	padding:5% 4%;
	margin-right:4%;
    }

    #secondary{
	-webkit-box-shadow: 2px 2px 5px #666; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow: 2px 2px 5px #666; /* FF3.5 - 3.6 */
	box-shadow: 2px 2px 5px #666; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
    }


    /*Footer*/
    footer{
	clear:both;
	padding: 2% 5.5%;
    }

    footer{
	position:relative;
	width:89%;
	z-index:4;
	-webkit-box-shadow: 2px 2px 5px #333; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow: 2px 2px 5px #333; /* FF3.5 - 3.6 */
	box-shadow: 2px 2px 5px #333; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
    }

/*end desktop and widescreen styles*/
}