/* Template Info

Name: Soonish PSD, HTML/CSS Template
Version: 1.0
Author: Richard Tabor
Author URL: http://www.purtypixels.com & http://www.purtylabs.com

/*	Style Guide
	
	1. Resets and Clears
	2. Body Styles
	3. Base
	4. Logo + Heading + Type
	5. Progress Bar
	6. Form Input + Spam Message
	7. The Responsive Goods

-----------------------------------------*/


/* 1. Resets and Clears
-----------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,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,input,textarea,select{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}del{text-decoration:line-through}hr{background:transparent;border:0;clear:both;color:transparent;height:1px;margin:0;padding:0}mark{background-color:#ffffb3;font-style:italic}input,select{vertical-align:middle}ins{background-color:red;color:white;text-decoration:none}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0} a{text-decoration:none;}
.clear{clear:both;display:block;height:0;overflow:hidden;visibility:hidden;width:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;height:0;line-height:0;visibility:hidden;width:0}* html .clearfix,:first-child+html .clearfix{zoom:1}


/* 2. Body Styles
-----------------------------------------*/

body {
	font-family:Tahoma, Arial, sans-serif;
	background:#383b40;
	-webkit-font-smoothing: antialiased;
	}

#wrapper {
	width:457px;
	margin:0 auto;
	}


/* 3. Base
-----------------------------------------*/

#main {
	width:457px;
	display:block;

	padding-bottom:13px;
	margin-top:5px;
	background:#f9f9f9;
	-webkit-box-sizing: border-box; 
	   -moz-box-sizing: border-box; 
	        box-sizing: border-box;
	border:solid 3px #1c1d1f;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	}



/* 4. Logo + Heading + Type
-----------------------------------------*/
.logo {
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:15px;
	height: auto;
    max-width: 100%;
	}

	.img {
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:22px;
	background:url(pictolink.jpg);
    height: auto;
    max-width: 100%;
	}
#main h1,
#main h2 {
	color:#373a3f;
	text-shadow:0 1px 0 rgba(255,255,255,.75);
	width:100%;
	text-align:center;
	display:block;
	}
#main h1 { font-size:26px; }
#main h2 { font-size:18px; }

#main p {
	font-size:16px;
	color:#484c52;
	line-height:17px;
	width:100%;
	text-align:center;
	display:block;
	margin-bottom:20px;
	}
	
a { color: #b06800;
	-webkit-transition: 0.4s linear all;
	   -moz-transition: 0.4s linear all;
	    -ms-transition: 0.4s linear all;
	     -o-transition: 0.4s linear all;
	        transition: 0.4s linear all;
	}	
	
a:hover { color: #484c52; }

hr {
	width:100%;
	height:5px;
	margin:20px 0;
	display:block;
	background:url(http://www.modev32.com/images/hr.png) repeat-x;
	border:none;
	}



/* 6. Form Input + Spam Message
-----------------------------------------*/


::-webkit-input-placeholder {
	font-family:Helvetica, Arial, sans-serif;
   	font-size:14px;
	font-weight:500;
	color:#949aa3;
	}

:-moz-placeholder {
   	font-family:Helvetica, Arial, sans-serif;
   	font-size:14px;
	font-weight:500;
	color:#949aa3;
	}

.button {
	width:80%;
	height:42px;
	margin-left:auto;
	margin-right:auto;
	background: #ff9807;
	border:1px solid #a96500;
	-webkit-border-radius:2px;
	   -moz-border-radius:2px;
	        border-radius:2px;
	outline:none;
	cursor:pointer;
	text-align:center;
   	font-size:16px;
	font-weight:600;
	color:#5f3c00;
	text-shadow:0 1px 0 rgba(255,255,255,.19);
	display:block;
	margin-top:11px;
	line-height:38px;
	}
	
.button:hover {
	background: #f8aa0f;
	}

.version {
	width:100%;
	text-align:center;
	font-size:11px;
	color:#36393e;
	text-shadow:0 1px 0 #fff;
	display:block;
	margin-bottom:15px;
	margin-top:2px;
	}


/* 7. The Responsive Goods
-----------------------------------------*/


/*	#Mobile (Portrait) 
================================================== */
	
	@media only screen and (max-width: 767px) {
		#wrapper { width:297px; }
		#main {
			width:297px;
			background-image:url(../images/main_300.png);
			}

		#bottom {
			width:297px;
			background-image:url(../images/bottom_300.png);
			}
	}	 
	
	
/* #Mobile (Landscape)
================================================== */

	@media only screen and (min-width: 480px) and (max-width: 767px) {
		#wrapper { width:401px; }
		#main {
			width:401px;
			background-image:url(../images/main_400.png);
			}
		#bottom {
			width:401px;
			background-image:url(../images/bottom_400.png);
			}
	}