body { font: .83em/1.4em "Trebuchet MS", Arial; color: #222222; background: url("/i/bg.png") #395f86 repeat-x fixed; }
input, textarea, select {font-family: "Trebuchet MS", Arial; }
form > div {background: #f2f6f8; border: 1px solid #cccccc; padding: 10px; text-align: right;}
form > div > div {margin: 0 0 7px 0;}
input[type="text"] {width: 300px; max-width: 100%; }
label { margin-right: 10px; }
select {width: 303px; margin-left: 10px; }
textarea {width: 500px; max-width: 100%; font: inherit;}

.table-wrap { width: 100%; }
.table-wrap table { width: 100%; }

#download-container {height: 82px; margin-bottom: 15px; background: #f2f6f8; border: 1px solid #cccccc; overflow: hidden; }
#download-link {float: left; height: 82px; border-right: 1px solid #cccccc; margin-right: 15px; line-height: 80px; text-align: center; font-size: 20px; }
#download-link a {background: url("/i/download-icon.png") 10px 16px no-repeat; padding: 0 20px 0 60px;display: block;}
#download-meta {height: 74px; padding: 8px 15px 0 0; font-size: 12px; line-height: 17px; }
@media screen and (max-width: 900px) {
  #download-link { float: none; border-right: none; margin-right: 0; }
  #download-link a { display: inline-block; }
  #download-meta { display: none; }
}

#content table { border-collapse: collapse; margin-bottom: 15px; width: 100%}
#content tr {background: #f2f6f8;}
#content tr:hover td {background: #eaeff3;}
#content td, th { border:1px solid #cccccc; padding: 10px; text-align: center; }
#content td.license {text-align: left; color: #1b335b; }
td.license .desc{ font-size: .9em; line-height: 1.2em; color: #222222;}
td.price { font-size: 1.2em; font-weight: bold; line-height: 1em; color: #1b335b;}
td.price .desc{ font-size: .7em; font-weight: normal; color: #222222;}
strike { color: #555555; font-weight: normal; font-size: .8em;}

span.button, span.button a {display:block; height: 32px; line-height: 29px; background:url("/i/button.png"); color: white; text-shadow: 0 -1px 0 #a02804; text-decoration: none; font-size: 15px;}
span.button a {background:url("/i/button.png") right 32px; padding: 0 5px 0 5px; overflow: hidden; }

p { margin: 0 0 15px 0; }

a { color: #244E79; font-weight: bold; } a:hover { color: #1b335b; }

.page { max-width: 900px; margin: 0 auto; border: 1px solid #2E4B6F; }
#page-main { padding-top: 35px; background: url("/i/page-bg-main.jpg") white no-repeat; }
#page-internal { padding-top: 16px; background: url("/i/page-bg.jpg") white no-repeat; }

#top { margin: 0 16px 7px 17px;}
.menu { height: 29px; background: url("/i/menu-bg.gif"); margin: 0 15px 0 15px; border: 1px solid #8A929F; padding-top: 6px; }
.menu ul { height: 29px; float: left; list-style: none; margin: 0; padding: 0 0 0 8px; }
.menu li { float: left; }
.menu ul a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  font: bold 13px/23px Tahoma, Arial, sans-serif;
  color: #244E79;
  padding: 0 10px 0 10px;
}
.menu ul a.current, .menu ul a:hover { border-bottom: 6px solid #e66924; }
#pull { display: none; }


#splash {
  margin: 15px auto;
  width: 680px;
  position: relative;
  height: 230px;
}

#gif-animator h1 {
  font-weight: bold;
  line-height: 53px;
  font-size:  53px;
  font-family: Arial, sans-serif;
  color: #385b7e;
  margin: 0 0 0 0px;
  padding-top: 18px;
  background: linear-gradient(top, #5E91C4, #19334E);
  background: -webkit-linear-gradient(top, #5E91C4, #19334E);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

#gif-animator h2 {
  font: bold 17px/23px Arial, sans-serif; color: #385b7e;
  width: 336px;
  padding: 5px 0 0 11px;
  margin: 0;
}

#screen {
  background: url("/i/screen.jpg");
  width: 287px; height: 208px;
  position: absolute; left: 390px; top: 15px;
}

#splash-download {
  font: 16px/43px Arial;
  position: absolute; left: 42px; top: 142px;
  height: 43px;
  border: 1px solid #cccccc;
}

#splash-download a { background: url("/i/splash-download.png") right 0; color: #244E79; text-decoration: none; display: block; padding: 0 52px 0 16px; }
#splash-download a:hover { background-position: right 43px; }

#splash-compatible {
  background: url("/i/windows.png") no-repeat;
  font-size: 13px;
  color: #214060;
  position: absolute; left: 45px; top: 202px;
  padding-left: 20px;
}

.line {height: 1px; border-top: 1px solid #cecece; background: #e1e1e1; border-bottom: 2px solid #f1f1f1; }

#columns { background: #f7f7f7; overflow: hidden; width: 100%; }

img.thumbnail { width: 45%; margin: 0 1% 10px 2%; border: 2px solid #cccccc; }
img.thumbnail:hover { border: 2px solid #aaaaaa; }
div.thumbnail { width: 160px;  float: left; text-align: center; border: 1px solid #cdcdcd; margin: 0 0 20px 0; }
div.thumbnail a { display: block; padding: 120px 0 5px 0; }
div.thumbcurrent { padding: 120px 0 5px 0; border: 2px solid #e66924; }

#column-main-left { float: left; text-align: justify; width: 45%; padding: 20px 0 20px 30px; }

#column-main-right {
  float: right;
  width: 41.7%;
  border: 1px solid #cccccc;
  background: white;
  margin: 20px 20px 20px 10px;
  padding: 0 15px 20px 20px;
  font-size: 12px;
  color: #555555;
  display: block;
}

#right-header {
  background: url("/i/features-bg.png") no-repeat;
  font: 13px/30px Tahoma, arial; color: white;
  float: left; position: relative; left: -30px; top: -3px;
  height: 34px;
  padding: 0 25px 0 32px;
  text-transform: uppercase;
}

.li {
  font-size: 13px;
  background: url("/i/bullet.png") 0 1px no-repeat;
  padding-left: 22px; margin: .8em 0 0 0;
  color: #222222;
  clear: both;
}

#container { width: 100%; float: left; margin-right: -340px; }

#content { text-align: justify; padding: 25px 0 30px 30px; margin-right: 340px; }
#content h1 { font-size: 1.6em; color: #244E79; padding: 0 0 15px 0; margin: 0; }
#content h2 { font-size: 1.2em; color: #244E79; padding: 5px 0 12px 0; margin: 0; }

#sidenav { margin: 0 30px 30px 0; width: 280px; float: right; background: #f2f6f8; border: 1px solid #cccccc; border-top: none;}
#sidenav.fixed{ position: fixed; top: 0; }

.sidebox { background: url("/i/sidebox-bg.gif") repeat-x; width: 280px; height: 170px; position: relative;}
.sidebox_footer { position: absolute; top: 154px; height: 16px; width: 280px; background: url("/i/sidebox-footer-bg.png"); }
#boxshot { position: absolute; margin: 20px 0 0 18px; }
#box-version {
  position: absolute; left: 130px; top: 20px; width: 134px; padding-top: 18px;
  background: url("/i/gif-animator-version.png") right 0 no-repeat; color: #2f5071;
  text-align: right; font: bold 13px Tahoma, Arial, sans-serif;
}
#box-download, #box-buy  { position: absolute; left: 130px; width: 134px; height: 30px; font: 13px/30px Tahoma, Arial, sans-serif; text-transform: uppercase;}
#box-download { top: 63px;}
#box-buy { top: 100px;}
#box-download a, #box-buy a { display: block; padding-left: 15px; text-decoration: none; color: #244E79; }
#box-download a { background: url("/i/button-download.png") right 0; }
#box-buy a { background: url("/i/button-buy.png") right 0; }
#box-download a:hover { background: url("/i/button-download.png") right 30px; }
#box-buy a:hover { background: url("/i/button-buy.png") right 30px; }

.linksbox { padding: 0 10px 0 15px; }
.linksbox ul { margin: 0; padding: 0; list-style: none; }
.linksbox li { padding: 8px 0 7px 20px; border-bottom: 1px #cccccc solid; background: url("/i/bullet.png") 0 11px no-repeat; }
.linksbox li a { text-decoration: none; font-size: 16px; }
.linksbox a.desc { font-size: 12px; font-weight: normal; color: #222222; }

.quote { background: url("/i/quote.png") no-repeat 15px 1px; padding: 3px 15px 0 15px; margin-top: 20px; text-indent: 26px; color:#4f4f4f;}
.quote-author { background: url("/i/user.png") no-repeat; margin-top: 8px; margin-bottom: 20px; text-indent: 24px; font-weight: bold; }

#footer { background: url("/i/footer-bg.png") #d0e2ee top; width: 100%; overflow: hidden; }
#footer-left { float: left; line-height: 20px; padding: 20px; }
#footer-left a { text-decoration: none; font-weight: normal; }
#footer-right { float: right; text-align: right; padding: 20px; }
.social-icon { width: 32px; height: 32px; margin-top: 4px; margin-left: 8px; border: 0; }

#content ul { margin: 0; padding: 0 30px 10px 10px; list-style: none; }
#content ul > li { margin: 0; padding: 0 0 1em 15px; background: url("/i/bullet-small.gif") 0 2px no-repeat; }
#content ol > li { margin: 0; padding: 0 20px 1em 0; }