form.css

form.css

/* a:link {color:#000000; text-decoration:none}
a:visited {color:#000000; text-decoration:none}
a:hover {color:#000000; text-decoration:none} */

a:link {color:#ffffff; text-decoration:none}
a:visited {color:#ffffff; text-decoration:none}
a:hover {color:#ffffff; text-decoration:none}

/* image styles */

.imgsize {width:460px;height:420px;}

.imgplaceholder {position:absolute;top:100px;left:1040px;border:1px solid #000000;width:520px;height:680px;overflow:hidden;}

/* paragraph styles */

.phpmessage {
font-family:'Voltaire', sans-serif;
font-size:22px;
text-transform:uppercase;
color:#000000;
position:absolute;
}

p.error {
position:absolute;
float:left;
font-family:'Voltaire', sans-serif;
}

p.errorbio {
position:absolute;
color:#ffff00;
font-family:'Voltaire', sans-serif;
}

p.errorcard {
position:relative;
color:#ffff00;
font-family:'Voltaire', sans-serif;
}

p.errorimage {
position:absolute;
color:#000000;
font-family:'Voltaire', sans-serif;
}

.headingreg {text-transform:uppercase;font-family:'Voltaire', sans-serif;}

/* inset styling */

.insetcard {
font-family:'Voltaire', sans-serif;
position:relative;
color:#000000;
background-color:#ffffff;
}

.insethome { 
left:42%;
font-family:'Voltaire', sans-serif;
position:relative;
top:4px;
margin-right:10px;
}

.insetreg { 
position:relative;
font-family:'Voltaire', sans-serif;
padding:6px 6px 6px 8px;
margin-bottom:40px;
outline:none;
box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
color:#000000;
background-color:#ffffff;
}

.textareabiography { 
font-family:'Voltaire', sans-serif;
color:#0000000;
background-color:#fffffff;
position:absolute;
}

/* Table Styling */

.tcgnamecell {
background-color:#333333;
color:#ffffff;
font-family:TCGHEADING;
text-transform:uppercase;
border-bottom:4px solid #ffffff;
}

.tcgimagecell {
font-family:'Voltaire', sans-serif;
background-color:#ffffff;
}

.tcgbiocel {
font-family:'Voltaire', sans-serif;
background-color:#b22222;
color:#ffffff;
position:absolute;
}

.tcgcell {
font-family:TCG;
color:#ffffff;
position:absolute;
}

.tcgcellheading {
font-family:TCG;
background-color:#333333;
color:#ffffff;
position:relative;
display:block;
}

.tcgdatacellheading {
font-family: 'Francois One', sans-serif;
background-color:#333333;
color:#ffffff;
position:absolute;
table-layout:fixed;
}

.tcgdatacell {
font-family: 'Francois One', sans-serif;
background-color:#333333;
color:#ffffff;
position:relative;
}

#tablecard {
background-color:#333333;
margin:40px 0px 0px 700px;
border:4px solid #ffffff;
}

#tabletcg {
background-color:#333333;
border:4px solid #ffffff;
}

/* Form styling */

.formreg {
font-family:TCG;
float:left;
border:solid 1px #d2d2d2;
height:auto;
background-color:#ffffff;
color:#000000;
border:0px;
}

.cardcontainer {
float:left;
border:solid 1px #d2d2d2;
background-color:#ffffff;
color:#000000;
border:0px;
}

legend{
top:100px;
left:138px;
font-size:22px;
padding:10px 140px 10px 2px;
background-color:#8C1717;
color:#ffffff;
position:absolute;
width:67.1em;
border:solid 1px #000000;
}

fieldset {
border:0;
padding:0;
}

.legendcreate{
font-family:'Voltaire', sans-serif;
background-color:#8C1717;
color:#ffffff;
position:absolute;
text-transform:uppercase;
}

/* Buttons */

.loginbtn {
font-family:'Voltaire', sans-serif;
border-width:1px;
border-color:#8C1717;
background-color:#6B4226;
color:#ffffff;
position:absolute;
}

.reset1 {
font-family:'Voltaire', sans-serif;
background-color:#8C1717;
color:#ffffff;
border-width:1px;
border-color:#8C1717;
position:absolute;
-moz-border-radius-bottomright:50px;
border-bottom-right-radius:50px;
}

.submit1 {
font-family:'Voltaire', sans-serif;
border-width:1px;
border-color:#8C1717;
background-color:#8C1717;
color:#ffffff;
position:absolute;
-moz-border-radius-bottomright:50px;
border-bottom-right-radius:50px;
}

.submitcbtn {
font-family:'Voltaire', sans-serif;
text-transform:uppercase;
background-color:#8C1717;
color:#ffffff;
position:absolute;
}

.editcbtn {
font-family:'Voltaire', sans-serif;
text-transform:uppercase;
background-color:#8C1717;
color:#ffffff;
position:absolute;
}

.resetcbtn {
font-family:'Voltaire', sans-serif;
text-transform:uppercase;
background-color:#8C1717;
color:#ffffff;
position:absolute;
}

.uploadbtn {
font-family:'Voltaire', sans-serif;
text-transform:uppercase;
background-color:#8C1717;
color:#ffffff;
position:absolute;
-moz-border-radius-bottomright:50px;
border-bottom-right-radius:50px;
}

.uploadimgbtn {
font-family:'Voltaire', sans-serif;
text-transform:uppercase;
background-color:#333333;
color:#ffffff;
border-width:1px;
border-color:#8C1717;
position:absolute;
cursor: default;
}

.uploadimgbtn:hover {
background: #000000;
}

.uplbtn{
position: absolute;
opacity:0;
top:0;
left:0;
}

.savebtn {
font-family:'Voltaire', sans-serif;
text-transform:uppercase;
background-color:#8C1717;
color:#ffffff;
position:absolute;
}

/* Pagination */

.currentcard {
font-family:TCG;
position:absolute;
color:#ffffff;
}

.currentcardedit {
font-family:TCG;
position:absolute;
color:#000000;
}

.nextcard {
font-family:TCG;
position:absolute;
color:#ffffff;
}

.nextcardedit {
font-family:TCG;
position:absolute;
color:#ffffff;
}

.previouscard {
font-family:TCG;
position:absolute;
color:#ffffff;
}

.previouscardedit {
font-family:TCG;
position:absolute;
color:#000000;
}

.countnext {
font-family:TCG;
position:absolute;
color:#ffffff;
}

.countprevious {
font-family:TCG;
position:absolute;
color:#ffffff;
}

.countnextedit {
font-family:TCG;
position:absolute;
color:#ffffff;
}

.countpreviousedit {
font-family:TCG;
position:absolute;
color:#ffffff;
}

@media only screen and (min-width : 1366px) {

/* FOR LAPTOP 1366 x 768 */

/* Pagination */

.currentcard {
font-size:18px;
margin-left:880px;
margin-top:0px;
}

.nextcard {
font-size:30px;
right:200px;
top:400px;
}

.previouscard {
font-size:30px;
left:160px;
top:400px;
}

.countnext {
font-size:20px;
right:200px;
color:#ffffff;
top:450px;
}

.countprevious {
font-size:20px;
left:160px;
top:450px;
}

.currentcardedit {
font-size:18px;
margin-left:290px;
margin-top:-50px;
}

.nextcardedit {
font-size:30px;
color:#000000;
left:480px;
top:818px;
}

.previouscardedit {
font-size:30px;
color:#000000;
left:120px;
top:818px;
}

.countnextedit {
font-size:20px;
left:500px;
top:460px;
}

.countpreviousedit {
font-size:20px;
left:160px;
top:460px;
}

/* image styles */

.imgsize {width:460px;height:420px;}

.imgplaceholder {position:absolute;top:140px;left:740px;border:1px solid #000000;width:500px;height:650px;}

/* paragraph styles */

.phpmessage {
font-size:22px;
margin-left:20px;
padding:20px;
}

p.error {
font-size:22px;
margin-left:40px;
margin-top:-60px;
}

p.errorbio {
font-size:22px;
left:140px;
margin-top:238px;
width:200px;
}

p.errorcard {
font-size:22px;
margin-left:420px;
top:-35px;
}

p.errorimage {
font-size:22px;
left:1240px;
margin-top:5px;
}

.headingreg {margin:200px 0px 0px 340px;font-size:24px;text-transform:uppercase;font-family:'Voltaire', sans-serif;}

/* inset styling */

.insetcard {
font-size:20px;
left:250px;
width:140px;
padding:10px 6px 6px 8px;
top:-40px;
}

.insethome { 
left:42%;
font-size:22px;
top:4px;
margin-right:10px;
}

.insetreg { 
left:340px;
top:20px;
margin-right:10px;
font-size:22px;
padding:6px 6px 6px 8px;
margin-bottom:40px;
width:600px;
}

.textareabiography { 
font-size:21px;
width:500px;
height:180px;
margin-top:25px;
left:140px;
padding:10px;
}

/* Table Styling */

.tcgnamecell {
padding-left:160px;
font-size:32px;
}

.tcgimagecell {
background-color:#ffffff;
}

.tcgbiocel {
font-size:19px;
width:230px;
padding:5px;
height:320px;
}

.tcgcell {
font-size:19px;
padding:10px 0px 0px 10px;
left:60px;
}

.tcgcellheading {
font-size:20px;
width:200px;
margin:10px 0px 0px 20px;
padding-top:20px;
top:5px;
}

.tcgdatacellheading {
font-size:18px;
height:35px;
padding:10px;
width:180px;
margin-left:240px;
}

.tcgdatacell {
font-size:18px;
width:20px;
height:35px;
padding:10px 20px 10px 10px;
}

#tablecard {
font-size:14px;
margin:40px 0px 0px 700px;
width:400px;
margin-bottom:40px;
}

#tabletcg {
font-size:14px;
margin:40px 0px 100px 40px;
border:4px solid #ffffff;
width:600px;
margin-bottom:40px;
padding-bottom:272px;
}

/* Form styling */

.formreg {
font-size:24px;
padding:40px 5px 100px 0px;
border:0px;
width:1610px;
margin-top:120px;
margin-left:140px;
}

.cardcontainer {
font-size:30px;
padding:30px 5px 34px 0px;
width:1200px;
margin-left:70px;
}

.legendcreate{
top:20px;
left:70px;
font-size:22px;
padding:10px 136px 10px 80px;
width:990px;
}

/* Buttons */

.loginbtn {
left:72%;
font-size:20px;
padding:4px 10px 4px 10px;
top:4px;
height:33px;
width:120px;
}

.reset1 {
font-size:22px;
padding:2px 20px 2px 10px;
height:50px;
width:120px;
margin-left:670px;
}

.submit1 {
font-size:22px;
padding:2px 10px 2px 10px;
height:49px;
width:120px;
margin-left:830px;
}

.submitcbtn {
font-size:22px;
padding:2px 10px 2px 10px;
margin-left:617px;
margin-top:-70px;
}

.editcbtn {
font-size:22px;
padding:2px 10px 2px 10px;
height:49px;
width:120px;
margin-left:480px;
margin-top:-70px;
}

.resetcbtn {
font-size:22px;
padding:2px 20px 2px 10px;
height:50px;
width:120px;
margin-left:345px;
margin-top:-70px;
}

.savebtn {
font-size:22px;
padding:2px 10px 2px 10px;
height:49px;
width:120px;
margin-left:516px;
margin-top:-30px;
}

.uploadbtn {
font-size:22px;
padding:2px 20px 2px 10px;
height:46px;
width:80px;
margin-left:350px;
margin-top:-60px;
}

.uploadimgbtn {
font-size:20px;
padding:13px 20px 2px 40px;
height:32px;
width:135px;
margin-left:670px;
margin-top:-28px;
cursor: default;
}

.uploadimgbtn:hover {
background: #000;
}

.uplbtn{
position:absolute;
opacity:0;
top:0;
left:0;
min-height:50px;
width:200px;
}

}

@media only screen and (min-width : 1920px) {

/* FOR DESKTOP 1920 x 1080 */

/* image styles */

.imgsize {width:460px;height:420px;}

.imgplaceholder {top:100px;left:1040px;width:520px;height:680px;}

/* paragraph styles */

.phpmessage {
font-size:22px;
margin-left:20px;
padding:20px;
}

p.error {
font-size:22px;
margin-left:40px;
margin-top:-60px;
}

p.errorbio {
font-size:22px;
left:330px;
margin-top:240px;
width:200px;
}

p.errorcard {
font-size:22px;
margin-left:480px;
top:-40px;
}

p.errorimage {
font-size:22px;
left:1260px;
margin-top:-20px;
}

.headingreg {margin:200px 0px 0px 340px;font-size:24px;}

/* inset styling */

.insetcard {
font-size:20px;
left:270px;
width:180px;
padding:10px 6px 6px 8px;
top:-40px;
}

.insethome { 
left:42%;
font-size:22px;
top:4px;
margin-right:10px;
}

.insetreg { 
left:340px;
top:20px;
margin-right:10px;
font-size:22px;
padding:6px 6px 6px 8px;
margin-bottom:40px;
width:600px;
}

.textareabiography { 
font-size:22px;
width:600px;
height:180px;
margin-top:25px;
left:320px;
padding:10px;
}

/* Table Styling */

.tcgnamecell {
padding-left:160px;
font-size:32px;
}

.tcgimagecell {
}

.tcgbiocel {
font-size:19px;
width:230px;
padding:5px;
height:320px;
}

.tcgcell {
font-size:19px;
padding:10px 0px 0px 10px;
left:200px;
}

.tcgcellheading {
font-size:20px;
width:200px;
margin:10px 0px 0px 40px;
padding-top:20px;
top:5px;
}

.tcgdatacellheading {
font-size:18px;
height:35px;
padding:10px;
width:180px;
margin-left:240px;
}

.tcgdatacell {
font-size:18px;
width:20px;
height:35px;
padding:10px 20px 10px 10px;
}

#tablecard {
font-size:14px;
margin:40px 0px 0px 700px;
width:400px;
margin-bottom:40px;
}

#tabletcg {
font-size:14px;
margin:40px 0px 100px 60px;
width:700px;
margin-bottom:40px;
padding-bottom:272px;
}

/* Form styling */

.formreg {
font-size:24px;
padding:40px 5px 100px 0px;
width:1610px;
margin-top:120px;
margin-left:140px;
}

.cardcontainer {
font-size:30px;
padding:30px 5px 34px 0px;
width:1400px;
margin-left:220px;
}

.legendcreate{
top:20px;
left:220px;
font-size:22px;
padding:10px 136px 10px 80px;
width:1190px;
}

/* Buttons */

.loginbtn {
left:72%;
font-size:20px;
padding:4px 10px 4px 10px;
top:4px;
height:33px;
width:120px;
}

.reset1 {
font-size:22px;
padding:2px 20px 2px 10px;
height:50px;
width:120px;
margin-left:670px;
}

.submit1 {
font-size:22px;
padding:2px 10px 2px 10px;
height:49px;
width:120px;
margin-left:830px;
}

.submitcbtn {
font-size:22px;
padding:2px 10px 2px 10px;
height:49px;
width:120px;
margin-left:637px;
margin-top:-30px;
}

.editcbtn {
font-size:22px;
padding:2px 10px 2px 10px;
height:49px;
width:120px;
margin-left:480px;
margin-top:-70px;
}

.resetcbtn {
font-size:22px;
padding:2px 20px 2px 10px;
height:50px;
width:120px;
margin-left:500px;
margin-top:-30px;
}

.uploadbtn {
font-size:22px;
padding:2px 20px 2px 10px;
height:46px;
width:80px;
margin-left:350px;
margin-top:-60px;
}

.uploadimgbtn {
font-size:20px;
padding:13px 20px 2px 40px;
height:32px;
width:135px;
margin-left:820px;
margin-top:-28px;
}

.uplbtn{
opacity:0;
top:0;
left:0;
min-height:50px;
width: 200px;
}

.savebtn {
font-size:22px;
padding:2px 10px 2px 10px;
height:49px;
width:120px;
margin-left:637px;
margin-top:-30px;
}

/* Pagination */

.currentcard {
font-size:18px;
margin-left:880px;
margin-top:0px;
}

.currentcardedit {
font-size:18px;
margin-left:290px;
margin-top:-50px;
}

.nextcard {
font-size:30px;
right:200px;
top:400px;
}

.nextcardedit {
font-size:30px;
left:1640px;
top:400px;
}

.previouscard {
font-size:30px;
left:160px;
top:400px;
}

.previouscardedit {
font-size:30px;
color:#ffffff;
left:80px;
top:400px;
}

.countnext {
font-size:20px;
right:200px;
top:450px;
}

.countprevious {
font-size:20px;
left:160px;
color:#ffffff;
top:450px;
}

.countnextedit {
font-size:20px;
left:1640px;
top:450px;
}

.countpreviousedit {
font-size:20px;
left:160px;
top:450px;
}

}