/* Reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,button,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
a{outline: none;text-decoration: none;}

/* Interface */

html, body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background: #ebf0f3 url(/images/body_bg.png) repeat-x;
text-shadow: 0px 1px 0px #fff;
margin: 0;
color: #575e64;
font-size: 13px;
padding: 0;
}

#wrapper {
width: 850px;
margin: auto;
z-index: 1000;
}

#header {
width: 850px;
height: 110px;
}

#logo {
width: 215px;
height: 74px;
margin: 17px 0px 0px -5px;
float: left;
background: url(/images/logo.png) top no-repeat;
}

#nav {
width: 240px;
height: 73px;
float: right;
margin: 17px 2px 0px 0px;
}

.button {
background: url(/images/nav_bg.png) top no-repeat;
width: 50px;
height: 73px;
float: left;
margin-right: 10px;
}

.button a {
text-align: center;
font-size: 12px;
width: 50px;
height: 73px;
display: block;
line-height: 110px;
text-indent: -9999px;
}

.btn_folio {
background-position: 0px 0px;
}

.btn_icons {
background-position: -50px 0px;
}

.btn_about {
background-position: -100px 0px;
}

.btn_blog {
background-position: -150px 0px;
}

.btn_folio:active {
background-position: 0px -73px;
}

.btn_icons:active {
background-position: -50px -73px;
}

.btn_about:active {
background-position: -100px -73px;
}

.btn_blog:active {
background-position: -150px -73px;
}

.btn_folio.active {
background-position: 0px -219px;
}

.btn_icons.active {
background-position: -50px  -219px;
}

.btn_about.active {
background-position: -100px -219px;
}

.btn_blog.active {
background-position: -150px -219px;
}

.btn_folio.active:active {
background-position: 0px -219px;
}

.btn_icons.active:active {
background-position: -50px -219px;
}

.btn_about.active:active {
background-position: -100px -219px;
}

.btn_blog.active:active {
background-position: -150px -219px;
}

#logo:hover {
background-position: bottom;
}

a.home_link {
text-indent: -9999px;
height: 74px;
display: block;
}

#top_cap {
width: 850px;
height: 6px;
background: url(/images/top_cap.png) no-repeat;
}

#bottom_cap {
width: 850px;
height: 6px;
background: url(/images/bottom_cap.png) no-repeat;
}

#container {
width: 850px;
background: url(/images/content_bg.png) repeat-y;
}

#content {
width: 800px;
margin: auto;
padding: 20px 0px 0px 0px;
}

#content a {
color: #3165a2;
}

#content p a:hover {
text-decoration: underline;
}

/* Icon Page */
	
.set_preview {
background: url(/images/icon_preview_bg.png) no-repeat;
width: 560px;
height: 210px;
float: left;
margin-bottom: 20px;
}

.set_preview img {
  -webkit-transition: opacity 0.2s linear;
}

.set_preview img:hover {
opacity:0.7;
}

.folio_column_1 {
width: 250px;
padding: 0px;
float: left;
}

.folio_column_2 {
width: 250px;
padding-left:25px;
float: left;
}

.folio_column_3 {
width: 250px;
padding-left:25px;
float: left;
}

.folio_preview {
width: 560px;
height: 210px;
float: left;
margin-bottom: 20px;
}

a.thumb {
border: none 0px #ffffff;
cursor:url("http://graphicpeel.com/images/magplus.cur"), pointer;
}

a.folio_item img {
-webkit-border-radius:3px;
}

.folio_info {
width: 780px;
height: 65px;
color: #fff;
text-shadow: none;
position:absolute;
margin-top: 40px;
}

.set_info {
width: 215px;
height: 190px;
padding-top: 15px;
float: right;
}

span.icon_quantity {
font-size: 13px;
color: #7d7d7d;
}

p.icon_description {
font-size: 12px;
margin: 15px 0px 15px 0px;
color: #575e64;
line-height: 16px;
}

p.folio_description {
font-size: 12px;
margin: 5px 0px 15px 0px;
color: #575e64;
}

h1 {
font-size: 24px;
color: #565e64;
float: left;
padding-left: 25px;
padding-top: 20px;
}

h4 {
font-size: 14px;
color: #565e64;
font-weight:  bold;
line-height: 18px;
margin-top: 5px;
}

h5 {
font-size: 20px;
color: #565e64;
}

.clearfix {
width: 100%;
height: 1px;
clear: both;
}
	
.download {
width: 200px;
height: 52px;
}

.dload_button {
background: url(/images/download_buttons.png) no-repeat;
float: left;
height: 52px;
width: 37px;
margin-right: 7px;

}

.dload_button a {
height: 52px;
display: block;
text-indent: -9999px;
}

.btn_mac {
background-position: 0px 0px;
}

.btn_win {
background-position: -37px 0px;
}

.btn_icontainer {
background-position: -74px 0px;
}

.btn_mac:hover {
background-position: 0px -104px;
}

.btn_win:hover {
background-position: -37px -104px;
}

.btn_icontainer:hover {
background-position: -74px -104px;
}

.btn_mac:active {
background-position: 0px -52px;
}

.btn_win:active {
background-position: -37px -52px;
}

.btn_icontainer:active {
background-position: -74px -52px;
}

/* Footer */

#footer p.unavailable  {
float: left;
font-size: 12px;
height: 13px;
padding-left: 16px;
color: #ae2411;
font-weight: bold;
background: url(/images/availability.png) left 1px no-repeat ;
}

#footer p.available  {
float: left;
padding-left: 16px;
font-size: 12px;
height: 13px;
color: #479835;
font-weight: bold;
background: url(/images/availability.png) no-repeat left -23px;
}

#footer p  {
float: right;
font-size: 12px;
color: #9eadb7;
font-weight: bold;
margin: 10px 10px 20px 10px;
}

#footer p a  {
color: #9eadb7;
}

#footer p a:hover  {
color: #6e89a8;
}

#footer p span  {
color: #9eadb7;
margin-left: 4px;
}

/* Overlay */

#mask { 
background:#9ebfe4 url(/images/clouds.png) repeat-y 50% 0; 
}

/* Test */

div.overlay_contact { 
     
    /* growing background image */ 
    background:url(/images/contact_bg.png) no-repeat; 
     
    /* dimensions after the growing animation finishes  */ 
width: 426px;
height: 335px;    
     
    /* initially overlay is hidden */ 
    display:none; 
     
    /* some padding to layout nested elements nicely  */ 
    padding: 30px 40px 30px 40px; 
} 
 
/* default close button positioned on upper right corner */ 
.overlay_contact .close { 
    background: url(/images/close.png) top no-repeat; 
    position:absolute; 
    left:-4px; 
    top:-4px; 
    cursor:pointer; 
    height:30px; 
    width:30px; 
}

.overlay_contact .close:active { 
background-position: bottom;
}

h3 {
color: #1b3174;
font-size: 17px;
font-weight: bold;
line-height: 30px;
margin-bottom: 3px;
}

input[type=text] {
border-bottom: 1px solid #bbb;
border-top: 1px solid #999;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
padding: 5px;
font-size: 14px;
background-image: url(/images/inputbg.png);
background-repeat: repeat-x;
-webkit-box-shadow: #fdfdfd 0px 1px 1px;
margin-bottom: 7px;
color: #888;
}

input[type=submit] {
width: 118px;
height: 27px;
float: right;
background: url(/images/submit_button.png) top no-repeat;
border: none;
color: #fff;
font-size: 13px;
font-weight: bold;
text-shadow: 0px -1px 0px #000;
line-height: 25px;
}

input[type=submit]:hover {
background-position: bottom;
}

.name {
width: 197px;
float: left;
}

.email {
width: 197px;
float: left;
margin-left: 7px;
}

.subject {
width: 415px;
}

input[type=text]:focus {
background-color: #ffffcc;
background-image: none;
color: #000;
}

textarea {
padding: 5px;
font-size: 14px;
border-right: 1px solid #999;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
background-image: url(/images/inputbg.png);
background-repeat: repeat-x;
-webkit-box-shadow: #fdfdfd 0px 1px 1px;
width: 415px;
height: 170px;
margin-bottom: 3px;
}

#note {
font-size: 12px;
width: 300px;
color: #8c0d0d;
height: 0px;
text-align: center;
text-shadow: 0px 1px 0px #f7f7f7;
}

#note a {
color: #0d2e8c;
}

#note a:hover {
text-decoration: underline;
}

/* Twitter Sidebar */

#twitter {
width: 215px;
float: right;
line-height: 18px;
margin-bottom: 15px;
-webkit-border-radius:3px;
background: url(/images/twitter_bg.png) top no-repeat;
}

#twitter span a {
font-weight: bold;
}

#twitter_update_list li a {
}

.footer-block li a:hover {
text-decoration: underline;
}

#twitter_update_list {
font-size:13px;
margin-top: 0px;
}

#twitter_update_list li {
margin-top: 0px;
overflow: hidden;
color: #575e64;
padding: 8px 10px 8px 10px;
}

#twitter_update_list li small {
display: block;
font-size: 9px;
}

a.follow_link {
text-indent: -9999px;
height: 102px;
display: block;
}

#left-column {
float: left;
width: 560px;
}

#left-column p {
color: #575e64;
font-size: 13px;
padding: 10px 0px 10px 0px
}

h2 {
font-size: 24px;
color: #3165a2;
line-height: 36px;
}

h3 {
font-size: 18px;
color: #204a70;
}

.username {
font-weight: bold;
color: red;
}

.timestamp {
font-weight: bold;
color: red;}

.services {
	list-style-type: none;
	overflow: hidden;
	zoom: 1;
	font-size: 14px;
	margin: 10px 0px 5px 0px;
}
 
.services li {
	float: left;
	width: 103px;
	margin: 0 8px 7px 0;
	height: 30px;
}
 
.services li.nopadding {
	margin-right: 0;
}
 
.services li a {
	float: left;
	width: 76px;
	height: 24px;
	background-image: url(/images/service_button.png);
	padding-left: 27px;
	text-decoration: none;
	color: #424242 !important;
	font-weight: bold !important;
	padding-top: 6px;
	position: relative;
	font-size: 16px;
}
 
.services li a span {
	display: block;
	width: 67px;
	overflow: hidden;
	height: 22px;
}
 
.services li a:hover {
	background-position: 0 -30px;
	color: #1e1e1e;
	text-decoration: none;
}
 
.services li a img {
	position: absolute;
	top: 7px;
	margin-right: 7px;
	width: 16px;
	height: 16px;
	left: 7px;
}

span.service_title {
font-size: 14px;
line-height: 20px;
}

.note_visible {
background: url(/images/thank_you.png) no-repeat;
width:410px;
height: 200px;
margin: auto;
padding: 78px 0px 0px 20px;
text-align: left;
}

.folio_button {
float: right;
margin-top: -20px;
}

a.view_button span {
background: url(/images/view_button_span.png) top left no-repeat scroll;
overflow: hidden;
display: block;
line-height: 35px;
height: 37px;
color: #fff;
padding: 0px 12px 0px 20px;
font-size: 15px;
font-weight: bold;
text-shadow: 0px -1px 0px #000;
-webkit-text-stroke:1px transparent;
}

a.view_button {
background: url(/images/view_button_a.png) top right no-repeat scroll;
color: #fff;
height: 37px;
float: left;
display: block;
padding-right: 21px;
}

a.view_button:hover span  {
background-position: left -37px;
}

a.view_button:hover  {
background-position: right -37px;
}

a.view_button:active span  {
background-position: bottom left;
}

a.view_button:active  {
background-position: bottom right;
}

#notfound {
margin: auto;
width: 631px;
height: 310px;
padding-top: 30px;
background: url(/images/notfound.png) no-repeat bottom;
}

p.notfound_desc {
width: 600px;
padding: 10px 0px 10px 0px;
margin: auto;
font-size: 13px;
color: #575e64;
line-height: 30px;
text-align: center;
}

p.notfound_desc a {
color: #3165a2;
font-size: 18px;
padding-left: 20px;
}

/* Front page */

.feature {
width:300px;
margin: 0px 50px 0px 50px;
float: left;
background-repeat: no-repeat;
background-position: left 15px;
}

.feature a {
width: 300px;
height: 72px;
display: block;
text-indent: -99999px;
}

.feature:hover {
color: #333;
}

#sub_feature {
width: 800px;
height: 130px;
padding-top: 20px;
margin-top: 320px;
background: url(/images/sub_feature_bg.png) no-repeat top;
}

#sub_feature a {
width: 300;
height: 60px;
position: absolute;
}

#sub_feature h6 {
font-weight:bold;
float:right;
width:220px;
clear:left;
line-height:30px;
font-size:14px;
}

#sub_feature p {
float:right;
width:220px;
clear:left;
font-size:12px;
line-height:18px;
}

.notification_error {
position: relative;
top:295px;
line-height: 25px;
}

ul.offers li {
background: url(http://icedcocoa.com//images/bullet.png) no-repeat;
margin-bottom: 12px;
margin-left: 10px;
padding-left: 19px;
}

a.freebiedownload {
background: url(http://graphicpeel.com/images/freebieDownload.png) left;
height: 36px;
font-size: 20px;
width: 158px;
}

/* Gallery */

div#container {
	overflow: hidden;
}
div.content {
	display: none;
	clear: both;
}

div.content a, div.navigation a {
	text-decoration: none;
}
div.content a:hover, div.content a:active {
	text-decoration: underline;
}

div.navigation a.pageLink {
	height: 77px;
	line-height: 77px;
}

div.controls {
	margin-top: 5px;
	height: 23px;
}
div.controls a {
	padding: 5px;
}
div.ss-controls {
	float: left;
}
div.nav-controls {
	float: right;
}

div.slideshow-container,
div.loader,
div.slideshow a.advance-link {
	width: 510px; /* This should be set to be at least the width of the largest image in the slideshow with padding */
}

div.loader,
div.slideshow a.advance-link,
div.caption-container {
	height: 502px; /* This should be set to be at least the height of the largest image in the slideshow with padding */	
}

div.slideshow-container {
	position: relative;
	clear: both;
	float: left;
	height: 532px;
}

div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('images/loader.gif');
	background-repeat: no-repeat;
	background-position: center;
}
div.slideshow span.image-wrapper {
	display: block;
	position: absolute;
	top: 30px;
	left: 0;
}
div.slideshow a.advance-link {
	display: block;
	line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow with padding */
	text-align: center;
}

div.slideshow a.advance-link:hover,
div.slideshow a.advance-link:active,
div.slideshow a.advance-link:visited {
	text-decoration: none;
}
div.slideshow a.advance-link:focus {
	outline: none;
}

div.slideshow img {
	border-style: solid;
	border-width: 1px;
}
div.caption-container {
	float: right;
	position: relative;
	margin-top: 30px;
}
span.image-caption {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

div.caption-container, span.image-caption {
	width: 334px;
}

div.caption {
	padding: 0 12px;
}

div.image-title {
	font-weight: bold;
	font-size: 1.4em;
}
div.image-desc {
	line-height: 1.3em;
	padding-top: 12px;
}
div.download {
	margin-top: 8px;
}
div.photo-index {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 12px;
}
div.navigation-container {
	float: left;
	position: relative;
	left: 50%;
}
div.navigation {
	float: left;
	position: relative;
	left: -50%;
}
div.navigation a.pageLink {
	display: block;
	position: relative;
	float: left;
	margin: 2px;
	width: 16px;
	background-position:center center;
	background-repeat:no-repeat;
}
div.navigation a.pageLink:focus {
	outline: none;
}

ul.thumbs {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
}
ul.thumbs li {
	float: left;
	padding: 0;
	margin: 2px;
	list-style: none;
}
a.thumb {
	padding: 1px;
	display: block;
}
a.thumb:focus {
	outline: none;
}
ul.thumbs img {
	border: none;
	display: block;
}
div.pagination {
	clear: both;
	position: relative;
	left: -50%;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
	position: relative;
	display: block;
	float: left;
	margin-right: 2px;
	padding: 4px 7px 2px 7px;
	border: 1px solid #ccc;
}
div.pagination a:hover {
	text-decoration: none;
}
div.pagination span.current {
	font-weight: bold;
}
div.pagination span.ellipsis {
	border: none;
	padding: 5px 0 3px 2px;
}

div.gallery-gutter {
	clear: both;
	padding-bottom: 20px;
}

.folio_preview_left {
width:600px;height:400px;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px;float:left;background:url(http://cl.ly/81eba9d68f95bdd5d378/content) left;
}


.folio_preview_right {
width:200px;
height:400px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
float:left;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: initial;
-webkit-transform-origin-x: 0%;
-webkit-transform-origin-y: 0%;
}

.face {
width:200px;
height:400px;
position: absolute;
}

.flipped .face {
}

.front {
width:200px;
height:400px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
}

.back {
background: gray;
-webkit-transform: rotateY(180deg);
float: left;
}


.flipped {
-webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease; -webkit-transition-delay: initial; -webkit-transform-origin-x: 0%; -webkit-transform-origin-y: 0%; -webkit-transform: rotateY(-155deg);
}

#folio_nav {
width: 445px;
height: 51px;
line-height: 51px;
margin: 0px auto 25px auto;
}

#folio_nav .button {
background: url(/images/folio_nav.png) top no-repeat;
height: 58px;
float: left;
}

#folio_nav .button a {
text-align: center;
font-size: 12px;
display: block;
line-height: 58x;
width: 100%;
text-indent: -9999px;
}

#folio_nav .ios {
width: 98px;
background-position: left top;
}

#folio_nav .macos {
margin-left: 40px;
width: 132px;
background-position: -100px top;
}

#folio_nav .web {
margin-left: 40px;
width: 105px;
background-position: right top;
}

#folio_nav .ios:hover {
background-position: left bottom;
}

#folio_nav .macos:hover {
background-position: -100px bottom;
}

#folio_nav .web:hover {
background-position: right bottom;
}


#folio_nav .ios.active {
background-position: left -58px;
}

#folio_nav .macos_active {
background-position: -100px -58px;
}

#folio_nav .web.active {
background-position: right -58px;
}

.folio_gallery {
}

.page-curl {
width: 266px;
height: 126px;
position: absolute;
top:0;
left:0;
background-position: top;
}



.page-curl a {
display: block;
height: 126px;
text-indent: -9999px;
}

#cssiosicons-curl {
background: url(/images/curl-cssiosicons.png) no-repeat;
}