/* styles for Ellen Smith's Portfolio 2014 */

/* mobile first - the styles below are optimized for the smallest screens 1st*/
/* set HTML5 semantic tags as block elements */
header, hgroup, nav, section, article, footer, aside {
	display:block;
}

/* start the same on all browsers */
* {
	margin:0;
	padding:0;
}

body {
    color:#666;     /* text color - dark grey */
	font-size:.8em;  /* was 1 */
	font-family: verdana, sans-serif;
	/* line-height: 1.5; */
}

/* link styles */
a:link{
	/* color:white; */
	text-decoration: none;
}
a:visited {
	color:purple;
}
a:hover {
	text-decoration: underline;
}
a:active {
    color: red;
}

#container {
    margin:0 auto; 
}

/* header styles */
header img {
    width:100px;
	height:auto;
    padding-left:2%; /* 1-23-14 */
}

header nav {
	background-color:#777;
    margin-bottom: 5px;
    /* height:160px; */
	-o-border-radius:5px;
    -moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
    /* max-width: 520px; */
    /* align-self:center; */
    /* display:inline;  no need to stack this menu */
    width:100%;
    float:left;  /* 1/19 */
}
header nav ul {
    margin:0 auto;
	list-style-type: none;
}

header nav li {
    font-size: .6em;
    text-align:center;
    /* threw off spacing border-right: 1px solid #000; */
}

header nav a {
	color:#fff;
	 padding:9px 15px;
	height:22px; 
    /* padding 10px 15px;
    height:20px; */
    display:block;
}
header nav a:visited {
	color:#fff; /* white */
}
header nav a:hover {
	background-color:#fc6;
	color:#333;
	text-decoration: none;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
header nav a:active {
	/* background-color:yellow; */
	color:#333;
	text-decoration: none;
	-o-border-radius:5px;
    -moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
nav .active{
	background-color:purple;    
    text-decoration: none;
	-o-border-radius:5px;
    -moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

/* main content styles */
p .projectName{
    text-align:center;
}

/* remove project details from small screens*/
/* article .details{       
    display:none;
}   */


article li{
    margin-left:25px;
}
section {	
    clear:right;  /* clear navigation float right so content stays below nav */
    float:none;
    width:100%;
    /* border:solid red;   for testing */
    /* max-width: 520px; */
}

section h2{
    padding-left: 2%;
    margin-top: 60px;
    margin-bottom: -10px;
}

section article {
	/* background-color:#eae9e6;  was #eae9e6 */
	padding:1% 2%;
	margin:2% 0;
    /* border:solid green;  for testing */
	-o-border-radius:5px;
    -moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

.moreLink a{
    padding-left:10px;
}

.taskSummary{
    padding-top: 10px;
}

/* slide show styles */
#ssHolder{
    /* float:right; */
    width:100%;  
    /* max-width:400px;   keep images small enough so there's room for text 
    height: 250px; */
    max-width:41.66666666666667%;   /* 400/960=41.6666 2/5 keep images small enough so there's room for text */
    /* 2/5 height: 30%; */
    margin: 0 15px 5px 1px;
    
    /* border: solid  2px #666;  */
    -o-border-radius:5px;
    -moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
     /* position: relative; */
}
			
/* #ssHolder img{
    position: absolute;
    left: 0;
    top: 0;
} */

.nextLink{
    padding:1px 0 0 2%;
    clear:both;
}

aside {
    width:100%;
    max-width: 520px;
    padding:1% 2%;
	margin:2% 0;
    /* margin:0 0 3%; */
 
	/* background-color:#eae9e6; */
    -o-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

.photoLinks img{
    max-width:100px;
    margin: 10px 0 10px 0;
    -o-border-radius:5px;
    -moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
    display:inline;
} 

.photoLinks li{
    list-style-type: none;   
    /* border:solid purple;   for testing */
}

.photoLinks a{
    color:#666;
    /* margin: 15px; */
    line-height: 25px;  /* make enough room for fingers to click links */  
}
.socMediaIcon img{
    height:25px;
    width:25px;
    margin:8px 1px -8px 1px;
}

/* round corners on images too */
section img, aside img{
    /* margin:1%; */
   /*  margin: 5px 0 5px 0; */
     margin: 5px 0 10px 0; 
    border: solid  2px #666;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    width:100%;
    
}

.noIndent{
   margin-left:-26px;
   list-style-position: outside;
   list-style-image: none;
 }
 
.smallPic{
    width:25%;
    margin-left: 20px;
 
}

.card img{
    max-width: 250px;
    margin:20px 0 0 0;
    /* 2/5 margin: 30px 0 0 35px;*/
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;    
}

aside:nth-child(odd) {
    margin-left:1 .0;
}
aside:nth-child(even){
    margin-left:1.0%;
}

footer {
	clear:both;
	background-color:#777;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	padding:1% 2%;
	/* 2/5 margin:4% 0; */
    margin-top: 10px;
	color:#fff;
	font-size:.7em;	
    text-align:center;
}
footer a{           /* keep all footer text white -even links */
	color:#fff;
}

/* iPhone portriat */
/* menu and spans across page */
@media all and (min-width:250px){
	#container {
	   /* width:70%*/
	}

	header img {
		width:150px;
        /* max-width: 400px; */
        height:auto;
        display:block;
    }
    
	header nav {
        display:inline-block;
        /* height:40px; */
        width:100%;
	}
    
	header nav ul {
		margin:0 1%;
	}
    
	header nav li {
	    float:left; 
        text-align: center;
       /* font-size:11px; */
        font-size: .75em;
        /* padding:0 30px 0 30px; */
        width:33.33%; /* width of each item */
	}
    section img{
       max-width: 500px; 
    }
    section p{
       max-width: 500px; 
    }
}

/* iPhone landscape and wider */
/* menu and spans across page */
@media all and (min-width:350px){
    header nav {
        display:inline-block;
        height:40px;
        width:100%;
	}
    
    header nav li {
        font-size: .7em;
	}  
    
    /* slide show styles */
    #ssHolder{
        /* float:right; */
        width:100%;  /* keep images small enough so there's room for text */
        /* 2/5 max-width:400px;
        height: 330px; */
        max-width:90%;
        /* height: 33%; */
    }
}
        
/* wider */
/* switch from one column to 2 column layout*/
@media all and (min-width:850px){
        
    /* main content styles */    
	article{
       width:46%;  /* was 40 */
       /* too tall - height:450px;  /* control height so floats work as planned */
        /* 2/5 height:425px; */
         height:45%;
       /* max-width: 520px; */
	  float:left; 
      /* border: solid; */
	}

    
    /* keep the navigation from getting too wide on the larger windows  
    header nav{     
        max-width:500px;
    } */
    header nav li {
        font-size: .85em;
	} 
        
    section img{
        /* width:90%; 
    }

    
    article .summary h5{
        margin-top: -30px; 
    }
    
    
    /* add long description now that there is more room on the page */
    article .details{
        /* display:inline; */
        display:inline-block; 
        float: left;
        margin: 20px;
        /* padding-top: 18px; */
    }
    
    h5{
        padding-top: 18px;
        margin: 10px;
    }
    
    /* slide show styles */
    #ssHolder{
        /* float:right; */
        width:90%;  /* keep images small enough so there's room for text */
        /* 2/5  max-width:500px;
        height: 300px; */
        max-width:52.08333333333333%;    /* 500/960 =  52.083333333 12 3's% */
        height: 31.25%;  /* 300/960 =31.25% */
        margin: 0 15px 0 1px;
        /* 2/5 position: relative; */
    }
	
	aside {
       float:left;  /*  eas */
       width:40%;
       max-width:400px;
	   /* float:left; */
	   margin:1.5% 0 0 1%;
	   padding:1% 1.5%;
	}
        
    footer{
        font-size:.8em;
    }
}

/* wider */
/* keep the contect together on the widest pages */

@media all and (min-width:850px){
    #container {
        margin:0 auto; 
        width:90%; /* 2/5 86%;  /* was 90 */
        max-width:900px;  /* 2/5 800px; */
    }
     section img{
        width:100%;    80 or 90 */
        max-width:700px;  /* 600 works */
    }
    footer{
        font-size:.9em;
    }
}
    
/* super wide */
/* keep the content together on the widest pages */
@media all and (min-width:1250px){
    #container {
        margin:0 auto; 
        width:90%; /* 75%;   was 90 */
        max-width:1000px;  /* 2/5 700px; */
    } 
     section img{
        width:100%;   /* 80 or 90 */
        max-width:600px;  /* 600 works */
    }
    footer{
        font-size:.9em;
    }
}