﻿/***** CSS Reset *****/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/***** Screen 960px *****/

.row	{margin: 20px auto; padding: 5px 0; width:	960px	; overflow: hidden;}								
.row .row	{margin: 0	-10px	0	-10px	; width: auto; display: inline-block;}							
												
.grid1	{width:	60px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid2	{width:	140px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid3	{width:	220px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid4	{width:	300px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid5	{width:	380px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid6	{width:	460px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid6c	{width:	458px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}
.grid7	{width:	540px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}
.grid7c	{width:	538px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid8	{width:	620px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid9	{width:	700px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid10	{width:	780px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid11	{width:	860px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid12	{width:	940px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
												
.offgrid1	{margin-left:	85px	; }									
.offgrid2	{margin-left:	165px	; }									
.offgrid3	{margin-left:	245px	; }									
.offgrid4	{margin-left:	325px	; }									
.offgrid5	{margin-left:	405px	; }									
.offgrid6	{margin-left:	485px	; }									
.offgrid7	{margin-left:	565px	; }									
.offgrid8	{margin-left:	645px	; }									
.offgrid9	{margin-left:	725px	; }									
.offgrid10	{margin-left:	805px	; }									
.offgrid11	{margin-left:	885px	; }									
.offgrid12	{margin-left:	965px	; }									

/***** Screen Bigger than 960px *****/
@media only screen and (min-width:1200px) {
.row	{margin: 20px	auto; width:	1200px	; overflow: hidden;}							
.row .row	{margin: 0	-10px	0	-10px	; width: auto; display: inline-block;}						
											
.grid1	{width:	80px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}	
.grid2	{width:	180px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}	
.grid3	{width:	280px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}	
.grid4	{width:	380px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}	
.grid5	{width:	480px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}	
.grid6	{width:	580px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}	
.grid6c	{width:	578px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}
.grid7	{width:	680px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}
.grid7c	{width:	678px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid8	{width:	780px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}	
.grid9	{width:	880px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}	
.grid10	{width:	980px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}	
.grid11	{width:	1080px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}	
.grid12	{width:	1180px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}	
											
.offgrid1	{margin-left:	105px	; }								
.offgrid2	{margin-left:	205px	; }								
.offgrid3	{margin-left:	305px	; }								
.offgrid4	{margin-left:	405px	; }								
.offgrid5	{margin-left:	505px	; }								
.offgrid6	{margin-left:	605px	; }								
.offgrid7	{margin-left:	705px	; }								
.offgrid8	{margin-left:	805px	; }								
.offgrid9	{margin-left:	905px	; }								
.offgrid10	{margin-left:	1005px	; }								
.offgrid11	{margin-left:	1105px	; }								
.offgrid12	{margin-left:	1205px	; }								
}

/***** Tablet (Smaller than 959px) *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.row	{margin: 20px	auto; width:	768px	; overflow: hidden;}								
.row .row	{margin: 0	-10px	0	-10px	; width: auto; display: inline-block;}							
												
.grid1	{width:	44px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid2	{width:	108px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid3	{width:	172px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid4	{width:	236px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid5	{width:	300px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid6	{width:	364px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid6c	{width:	362px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid7	{width:	428px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}
.grid7c	{width:	426px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid8	{width:	492px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid9	{width:	556px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid10	{width:	620px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid11	{width:	684px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
.grid12	{width:	748px	; margin:	1px	5px	1px	5px	;padding:	5px	; overflow: hidden; float:left; display:inline;}		
												
.offgrid1	{margin-left:	69px	; }									
.offgrid2	{margin-left:	133px	; }									
.offgrid3	{margin-left:	197px	; }									
.offgrid4	{margin-left:	261px	; }									
.offgrid5	{margin-left:	325px	; }									
.offgrid6	{margin-left:	389px	; }									
.offgrid7	{margin-left:	453px	; }									
.offgrid8	{margin-left:	517px	; }									
.offgrid9	{margin-left:	581px	; }									
.offgrid10	{margin-left:	645px	; }									
.offgrid11	{margin-left:	709px	; }									
.offgrid12	{margin-left:	773px	; }									

}

/***** Phone (portrait 300px) *****/
/*@media only screen and (max-width: 767px) {

.row 								{ margin:0 auto; width:300px; overflow:hidden; }
.row .row 							{ margin:0; width:auto; display:inline-block; }
		
.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9,
.grid10,
.grid11,
.grid12							{ width:300px; margin:10px 0 0 0; overflow:hidden; float:left; display:inline; }

.grid6c,
.grid7c							{ width:298px; margin:10px 0 0 0; overflow:hidden; float:left; display:inline; }

.offgrid1,
.offgrid2,
.offgrid3,
.offgrid4,
.offgrid5,
.offgrid6,
.offgrid7,
.offgrid8,
.offgrid9,
.offgrid10,
.offgrid11							{ margin-left:0; }

.show-phone 						{ display:inherit !important; }
.show-tablet 						{ display:none !important; }
.show-screen						{ display:none !important; }
	
.hide-phone							{ display:none !important; }
.hide-tablet						{ display:inherit !important; }
.hide-screen						{ display:inherit !important; }
			
}	 

*/
/***** Phone (landscape 420px) *****/
@media only screen and /*(min-width: 480px) and*/ (max-width: 767px) {

.row 								{ margin:0 auto; width:456px; overflow:hidden; }
.row .row 							{ margin:0; width:auto; display:inline-block; }
	
.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9,
.grid10,
.grid11,
.grid12							{ width:456px; margin:10px 0 0 0; overflow:hidden; float:left; display:inline; }

.grid6c,
.grid7c							{ width:454px; margin:10px 0 0 0; overflow:hidden; float:left; display:inline; }


.show-phone 						{ display:inherit !important; }
.show-tablet 						{ display:none !important; }
.show-screen						{ display:none !important; }
	
.hide-phone							{ display:none !important; }
.hide-tablet						{ display:inherit !important; }
.hide-screen						{ display:inherit !important; }

}



