/*  newsStyle.css - for pages with newspapers style columns
	chris craig, 10315 markup language assignment
	October, 2014 */

/* body element css */	
body {
	background-color:#ede1ca; 
}

/* text properties nb font stuff in font.css or iefont.css */
p	{
		font-size:16pt;
}

.txt > ul {
		font-size:16pt;
}

.fright {
	float:right;
}

.fleft {
	float:left;
}

.header {
	text-align:center;
	font-size: 150%;
	line-height:150%;
	font-weight:bolder;
	text-align:center;
	border-top: 15px groove #a4dcc3;
	border-bottom: 15px groove #a4dcc3;
	margin:0;
}



.content {
	float:left;
	width:48%;
	min-width:480px;
	padding: 10px;
}

.fig{
	float:left;
	margin-right:15px;
}


.mag-ad {
	width:400px;
	font-size:16pt;
	font-weight:bold;
	font-variant: small-caps;
	text-align:center;
	padding-left:10px;
	padding-right:10px;
	border:3px ridge  #1b5aa7;
	background-color:#8adbee;
	margin-left:auto;
	margin-right:auto;
}

.mag-ad2 {
	font-size:16pt;
	font-weight:bold;
	font-variant: small-caps;
	text-align:center;
	padding-left:10px;
	padding-right:10px;
	border:3px dashed  #005000;
	background-color:#a4dcc3;
}


#liveCam {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:427px;
	height:255px;
	border-image: url('../images/border.png') 40 40 40 40 round round; 
	border-style: solid;	
	border-width: 40px; 
	overflow:hidden;
	z-index:10;
	background-color:#000;
	z-index:10;
}


.txt {
	position:relative;
	width:685px;
	line-height:26pt;
	margin-left:auto;
	margin-right:auto;
	
}

#cent {
	text-align:center;
}

.center {
	margin-left:auto;
	margin-right:auto;
}

#map {
	position:relative;
	width:800px;
	margin-left:auto;
	margin-right:auto;
}

#curt-l {
	position:absolute;
	top:0;
	left:-215px;
	width:214px;
	height:255px;
	z-index:9;
	background-image: url('../images/curt-left.png');
  -webkit-animation: left 20s ease 0s 1 forwards;
     -moz-animation: left 20s ease 0s 1 forwards;
          animation: left 20s ease 0s 1 forwards;	
}

#curt-r {
	position:absolute;
	top:0;
	right:-215px;
	width:213px;
	height:255px;
	z-index:9;
	background-image: url('../images/curt-right.png');
  -webkit-animation: right 20s ease 0s 1 forwards;
     -moz-animation: right 20s ease 0s 1 forwards;
          animation: right 20s ease 0s 1 forwards;		
}

#announcement {
	position:absolute;
	top:80px;
	left:0;
	text-align:center;
	width:427px;
	z-index:11;
	opacity:1;

}

#ant { /* animation for h2 text announcing forum cam*/
 -webkit-animation: f-in 20s ease 0s 1 forwards;
     -moz-animation: f-in 20s ease 0s 1 forwards;
          animation: f-in 20s ease 0s 1 forwards;		
}

	/* keyframes for announcement text*/
@-webkit-keyframes f-in { 
	0%   	{opacity:0;}
	8%		{opactiy:1;}
	21%		{opacity:1;}
	35%		{opacity:0;}
	100% 	{opacity:0;}
}
   @-moz-keyframes f-in { 
	0%   	{opacity:0;}
	15%		{opactiy:1;}
	35		{opacity:0;}
	100% 	{opacity:0;}
}
        @keyframes f-in { 
	0%   	{opacity:0;}
	15%		{opactiy:1;}
	35%	{opacity:0;}
	100% 	{opacity:0;}
}

#fc-1 {
	position:absolute;
	top:0;
	left:0;
	z-index:5;
	opacity:0;
-webkit-animation: swp 30s ease 8s infinite forwards;
     -moz-animation: swp 30s ease 8s infinite forwards;
          animation: swp 30s ease 8s infinite forwards;		
}  

#fc-2 {
	position:absolute;
	top:0;
	left:0;
	z-index:5;
	opacity:0;
-webkit-animation: swp2 30s ease 8s infinite forwards;
     -moz-animation: swp2 30s ease 8s infinite forwards;
          animation: swp2 30s ease 8s infinite forwards;		
}  

#fc-3 {
	position:absolute;
	top:0;
	left:0;
	z-index:5;
	opacity:0;
-webkit-animation: swp3 30s ease 8s infinite forwards;
     -moz-animation: swp3 30s ease 8s infinite forwards;
          animation: swp3 30s ease 8s infinite forwards;		
}  

/* keyframes for pic 1 fade  */
@-webkit-keyframes swp { 
	0%   	{opacity:0;}
	6%		{opacity:1;}
	30%		{opacity:1;}
	33%		{opacity:0;}	
	100% 	{opacity:0;}
}
   @-moz-keyframes swp { 
	0%   	{opacity:0;}
	3%		{opacity:1;}
	30%		{opacity:1;}
	33%		{opacity:0;}	
	100% 	{opacity:0;}
}
        @keyframes swp { 
	0%   	{opacity:0;}
	3%		{opacity:1;}
	30%		{opacity:1;}
	33%		{opacity:0;}	
	100% 	{opacity:0;}
}	

/* keyframes for pic 2 fade  */
@-webkit-keyframes swp2 { 
	0%   	{opacity:0;}
	33%		{opacity:0;}
	36%		{opacity:1;}
	63%		{opacity:1;}
	66%		{opacity:0;}	
	100% 	{opacity:0;}
}
   @-moz-keyframes swp2 { 
	0%   	{opacity:0;}
	33%		{opacity:0;}
	36%		{opacity:1;}
	63%		{opacity:1;}
	66%		{opacity:0;}	
	100% 	{opacity:0;}
}
        @keyframes swp2 { 
	0%   	{opacity:0;}
	33%		{opacity:0;}
	36%		{opacity:1;}
	63%		{opacity:1;}
	66%		{opacity:0;}	
	100% 	{opacity:0;}
}	

/* keyframes for pic 3 fade  */
@-webkit-keyframes swp3 { 
	0%   	{opacity:0;}
	66%		{opacity:0;}
	69%		{opacity:1;}
	96%		{opacity:1;}
	99%		{opacity:0;}	
	100% 	{opacity:0;}
}
   @-moz-keyframes swp3 { 
	0%   	{opacity:0;}
	66%		{opacity:0;}
	69%		{opacity:1;}
	96%		{opacity:1;}
	99%		{opacity:0;}	
	100% 	{opacity:0;}
}
        @keyframes swp3 { 
	0%   	{opacity:0;}
	66%		{opacity:0;}
	69%		{opacity:1;}
	96%		{opacity:1;}
	99%		{opacity:0;}	
	100% 	{opacity:0;}
}	

/* keyframes for left curtain */
@-webkit-keyframes left { 
	0%   	{left:0px;}
	30%		{left:0px;}
	100% 	{left:-215px}
}
   @-moz-keyframes left { 
	0%   	{left:0px;}
	30%		{left:0px;}
	100% 	{left:-215px}
}
        @keyframes left { 
	0%   	{left:0px;}
	30%		{left:0px;}
	100% 	{left:-215px}
}

/* keyframes for left curtain */
@-webkit-keyframes right { 
	0%   	{right:0px;}
	30%		{right:0px; }
	100% 	{right:-215px}
}
   @-moz-keyframes right { 
	0%   	{right:0px;}
	30%		{right:0px; }
	100% 	{right:-215px}
}
        @keyframes right { 
	0%   	{right:0px;}
	30%		{right:0px; }
	100% 	{right:-215px}
}