/* FOR LARGER CHECKBOXES AND RADIO BUTTONS THIS WORKS BEST FOR WIN AND MAC */

input[type=radio] {
    transform: scale(1.2);
}
input[type=checkbox] {
    transform: scale(1.3);
}

/* BELOW HERE, ALL FAILURES */
/* NICE BOX SHADOWS FOR FF BUT UNACCEPTABLE IN WIN CHROME! */

/* CONDITIONAL: http://www.conditional-css.com/usage
Webkit=Safari,Chrome  Gecko=FF IE Opera*/
/* BUT SADLY THESE CONDITIONALS ARE NOT WORKING FOR FIREFOX */

[If ! Webkit] input[type=radio] {
    transform: scale(1.1);

/*

FF MAC AND WIN: PERFECT!
MAC CHROME: NOT BAD.
WIN CHROME: FAILS TO ROUND AND REALLY UGLY.
SAFARI: ALMOST NO CHANGE.
EDGE: PERFECT.
WIN OPERA: ACCEPTABLE (RADIOS SQUARE).
*/
		border-radius: 60%;
		box-shadow: 0px 0px 2px 1px #888;

/*
-webkit-box-shadow: 0px 0px 0px 1px rgba(128,128,128,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(128,128,128,1);
box-shadow: 0px 0px 0px 1px rgba(128,128,128,1);
*/

/* NO EFFECT
		border-style: solid;
		border-width: 2px;
*/
}

[If ! Webkit] input[type=checkbox] {
    transform: scale(1.3);

/* voffset hoffset blur spread color */	
		box-shadow: 0px 0px 2px 1px #888;

/* GREAT IN FF; UGLY IN CHROME
-webkit-box-shadow: 0px 0px 0px 1px rgba(128,128,128,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(128,128,128,1);
box-shadow: 0px 0px 0px 1px rgba(128,128,128,1);
*/

/* OUTLINE WORKS BUT IS UGLY AND NO RADIUS
		outline: 1px solid #888;
		outline-radius: 40%;
*/
}

/*
modified from https://stackoverflow.com/questions/306924/can-i-change-the-checkbox-size-using-css

WHEN I GET THIS TO LOOK PERFECT ON MAC THE X IS TOO BIG AND OFF CENTER IN WIN
input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: sub;
    width: 16px; 
    height: 16px;
    background-color: #fff;
		border-style: solid;
		border-width: 2px;
		border-color: #888;
		border-radius: 60%;
}

input[type=radio]:checked:after {
    vertical-align: top;
    position: relative;
		right: 2px;
		bottom: 14px;
		font-size: 250%;
		font-weight: bold;
		color: blue;
		content: "\2718";
/* 263b=smileyface 2605=star 26ab=solidBlackCircle 2718=heavyX 271a=heavyCross //
}
*/

/* CHECK MARK IS PERFECT IN MAC, A BIT TOO BIG AND TOO RIGHT IN WIN BUT ACCEPTABLE. */
/*
input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: middle;
    width: 14px; 
    height: 14px;
    font-size: 14px;
    background-color: #fff;
		border-style: solid;
		border-width: 1px;
		border-color: #888;
		border-radius: 25%;
}

input[type=checkbox]:checked:after {
    position: relative;
    bottom: 8px;
    left: 1px;
    /* content: "\2713"; check mark //
		/* content: "&#10004;"; thick check mark FAILS //
		/* content: "✔"; FAILS //
		font-size: 150%;
		content: "\2714"; /* same as 10004 //
}
*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
