/* CSS3 Document */
/*Containers sizes and colours are for identification of design issues */
/*Do not use black hat SEO ie hidden text, see last section , just make text black.*/
/* Sets background color, background image, the site's font family and body text color */

* {
    box-sizing: border-box;
}

body {
    background-color:rgb(0,0,0);
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	color:rgb(100,100,100);
}



#titlebox {
	width:auto;
	height:68px;
	margin:auto;
	/*border:1px solid green;*/
	/*background-color:red;*/
}
/*margin 5px sets spacing, top and bottom around logo wrapper*/

/*---------------END LOGO-------------*/

/*---------------START AUTHOR-------------*/
/* Creates a centered author box */
#subtitlebox {
	width:auto;
	height:28px;
	/*margin:auto; seems useless?*/
	/*border:1px solid blue;*/
	/*background-color:blue;*/
}
/*---------------END AUTHOR-------------*/

/*----BEGIN NAVIGATION BUTTONS--------*/
/*---a.btn00 BLANK BUTTON HEIGHTS TO ZERO TO HIDE ACTIVE ROLLOVER----*/
/* Reference a.btn00 {display:block;background:url(./btn/blank.png);width:70px;height:0px;}*/
a.btn00 {display:block;background:url(blank.png);width:70px;height:0px;}

a.btn01 {display:block;background:url(icon/about.png);display:block;margin-left:auto;margin-right:auto;width:70px;height:30px;}
a.btn01:hover {background-position:0 -30px;}
a.btn01:active {background-position:0 -60px;}

a.btn02 {display:block;background:url(workshops.png);display:block;margin-left:auto;margin-right:auto;width:70px;height:30px;}
a.btn02:hover {background-position:0 -30px;}
a.btn02:active {background-position:0 -60px;}

a.btn03 {display:block;background:url(articles.png);display:block;margin-left:auto;margin-right:auto;width:70px;height:30px;}
a.btn03:hover {background-position:0 -30px;}
a.btn03:active {background-position:0 -60px;}

a.btn04 {display:block;background:url(prev.png);display:block;margin-left:auto;margin-right:auto;width:70px;height:30px;}
a.btn04:hover {background-position:0 -30px;}
a.btn04:active {background-position:0 -60px;}

a.btn05 {display:block;background:url(icon/home.png);display:block;margin-left:auto;margin-right:auto;width:70px;height:30px;}
a.btn05:hover {background-position:0 -30px;}
a.btn05:active {background-position:0 -60px;}

a.btn06 {display:block;background:url(next.png);display:block;margin-left:auto;margin-right:auto;width:70px;height:30px;}
a.btn06:hover {background-position:0 -30px;}
a.btn06:active {background-position:0 -60px;}

a.btn07 {display:block;background:url(prints.png);display:block;margin-left:auto;margin-right:auto;width:70px;height:30px;}
a.btn07:hover {background-position:0 -30px;}
a.btn07:active {background-position:0 -60px;}

a.btn08 {display:block;background:url(equipment.png);display:block;margin-left:auto;margin-right:auto;width:70px;height:30px;}
a.btn08:hover {background-position:0 -30px;}
a.btn08:active {background-position:0 -60px;}

a.btn09 {display:block;background:url(icon/contact.png);display:block;margin-left:auto;margin-right:auto;width:70px;height:30px;}
a.btn09:hover {background-position:0 -30px;}
a.btn09:active {background-position:0 -60px;}

a.btn10 {display:block;background:url(end.png);display:block;margin-left:auto;margin-right:auto;width:70px;height:30px;}
a.btn10:hover {background-position:0 -30px;}
a.btn10:active {background-position:0 -60px;}
/*----END NAVIGATION BUTTONS--------*/


/*----BEGIN GALLERY ICONS--------*/
/* this block show maximum icon dimensions are portrait 240x366px (ideally WxH 240x360 for 4:5 ratio). Adding 10px spacing, 3 icons = 750px wide, the reduced screen limit is 768px wide*/
a.gal0 {display:block;background:url(gal0.png);display:block;margin-left:auto;margin-right:auto;width:225px;height:340px;}
a.gal00 {display:block;background:url(icon/gal00.png);display:block;margin-left:auto;margin-right:auto;width:240px;height:360px;}
a.gal01 {display:block;background:url(gal01.png);display:block;margin-left:auto;margin-right:auto;width:180px;height:275px;}
a.gal02 {display:block;background:url(gal02.png);display:block;margin-left:auto;margin-right:auto;width:180px;height:275px;}
a.gal03 {display:block;background:url(gal03.png);display:block;margin-left:auto;margin-right:auto;width:180px;height:275px;}
a.gal04 {display:block;background:url(gal04.png);display:block;margin-left:auto;margin-right:auto;width:400px;height:600px;}
a.gal05 {display:block;background:url(gal05.png);display:block;margin-left:auto;margin-right:auto;width:300px;height:450px;}

/*----END GALLERY ICONS--------*/

/*----BEGIN PORTFOLIO ICONS--------*/
/* this block show maximum icon dimensions are landscape 240x160px (for 4:5 ratio). Adding 10px spacing, 3 icons = 750px wide, the reduced screen limit is 768px wide*/
a.thmb0 {display:block;background:url(thmb0.png);display:block;margin-left:auto;margin-right:auto;width:400px;height:400px;}
a.thmb00 {display:block;background:url(thmb/thmb00.png);display:block;margin-left:auto;margin-right:auto;width:240px;height:240px;}
a.thmb000 {display:block;background:url(thmb000.png);display:block;margin-left:auto;margin-right:auto;width:225px;height:225px;}
a.thmb01 {display:block;background:url(thmb01.png);display:block;margin-left:auto;margin-right:auto;width:225px;height:150px;}
a.thmb02 {display:block;background:url(thmb01.png);display:block;margin-left:auto;margin-right:auto;width:225px;height:150px;}
a.thmb03 {display:block;background:url(thmb01.png);display:block;margin-left:auto;margin-right:auto;width:225px;height:150px;}
a.thmb04 {display:block;background:url(thmb01.png);display:block;margin-left:auto;margin-right:auto;width:225px;height:150px;}
a.thmb05 {display:block;background:url(thmb01.png);display:block;margin-left:auto;margin-right:auto;width:225px;height:150px;}
a.thmb06 {display:block;background:url(thmb01.png);display:block;margin-left:auto;margin-right:auto;width:225px;height:150px;}
a.thmb07 {display:block;background:url(thmb01.png);display:block;margin-left:auto;margin-right:auto;width:225px;height:150px;}
a.thmb08 {display:block;background:url(thmb01.png);display:block;margin-left:auto;margin-right:auto;width:225px;height:150px;}
a.thmb09 {display:block;background:url(thmb01.png);display:block;margin-left:auto;margin-right:auto;width:225px;height:150px;}
a.thmb10 {display:block;background:url(thmb/thmb600x400.png);display:block;margin-left:auto;margin-right:auto;width:240px;height:240px;}
a.thmb11 {display:block;background:url(thmb/thmb1024x768.png);display:block;margin-left:auto;margin-right:auto;width:240px;height:240px;}
a.thmb12 {display:block;background:url(thmb/thmb400x600.png);display:block;margin-left:auto;margin-right:auto;width:240px;height:240px;}
a.thmb13 {display:block;background:url(thmb/thmb768x1024.png);display:block;margin-left:auto;margin-right:auto;width:240px;height:240px;}
a.thmb15 {display:block;background:url(thmb/thmbpano.png);display:block;margin-left:auto;margin-right:auto;width:240px;height:240px;}
a.thmb16 {display:block;background:url(thmb/thmb600x400imageguard.png);display:block;margin-left:auto;margin-right:auto;width:240px;height:240px;}
/*----END PORTFOLIO ICONS--------*/

/*center an image*/
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*.img-container {
    float: left;
    width: 33.33%;*/
    /*max-width:0px;*/
	/*padding: 5px;
}*/

/*---------------START ABOUT WEBSITE -------------*/
/*Start of revision copy*/
/* Creates the content container */

/*#aboutbox {
	width:960px;
	height:700px; /*height changed Mar2014*/
	/*margin:auto;
	border:1px solid #808080;
}*/

/* Creates the content area floated to the left of the wrapper */

#about {
	width:400px;
	height:auto;
	/*float:left;*/
	margin:5px;
	font-family:Arial; /*font family and size added Mar2014*/
	font-size: 16px;
}

#about p {color:#FFFFFF}

#about a {
	color:#FF0000;
	text-decoration:none;
outline:none; 
}

#about a:hover {
	color:#FFFF00;
	text-decoration:underline;
}

/* Creates the picture container, which can fit images up to 490px in width */

/*#picturebox {
	width:500px;
	height:auto;
	float:right;
	margin-right:20px;
	margin-top:10px;
}*/

/* Creates a picture class, floats it right within container and can be stacked vertically */

/*.picture {
	float:left;
	padding: 0px 0px 0px 0px;
	border:5px outset #808080;
}*/

/*display block, margin left & right are to center the image. Padding 10px
adds a 0px space around image within container*/
/*End of revision copy*/

/*------------------END ABOUT WEBSITE--------------------------*/

/*---------------START PICTURE-------------*/
/* Creates the picture container, which can fit images up to 490px in width */
#pictureboxh {
	width:900px;
	height:480px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px; /*moved img down and aligned with transbox*/
	/*border:1px solid yellow;*/
}

p.title {
	font-size:16px;
	text-align:center;
	color:#C0C0C0;
	margin-top:10px;
	/*border:1px solid yellow;*/
	/*background-color:solid yellow;*/
}

p.about {
	font-size:16px;
	text-align:left;
	color:#C0C0C0;
	margin-top:10px;
	/*border:1px solid yellow;*/
	/*background-color:solid yellow;*/
}

p.copyright {
	text-align:center;
	color:#606060;
	margin-top:10px;
}

p.copyright a{
	color:#C0C0C0;
	text-decoration:none	
}

p.copyright a:hover {
	color:#FF0000;
	text-decoration:none;
}

div.background {
 	width:600px;
	height:400px;
	margin:auto;
	/*background:url(http://www.beyondvisible.com/bv/imageguard.php?image=1w.jpg) repeat;*/
	background:url(http://www.shaneelen.com/shane/se/imageguard.php?image=1w.jpg) repeat;
	/* when shaneelen.com becomes primary domain will have to modify line above*/
	border:1px solid #181818;
}

div.transbox2h {
	width:600px;
	height:400px;
	margin:0px 0px;
	background-color:none;
	border:1px solid #000000;
	opacity:0.0;
	filter:alpha(opacity=0); /* For IE8 and earlier */
}

div.transbox2h p {
/*margin:60px 40px;*/
/*margin:100px 40px 0px 40px;*/
	margin:0px;
	text-align:center;
	font-size:30px;
	font-weight:bold;
	color:black;
}

div.transbox2h:hover {
	width:600px;
	height:400px;
	margin:0px 0px;
	background-color:none;
	border:1px solid #000000;
	opacity:0.1;
	filter:alpha(opacity=10); /* For IE8 and earlier */
}

/*---------------END PICTURE-------------*/



/*---------------START IMAGE-------------*/
div.galleryimg img {
    width: 100%;
    height: auto;
	max-width: 1024px; /*defines max width image can be displayed at*/
}


div.galleryimg1024 img {
    width: 100%;
    height: auto;
	max-width: 1024px; /*defines max width image can be displayed at*/

}

div.galleryimg768 img {
    width: 100%;
    height: auto;
	max-width: 768px; /*defines max width image can be displayed at*/

}

div.galleryimg600 img {
    width: 100%;
    height: auto;
	max-width: 600px; /*defines max width image can be displayed at*/

}

div.galleryimg400 img {
    width: 100%;
    height: auto;
	max-width: 400px; /*defines max width image can be displayed at*/

}

div.galleryport img {
    width: 100%;
    height: auto;
	max-width: 350px; /*defines max width image can be displayed at; was 350px*/
}

div.galleryport1 img {
    width: 100%;
    height: auto;
	max-width: 300px; /*defines max width image can be displayed at; was 350px*; USE 30PX COLUMN PADDING with 400px width*/
}

div.gallerypano img {
    width: 100%;
    height: auto;
	max-width: 1680px; /*defines max width image can be displayed at, if screen is smaller then image contracts to fit page*/
}

/*---------------END PICTURE-------------*/

/*---------------START COLUMN -------------*/

/* Create three equal columns in the first row that floats next to each other */
.column1 {
    float: left;
    width: 33.3%;
    padding: 5px; /*was 5px*/
	/*background-color:pink;*/
}
.column2 {
    float: left;
    width: 33.3%;
    padding: 5px;/*was 5px*/
	/*background-color:green;*/
}
.column3 {
    float: left;
    width: 33.3%;
    padding: 5px;/*was 5px*/
	/*background-color:orange;*/
}	

/*
.columnl {
    float: left;
    width: 33.3%;
    padding: 5px;
	background-color:pink;
}
.columnm {
    float: left;
    width: 33.3%;
    padding: 5px;
	background-color:green;
}
.columnn {
    float: left;
    width: 33.3%;
    padding: 5px;
	background-color:orange;
}*/

/* Creates a single column for scalable image*/
.column {
    float: left;
    width: 100%;
    padding: 5px;
	/*background-color:yellow;*/
}

/*Sets button spread to full width of each column*/

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/*---------------END COLUMN-------------*/

/*---------------START TABLE-------------*/

table {
    width: 100%;
	}

table, th {
	vertical-align:top;
}

/*---------------END TABLE-------------*/

/*--------------START FOOTER-------------*/
/* Style the footer */

.footer {
    background-color: rgb(0,0,0);
    width:auto;
	padding: 10px;
    text-align: center;
	/*background-color:purple;*/
}

/*---------------END FOOTER---------------*/

/*---------------RESONSIVE LAYOUT-------------*/
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other.
First breakpoint is smaller than or equal to 768px  for smart phones
Second is larger than 768px for small devices and tablets
Third is larger than 992px for medium devices
Fourth is larger than 1200px for largedevices
*/
@media (max-width: 768px) {
	.column1 {
        width: 100%;
    }
	.column2 {
        width: 100%;
    }
	.column3 {
        width: 100%;
    }
}
/*---------------END RESPONSIVE LAYOUT-------------*/