/*This is the design12 for NickM style sheet for html5*/
/*This is the float left right version*/

body {
background-color: #f9f7f6;
color: #808000;
font-family: verdana, sans-serif;
font-size: 1em;
font-weight: 100;
margin: 0;
padding: 0;
border: 0;
}


#container {
margin:25px auto;
height: 566px;
width: 850px; 
border-radius: 5px;
}

/*For the galleries. The changes are far below at the media query*/
#gallerycontainer {
margin:25px auto;
height: 566px;
width: 850px; 
border-radius: 5px;
}


/*For those pages which are just text. The changes are below at the media query*/
#aboutreferencescontainer {width: 55%; font-size: 80%; margin: auto;} #aboutreferencescontainer img.floatLeft {width: 15%;} #aboutreferencescontainer #navbar {font-size: 170%; margin-left: -7px; margin-top: px;}





#content {
position: relative; top: -26px; left: 26px;
height: 514px;
width: 798px; 
border: 0px #f9f7f6 solid;
border-radius: 5px 5px 0px 0px;
}

#contentstretchy {
position: relative; top: -26px; left: 26px;
width: 798px; 
border: 0px #f9f7f6 solid;
border-radius: 5px 5px 0px 0px;
}

#bottom {
clear: both;
height: 19px;
}

/*This positions 'logo'*/
#logo {
margin-top: 12px;
margin-left: 140px;
}

#navbar {
/*Had to take out display inline to allow margintop to work*/
margin-top: 10px;
/*This sizes all the navbar, links included (but anchors can be subsequently reduced or increased by an anchor setting if you want a difference in size)*/
font-size: 125%;
/*This colours and bolds those words which are not anchors*/
color: #ef9c00;
font-weight: bold;
z-index: 2;
}

#indexbigpic {
float: left;
margin-top: 24px;
z-index: 1;
border-radius: 0px;
}

#indexcopy {
float: right;
width: 318px;
margin-right: 15px;
margin-top: 8px;
}

.boldintro {
font-size: 90%; font-weight: bold; 
}

.changed {
color: #808000;
}

.normalcopy {
font-size: 80%;
font-weight: bold; 
}

.listbold {
font-size: 85%; font-weight: bold; color: #808000;
}

#indexbox {
background-color: #999966; padding: 10px; font-size: 75%; font-weight: bold; color: #000000;
position: relative; bottom: 9px;
border-radius: 5px 5px 0px 0px;
}

.boxhead {
font-size: 200%; font-weight: normal; color: #ffffff;
}

#indexcaption {
position: absolute; top: 469px; left: 310px;
font-size: 65%; font-weight: 70; color: #ffffff;
z-index: 2;
}








/*Start of Gallery instructions*/

#gallerytable {
float: left;
margin-top: 47px;
margin-left: 16px;
width: 37%; 
z-index: 1;
}

#gallerybigpic {
float: right;
margin-top: 49px;
margin-right: 19px;
}

/*Have left this as absolute*/
#gallerycaption {
position: absolute; top: 430px; left: 19px;  right: 460px;
font-size:65%;
}

/*Have left this as absolute. (No longer in use)*/
.navbar2 {
position: absolute; top: 474px; left: 20px; font-size: 103%;
}









/*Start of References instructions*/

#referencesleft {
float: left; width: 345px; margin-top: 6px; margin-left: 16px;
}

#referencesright {
float: right; width: 345px; margin-top: 6px; margin-right: 16px;
}

.referencestext {
font-size:130%;
font-weight: bold;
/*The minus margin value moves the names closer to body*/
margin-bottom: -12px;
margin-left: 8px;
margin-right: 14px;
}

.referencesname {
font-size: 140%;
font-weight: bold;
margin-left: 15px;
margin-right: 14px;
color: #6c7374;
    
}
/*You could also move names closer with e.g. 0.1 line-height here/*







/*Start of About instructions*/

#abouttext {
font-size: 150%;
font-weight: bold;
margin-left: 8px;
margin-right: 14px;
}

.aboutcredit {
color: #6c7374;
font-size: 80%;
}









/*Start of Contact instructions*/

#callingcardcontainer {
width: 70%;
margin:25px auto;
padding-top: 19px;
padding-left: 19px;
padding-right: 19px;
padding-bottom: 59px;
background-color: #989898;
border-radius: 8px;
background-image: url(images/woodback.jpg); 
}

.callnick {
font-size: 210%;
    font-weight: bold;
color: #ffffff;
}

/*Changes to links on Contact*/
#callingcardcontainer a:link {
    font-size: 200%;
    color: #bdb76b;
}

#callingcardcontainer a:visited {
color: #bdb76b;
}

#callingcardcontainer a:hover {
color: #ef9c00;
}








/*Basic Anchor instructions*/

/*This colours the anchors and turns off the underline*/
a:link {color: #808000; text-decoration: none; font-weight: bold; font-size: 93%;}

/*This briefly colours the anchor background when clicked on*/
a:active {background-color: #3cc7f0; }

/*This is the color & style of a visited link, (NOTE hover instruction needs to FOLLOW this one so that visited links hover also)*/
a:visited {color: #808000; text-decoration: none; }

/*This colours the anchors when the user hovers*/
a:hover {color: #ef9c00;}






 



/*This is settings for floating drop pics*/
img.floatLeft {     
    float: left;     
    margin-right: 11px; width:24%;}




/*From here is for mobile changes*/

/*NOTE I did the media query changes for the opening page by making 2 containers which appear and or disappear (container and portraitcontainer). This was for design reasons (this being an update of a magazine style design) And because it was less fiddly. However for the galleries I made just one container with fiddly specified detail changes (gallerycontainer). And I also did a single container for those pages which are only text (aboutreferencescontainer). Single container is best. And for the future, even if you are using the replacing components method (as you have here on index) you really only need one container and only one query. You really don't need different containers per page if everything (including images) has a class or ID (as they ought). You would give a secondary class instruction (in the html) to instances where e.g. copy needed modifications on a particular page. And ID items can also be modified with an extra class. In future you will hopefully only have a Landscape query and will begin by designing for phone first. Sort yourself out please. But you are forgiven in this instance as this has been a modification of a very old site which was designed in the landscape view to be magaziney and you didn't want to lose that as it looks elegant and you also didn't want to have to rebuild all of that. So very good job. thanks*/

/*Query A For PORTRAIT*/
@media only screen and (max-width: 600px)
/*For index page*/
{#container {display: none; } #portraitcontainer {display: block; }    
/*For Galleries*/
#gallerycontainer {height: 100%; width: 100%;}
#gallerycontainer #content {height: 100%; width: 100%;}
#gallerycontainer #logo {
display: none;}
#gallerycontainer #content #navbar {
display: block;
float: left;
width: 100%;
margin-left:0px;
font-size: 120%;}
#gallerycontainer #content #navbar img {
width: 8px;}
#gallerycontainer #content #gallerytable {
display: block;
float: left;
width: 100%;
margin-top: 10px;
margin-left:0;
z-index: 1;}
#gallerycontainer #content #gallerytable img {
height: 50px; 
width: 54px;}
#gallerycontainer #content #gallerybigpic {
display: block;
float: left;
height: 95%;
width: 95%;
margin-top: 15px;
margin-right: 19px;} 
#gallerycontainer #gallerycaption {
display: none;}
/*For contact page*/   
#callingcardcontainer {width: 100%; margin: 8px; background-image: url(images/woodback2.jpg);}   
#callingcardcontainer a:link {
font-size: 160%;}
.callnick {
font-size: 160%;}
/*For About and Reference*/
#aboutreferencescontainer {width: 100%;}
#aboutreferencescontainer #navbar {margin-left: -6px; font-size: 160%;}
/*End of PORTRAIT query*/    
}
    
   

/*Query B For LANDSCAPE*/
@media only screen and (min-width: 600px)
/*For index page*/
{#container {display: block;} #portraitcontainer {display: none; }  
/*End of LANDSCAPE query*/    
}


/*Portrait stuff for index page*/

#portraitcontainer {
margin-left: 15px;
margin-top: 15px;
}

#portraitlogo {
width: 100%;
}

#indexportraitpic {
width: 94%;
}

.portraitboldintro {
font-size: 126%; font-weight: bold; color: #808000; margin-right: 15px; 
}

#portraitnavbar {
margin-top: 10px;
font-size: 130%;
/*This colours and bolds those words which are not anchors*/
color: #ef9c00;
font-weight: bold;
z-index: 2;
}

/*End of portrait stuff*/