@font-face {
    font-family: 'Titillium';
    src: local('☺'), url('fonts/TitilliumText250wt-webfont.ttf') format('truetype'), url('fonts/TitilliumText1-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Titillium Bold';
	src: local('☺'), url('fonts/TitilliumText600wt-webfont.ttf') format('truetype'), url('fonts/TitilliumText600wt-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}


BODY {
	font:				16px/27px 'Titillium', Helvetica, Arial, sans-serif;
	color:				rgb(77, 77, 77);
	text-shadow:		0px 1px 1px rgba(255, 255, 255, 0.34);
	background:			-webkit-gradient(radial, 50% 50%, 500, 50% 50%, 0, from(rgb(174, 175, 176)), to(rgba(255, 255, 255, 1.0)))  no-repeat top center, rgb(174, 175, 176);
	background-image: 	-moz-radial-gradient(center 45deg, circle closest-side, rgba(255, 255, 255, 1.0) 0%, rgb(174, 175, 176) 90%);
	background-size:	1024px 1024px;
	padding:			0px;
	margin:				0px;
	text-align:			center;
	min-width:			960px;
	min-height:			1000px;
}

h1, h2 {
	line-height:	1.4;
}
h3 {
	font-size:		16px;
	margin-bottom:	-7px;
}

p {
	line-height:	1.4;
}

h2 {
	font-size:		24px;
	margin:			0 0 35px 0;
}

b {
	font:			16px/27px 'Titillium Bold', Helvetica, Arial, sans-serif;
}

a:focus { outline:none }

#content {
	clear: 			both;
	display:		inline;
	float:			left;
	min-width:		960px;
	width:			100%;
	margin-bottom:	50px;
}

.protection {
	margin:			0px auto;
	text-align:		center;
	width:			940px;
	
}

a:link, a:visited {
	text-decoration:	none;
	color:				#4f85d1;
} 

/* ///////// LOGO ///////// */

#logo a {
	display:			block;
	background:			url("../images/smudgeproofLogo.png") repeat scroll 0 0 transparent;
	width:				226px;
	height:				53px;
	text-decoration:	none;
	color:				none;
	float: 				left;
	margin-left:		30px;
	margin-top: 		29px;
}

#logo a:hover {
	background-position: 0 -53px;

}

#logo a:active {
	margin-top: 		31px;

}


/* ///////// NAVIGATION ///////// */

div#menu ul {cursor:pointer}

#header {
	clear: 		both;
	display:	inline;
	float:		left;
	min-width:	960px;
	min-height:	150px;
	width:		100%;
	height:		90px;
}

#menu ul {
	margin:		0px 0px 0px 0px;
	padding:	0px;
	list-style-type: none;
}

#menu li {
	display:		block;
	float:			right;
	font-size:		16px;
	margin:			0px;
	padding:		52px 5px 11px 10px;
	width:			108px;
	border:			1px solid transparent;
	text-align:		left;
	-webkit-border-bottom-left-radius:	5px;
	-webkit-border-bottom-right-radius:	5px;
	-moz-border-radius-bottomleft: 		5px;
	-moz-border-radius-bottomright:		5px;	
}

#menu li a {
	display:			block;
	text-decoration:	none;
	color:				rgb(77, 77, 77);
}

#menu li.selected {
	font:			16px/27px 'Titillium Bold', Helvetica, Arial, sans-serif;
	color:			rgb(255, 255, 255);
	text-shadow:	0px -1px 1px rgba(0, 0, 0, 0.31);
	background:		rgba(0, 0, 0, 0.19);
	border:			1px solid rgba(0, 0, 0, 0.08);
}

#menu li:hover {
	font:			16px/27px 'Titillium Bold', Helvetica, Arial, sans-serif;
	color:			rgb(255, 255, 255);
	text-shadow:	0px -1px 1px rgba(0, 0, 0, 0.31);
}

#menu li:hover a {
	color:			rgb(255, 255, 255);
}

#menu li.selected a, #menu li.selected a:active {
	font:			16px/27px 'Titillium Bold', Helvetica, Arial, sans-serif;
	color:			rgb(255, 255, 255);
	text-shadow:	0px -1px 1px rgba(0, 0, 0, 0.31);
}

/* ///////// HOME PAGE ///////// */

#iPadFrame {
	float:			right;
	width:			831px;
	height:			634px;
	position:		relative;
}

#iPadContent {
	display:		block;
	background:		url("../images/iPadFrame.png") top right no-repeat;
	position:		relative;
	width:			831px;
	height:			634px;
}

#iPadContent a {
	display:		block;
	width:			831px;
	height:			634px;
}

#iPhone4FrameWithSideShadow {
	position:		relative;
	background:		url("../images/iPhone4FrameWithSideShadow.png") bottom left no-repeat;
	width:			296px;
	height:			506px;
	top:			132px;
	left:			34px;
}

#iPhoneContentHome a {
	display:		block;
	position:		relative;
	background:		url("../images/appIXDA11Screen.png") bottom left no-repeat;
	width:			180px;
	height:			270px;
	top:			108px;
	left:			49px;
}

#iPadFrame #iPadappstoreButton {
	position:		absolute;
	top:			115px;
	right:			-4px;
}

#iPadappstoreButton a {
	background:		url("../images/iPadappstoreButton.png") repeat scroll 0 0 transparent;
	display:		block;
	width:			168px;
	height:			52px;
	text-decoration:none;
}

#iPadappstoreButton a:hover {
	background-position: 0 -52px;
}

#iPadappstoreButton a:active {
	margin-top:			2px;
}

#iPhoneappstoreButton a {
	background:		url("../images/iPhoneappstoreButton.png") repeat scroll 0 0 transparent;
	display:		block;
	width:			168px;
	height:			52px;
	text-decoration:none;
}

#iPhoneappstoreButton a:hover {
	background-position: 0 -52px;
}

#iPhoneappstoreButton a:active {
	margin-top:			2px;
}

#iPhone4FrameWithSideShadow #iPhoneappstoreButton {
	position:		absolute;
	top:			335px;
	right:			-18px;
}

#comingsoonBanner {
	background:		url("../images/comingsoonBanner.png") bottom left no-repeat;
	width:			93px;
	height:			93px;
	position:		absolute;
	top:			36px;
	left:			32px;
}

#waitingForReviewBanner {
	background:		url("../images/waitingForReviewBannerSmall.png") bottom left no-repeat;
	width:			118px;
	height:			118px;
	position:		absolute;
	top:			32px;
	left:			32px;
}

#inReviewBanner {
	background:		url("../images/inReviewBannerSmall.png") bottom left no-repeat;
	width:			118px;
	height:			118px;
	position:		absolute;
	top:			32px;
	left:			32px;
}

#inAppStore {
	background:		url("../images/inAppStoreSmall.png") bottom left no-repeat;
	width:			118px;
	height:			118px;
	position:		absolute;
	top:			32px;
	left:			32px;
}


/* ///////// SERVICES PAGE ///////// */

#services #content {
	margin:		0px;
	padding:	0px;
}

#imageMasthead {
	margin:		auto;
}

#services #subcontent UL {
	clear: 		both;
	display:	inline;
	float:		right;
	min-width:	940px;
	width:		100%;
	margin:		40px 0 100px 0;
}

#services #subcontent LI {
	display:		inline-block;
	font-size:		19px;
	color:			rgb(90, 90, 90);
	width:			49%;
}

#services #subcontent LI.left {
	text-align:		right;
}

#services #subcontent LI.right {
	text-align: left;
	border-left:	1px solid rgba(0, 0, 0, 0.23);
}

#services #subcontent IMG {
	display:	block;
	margin:		auto;
}

#services #subcontent P {
	margin:	auto 50px;
}


/* ///////// CONTACT PAGE ///////// */

#contactFrame {
	background:		url("../images/contact_back.png") bottom left no-repeat;
	position:		relative;
	margin-left: 	auto;
 	margin-right:	auto;
	width:			698px;
	height:			567px;
}

#contactContent a {
	display:		block;
	background:		url("../images/envelope.png") repeat scroll 0 0 transparent;
	position:		relative;
	margin-left: 	auto;
 	margin-right:	auto;
	top:			220px;
	left:			8px;
	width:			223px;
	height:			149px;
}

#contactContent a:hover {
	background-position: 0 -149px;
}

#contactContent a:active {
	background-position: 0 -149px;
	top:			222px;
}

/* ///////// SOFTWARE PAGE ///////// */

#software #content {
	margin:			150px 0 175px 0;
}

#softwareIcons ul {
	display:		inline-block;
	padding:		0px;
	list-style-type: none;
}

#softwareIcons li {
	display:		inline-block;
	float:			right;
	margin:			0 8px 0 8px;
	width:			158px;
	height:			148px;	
}

#softwareIcons li a {
	display:		inline-block;
	text-decoration:	none;
}

#softwareIcons li:hover a:after {
	display:		inline-block;
	content:		"";
	position:		relative;
	bottom:			156px;
	width:			158px;
	height:			148px;
	background:		url("../images/software-icon-hover.png") top left no-repeat;
}

#softwareBigShadow {
	margin:			0 0 -210px 0;
}


/* ///////// TYPESAVER PAGE ///////// */

#typesaver #productCopy {
	display:		inline-block;
	text-align:		left;
	margin:			0 0 70px 10px;
	width:			570px;

}

#typesaver #content img {
	margin-bottom:	-30px;
}

/* ///////// SIGGRAPH PAGE ///////// */

#siggraph #content a:link {
	font:			16px/27px 'Titillium Bold', Helvetica, Arial, sans-serif;
}

#siggraph #content {
	position:		relative;
	margin-bottom:	120px;
}

#siggraph #productCopy {
	position:		relative;
	float:			right;
	top:			50px;
	right:			120px;
	width:			320px;
	text-align:		left;
}

#iPhone4FrameBig {
	position:		relative;
	background:		url("../images/iPhone4FrameBig.png") bottom left no-repeat;
	width:			334px;
	height:			575px;
	float:			left;
	top:			25px;
	left:			150px;
}

#posterSIGGRAPHScreen {
	position:		relative;
	background:		url("../images/posterSIGGRAPHScreen.png") bottom left no-repeat;
	width:			224px;
	height:			336px;
	top:			93px;
	left:			54px;
}

/* ///////// IXDA PAGE ///////// */

#IXDA11 #content a:link {
	font:			16px/27px 'Titillium Bold', Helvetica, Arial, sans-serif;
}

#IXDA11 #content {
	position:		relative;
	margin-bottom:	120px;
}

#IXDA11 #productCopy {
	position:		relative;
	float:			right;
	top:			50px;
	right:			120px;
	width:			320px;
	text-align:		left;
}

#iPhone4FrameBig {
	position:		relative;
	background:		url("../images/iPhone4FrameBig.png") bottom left no-repeat;
	width:			334px;
	height:			575px;
	float:			left;
	top:			25px;
	left:			150px;
}

#posterIXDA11Screen {
	position:		relative;
	background:		url("../images/posterIXDA11Screen.png") bottom left no-repeat;
	width:			224px;
	height:			336px;
	top:			93px;
	left:			54px;
}

#IXDA11 #waitingForReviewBanner {
	position:		absolute;
	background:		url("../images/waitingForReviewBanner.png") bottom left no-repeat;
	width:			127px;
	height:			127px;
	top:			1px;
	left:			32px;
}

#IXDA11 #inReviewBanner {
	position:		absolute;
	background:		url("../images/inReviewBanner.png") bottom left no-repeat;
	width:			127px;
	height:			127px;
	top:			1px;
	left:			32px;
}

#IXDA11 #inAppStoreBanner {
	position:		absolute;
	background:		url("../images/inAppStoreBanner.png") bottom left no-repeat;
	width:			127px;
	height:			127px;
	top:			1px;
	left:			32px;
}

/* ///////// SYMPOSIUM PAGE ///////// */

#symposium #content a:link {
	font:			16px/27px 'Titillium Bold', Helvetica, Arial, sans-serif;
}

#symposium #content {
	position:		relative;
	margin-bottom:	120px;
}

#symposium #productCopy {
	position:		relative;
	float:			right;
	top:			50px;
	right:			120px;
	width:			320px;
	text-align:		left;
}

#iPhone4FrameBig {
	position:		relative;
	background:		url("../images/iPhone4FrameBig.png") bottom left no-repeat;
	width:			334px;
	height:			575px;
	float:			left;
	top:			25px;
	left:			150px;
}

#posterSYMPOSIUMScreen {
	position:		relative;
	background:		url("../images/posterSYMPOSIUMScreen.png") bottom left no-repeat;
	width:			224px;
	height:			336px;
	top:			93px;
	left:			54px;
}

#symposium #content ul li {
	line-height:	1.4;
}

/* ///////// SILVERSCREEN ///////// */

#silverscreen #content {
	position:		relative;
	margin-bottom:	120px;
}

#silverscreen #productCopy {
	position:		relative;
	text-align:		left;
	top:			60px;
	right:			180px;
	float:			right;
	width:			320px;
}

#silverscreen #comingsoonBanner {
	position:		absolute;
	top:			1px;
	left:			32px;
}

#iPhone4Frame {
	position:		relative;
	background:		url("../images/iPhone4Frame.png") bottom left no-repeat;
	width:			280px;
	height:			472px;
	float:			left;
	top:			27px;
	left:			140px;
}

#iPhoneContent2 {
	position:		relative;
	background:		url("../images/appSilverScreen.png") bottom left no-repeat;
	width:			180px;
	height:			270px;
	top:			74px;
	left:			49px;
}

#silverscreen div.clear {
	clear:			both;
	padding-top: 	5px;
}

#silverscreen form UL {
	list-style:		none;
	padding:		20px 0 0 0;
}

#silverscreen LI {
	display: 		list-item;
}

#silverscreen label {
	clear: 			both;
	display:		block;
	color:			rgba(0, 0, 0, 0.5);
	font:			14px/27px 'Titillium Bold', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;

}

#silverscreen input[type="submit"]  {
	cursor:			pointer;
	display:		block;
	background:		url("../images/form-submit-button-back.png") repeat scroll 0 0 transparent;
	float:			right;
	width:			89px;
	height:			32px;
	font:			16px/27px 'Titillium Bold', Helvetica, Arial, sans-serif;
	font-size:		14px;
	padding:		1px 0 0 0;
	border:			none;
	color:			rgb(98, 98, 98);
	text-shadow:		0px 1px 1px rgba(255, 255, 255, 0.5);
	-webkit-font-smoothing: antialiased;
}

#silverscreen input[type="submit"]:hover {
	background-position: 0 -32px
}

#silverscreen input[type="submit"]:active {
	padding:		3px 0 0 0;
	background-position: 0 -64px
}

#silverscreen input[placeholder]  {
	font:			14px/27px 'Titillium', Helvetica, Arial, sans-serif;
	padding:		0 0 1px 6px;
	color:			rgb(65, 65, 65);
}

#silverscreen input[type="text"] {
	float:			left;
	width:			68%;
	height:			30px;
	border-top:		1px solid rgba(0, 0, 0, 0.3);
	border-right:	1px solid rgba(0, 0, 0, 0.2);
	border-bottom:	1px solid rgba(0, 0, 0, 0.2);
	border-left:	1px solid rgba(0, 0, 0, 0.2);
	-webkit-border-top-left-radius:		5px;
	-webkit-border-top-right-radius:	5px;
	-webkit-border-bottom-left-radius:	5px;
	-webkit-border-bottom-right-radius:	5px;
	-moz-border-radius-topleft: 		5px;
	-moz-border-radius-topright:		5px;
	-moz-border-radius-bottomleft: 		5px;
	-moz-border-radius-bottomright:		5px;
}


/* ///////// FOOTER ///////// */

#footer {
	font-size:		12px;
	clear: 			both;
	display:		inline;
	float:			left;
	min-width:		960px;
	width:			100%;
}

#footer P {
	margin: 0 0 50px 0;
}

#socialButtonsFrame {
	display:		inline-block;
	margin-left:	auto;
	margin-right:	auto;
	width:			282px;
}

#twitterButton a {
	background:		url("../images/twitterButton.png") repeat scroll 0 0 transparent;
	display:		inline-block;
	position:		relative;
	float:			left;
	width:			137px;
	height:			39px;
	text-decoration:none;
}

#facebookButton a {
	background:		url("../images/facebookButton.png") repeat scroll 0 0 transparent;
	display:		inline-block;
	position:		relative;
	float:			right;
	width:			137px;
	height:			39px;
	text-decoration:none;
}

#twitterButton a:hover, #facebookButton a:hover {
	background-position: 0 -39px;
}

#twitterButton a:active, #facebookButton a:active {
	top:			2px;
}